How to Make Your Product Page Design Professional and Beautiful - Elementor Single Product Tutorial

Sdílet
Vložit
  • čas přidán 7. 09. 2024
  • How to Make Your Product Page Design Professional and Beautiful - Elementor Pro Single Product Template Tutorial using Elementor Theme and WooCommerce Builder
    ★ ---- Important Links ---- ★
    * SiteGround --- bloggdude.com/sg (Get 67% OFF Link)
    * Free eCommerce Tutorial -- • How to Create a FREE e...
    * Elementor -- bloggdude.com/...
    --------------------------------------
    ☑ Watched the video!
    ☐ Liked?
    ☐ Subscribed?
    --------------------------------------
    ☑ Instagram -- / nayyar_shaikh
    ☑ Twitter -- / realnayyar
    ☑ Facebook -- / bloggdude
    --------------------------------------
    For more tutorials like this, or to learn how to make a wordpress website feel free to visit my website. Also make sure to subscribe to my newsletter where i give away divi layouts!
    Note: Some of the above links are Affiliate Links, Which Means I earn Some Commission through that Which helps me Keep Making these Free Videos for You.
    #wordpress

Komentáře • 214

  • @geezgod
    @geezgod Před 4 lety +5

    Hi, Nayyar! I’ve been watching a lot of your videos lately and I would really like to commend you for the quality and comprehensiveness of your videos. Great help, man! 👍🏼
    In addition, may I request for a tutorial on how to edit/design the Dokan dashboard interface for both vendors/customers? That would be a really great help. 😊
    Hi from the Philippines! 👋🏼🇵🇭

  • @nusratanjum_96
    @nusratanjum_96 Před 3 lety +2

    Your tutorial is great I thought i can design this easily but you have used elementor pro plz make sure to mention elementor PRO in the video title.

  • @kristhyfiallos
    @kristhyfiallos Před 4 lety +1

    10/10 on clearness. 10/10 On execution. 10/10 On entertainment. I definitely enjoy working with your videos!

  • @ilyasch9289
    @ilyasch9289 Před 2 lety

    Thanks you so much Nayyar bhai. This wordpress tutorial is really amazing and useful for me....

  • @YashodeepBoob2
    @YashodeepBoob2 Před 3 lety +1

    Hello Nayyar Sir , I am really big fan of yours. By watching your videos i have start creating website using wordpress. Recently I have created a traveling website, my client want customize Single tripe page.
    Can you please help me. by making such Video(same like this for travel page) . or please suggest some plugin which help me out in this. i have all ready seen your travel website video in that we can not customize the single trip page. Thank you so much in advance.

  • @barsk76
    @barsk76 Před 4 měsíci +1

    Nayyay; Thank you for making this step by step video. I have a question: Is it possible to place a second button (Buy Now Button) near by the "Add to cart" button at elementor pro custom single product page like Shopify themes have? There is no single video at youtube or subject on the in the google. May be if you make a video about it, yours can be the first. You know all latest modern Shopify stores single product pages has two buttons side by side or stacke. (Such as dawn theme at shopify). I am very curious about if it is possible with Elementor Pro custom Single Product Page? Thanks in Advance 🤙🤙

  • @nanceemisra
    @nanceemisra Před 3 lety

    Thank you so much for making this video 😊😊🙏🙏

  • @mykethenetizen2066
    @mykethenetizen2066 Před 4 lety +1

    your turorials has been of help. Am now making my first ecommerce website

  • @airtoolsbih
    @airtoolsbih Před 11 měsíci

    Again what a big help. This is great, thank you

  • @arun3998
    @arun3998 Před 4 lety +1

    Bhai.. please make a video on Ivent blogging..

  • @marcosbelloli
    @marcosbelloli Před 4 lety +1

    I have followed your videos to start building my ecommerce. Now I start building my product page. Do you have any other video without using Elementor pro?

  • @josuesalomon20
    @josuesalomon20 Před 4 lety +1

    Great tutorial, I always wanted to know how to create a single product page with Elementor because I'd like to create an online store entirely using Elementor, keep up the great work!

  • @woohacks1587
    @woohacks1587 Před 4 lety

    Hi Nayyar....Power packed & super educative video tutorial. I got a complete 360 degree perspective from start to finish. Big big thanks !! I am already watching more of your videos and learning more.
    Adding to above, can you also upload 2-3 video series (difficulty level : Beginner to Medium) on how to use Elementor and make HTML/CSS style changes & customizations (beyond adding/removing spaces, changing background colors etc ) to standalone Product page and make it more attractive/professional & sales oriented. Also, elementor+ CSS to improve layout for mobile devices.
    For example : Placing additional buttons, changing position of quantity/color/Size fields or buttons for variable products, adding trust seals or image/icons (Sales flashes etc), introducing woocommerce hooks etc. These are badly needed as majority videos just teach on how to apply elementor widgets and not talk about CSS customizations aimed for improving conversions (for ecommerce stores).
    Thanks

  • @Cutcomedy
    @Cutcomedy Před 4 lety +1

    Masha Allah,Congrats for 100k subscribers Bhai , keep on going, please make a video of unboxing silver play button

  • @sagar_khandakar
    @sagar_khandakar Před 3 lety

    Thank you so much boss, It's vedio too much help me for complete 180$ fiver client job 🥳

  • @businessidea150
    @businessidea150 Před 4 lety +1

    Hey there, Nayyar Shaikh i am glad to see your detailed tutorial on wordpress. Can make a tutorial on College review website in wordpress like:- collegedunia, collegedekho, career360, etc.

  • @komolcdsks
    @komolcdsks Před 4 lety +2

    *_fast view bro_* congratulations 100K subscriber thanks

  • @adnanyounas.rajput
    @adnanyounas.rajput Před 4 lety

    Excellent job you have done... i watch many videos but couldn't clear my concepts.. you did a great job...

  • @mcskiato1
    @mcskiato1 Před 3 lety

    the best...........bravo......................1000/1000

  • @ayazk325
    @ayazk325 Před 4 lety

    sir you are a gem very talented guy i really appreciate you i have been watching your videos when your subscriber were 10k or something now you can see it crossed 101k it shows that how sincere and delegated you are to your work. i m subscribed to your both channel i wish i could support you financially inshallah i will do one day.
    i am facing one problem sir can you help me out?
    Actually i might sound dumb but i will ask anyway can you please make a complete video on how to make a categories like flipkart.com or snapdeal. like can you explain completely how to make categories and subcategories and under subcategories there is also subcategories just like flipkart A to Z?
    lots of love from PAKISTAN.

  • @alifhasanshah8057
    @alifhasanshah8057 Před 3 lety

    you are awesome man.. carry on ... Thank you ...

  • @shoaibsikanderpak
    @shoaibsikanderpak Před rokem

    Hello Nayyar i have a question. i am creating an ecommerce store but there are so much variation for a single product. if there are option 1, 2,3,4,5 if a person click option 1 i have 5 more options to choose from . if a customer click option 2 i have 6 variations to choose from and so on. what should i do ?

  • @aliimran-jc6tg
    @aliimran-jc6tg Před 4 lety +1

    Payment getway kaisay connect hota hai jab koi customer ap k website se purchasing karta hai credit card se payment k bad money kaha jata hai ap k bank account main kaisay ayega money after customer payment plz make a video on that.

  • @indranidey8520
    @indranidey8520 Před 4 lety

    Which picture format we should use for ecommerce website? Png or JPEG? And what should be the size of every individual picture?

  • @darrenchuang6552
    @darrenchuang6552 Před 4 lety +3

    Hi there, i have a question about the thumbnail images below the main product image, how did you get the thumbnails horizontal inline by default? or is there a setting to do it?

  • @tahrimasharminnisa6786
    @tahrimasharminnisa6786 Před 4 lety +1

    Can I do this with genaret press theam?

  • @mclarenf45
    @mclarenf45 Před 4 lety

    How to create a customized product selection, for example if a product needs to have a minimum order, multiple size variation, weight variation, volume, length.

  • @lupitagoveavargas4469
    @lupitagoveavargas4469 Před 4 lety +1

    Hello, this video is amazing, thank you very much, but i have a question, how add Attributes, Variable Products and Color Swatches on the single product page with Elementor, because that was deleted from the attributes, good day

  • @amazingcollectionconcept3369

    hi Thanks for this beautiful video . i have a issue that when i click on my single product thumbnail image. it will not visible. can you please give me the solution o this problem

  • @alishabrown9738
    @alishabrown9738 Před 3 lety

    Should I make a new/separate template for different products or should I save this template under a different category and then modify it?

  • @hirushadeshan3482
    @hirushadeshan3482 Před 4 lety

    Thanks Nayyar.

  • @bcastromusic
    @bcastromusic Před 4 lety

    A few quick notes:
    1) On the latest version of Elementor Pro you start your custom Template going to Templates -> Theme Builder ... then follow this tutorial
    2) For some reason the "Related Products" show up at the top of the Single Product page even when you have a fresh new blank single product template!
    The solution was to do one of two things:
    a) add this to function.php: remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    b) add this to Appearance -> Customize -> Additional CSS: .related.products { display: none; }

  • @isntlifebetter
    @isntlifebetter Před 4 lety

    This was really great teaching! BUT its not for the novice. I am pretty knowledgable around Elementor so it helped me a lot but if you are a newbie ummmm its going to be hard for you to catch on because he moves super fast

  • @kimberleylarmouth3724
    @kimberleylarmouth3724 Před 3 lety +1

    Hi Nayyar, great video! I'm having trouble as I bought the Flatsome theme, UX builder, WooCommerce and Elementer Pro all clashing. What would you advise please? Thank you so much, kimberley

  • @eyeredominique1079
    @eyeredominique1079 Před 4 lety

    U are the best bro❤️🙌🙏

  • @VivekSingh-ix1op
    @VivekSingh-ix1op Před 4 lety

    Now myntra has also this video option In many of their products.. Videos r helpful at selling garments.

  • @Tomoff1Gaming
    @Tomoff1Gaming Před 2 lety

    Thanks, very helpful!

  • @user-ii5eh7to8x
    @user-ii5eh7to8x Před 3 lety

    just WOW!!!!!!

  • @jenner1649
    @jenner1649 Před 4 lety

    bro all your tutorials are awesome..if possible plz teach us the restaurant booking like pizza all in one section( qty, option for add ons , and cost) in elementor pro

  • @dailysavingchoices9931

    Thank You Best Video Bro

  • @DeepsArcade
    @DeepsArcade Před 4 lety

    Awesome video thanks a lot

  • @miguelmorales961
    @miguelmorales961 Před 4 lety

    Hi,, where is the navegation block (ast-product-navigation-wrapper) between products? I want the put the arrows for moving to next and previous single product. Regards

  • @rizwandurrani3392
    @rizwandurrani3392 Před 4 lety +1

    How to change the drop down of product veriation to something unique with elementor

  • @KnightsMultiMediaCapeTown

    what if you want products on the website but not having an online purchase option, just show all products that are available but with no checkout basket. can it be removed from this theme or is there a better one that doesn't have eCommerce attached

  • @venkatvenky0079
    @venkatvenky0079 Před 2 lety

    Hi.
    *Very small image in template for single product*
    This single product image is correct size in astra pro default theme. But when i use elementor to build single product page, when i drag and drop the 'Product Images' from elementor section, the product image is getting smaller than actual image.it looks bad.
    Can any help me here?

  • @unknownman1
    @unknownman1 Před 4 lety +1

    *Hi from Finland*

  • @developerfahim5759
    @developerfahim5759 Před 3 lety

    Dropdown option appear in Variable products with these type of design?

  • @MarketTv
    @MarketTv Před 4 lety

    Seling website pe ads kai chalaye website ktna old rhena chaye plz help ek full video
    Ads kai se lagaye

  • @RacingGaame
    @RacingGaame Před 3 lety

    How add variants multiple selection
    Like Customer can’t select
    M-3pieces
    L-3 pieces
    Xl-2 pieces
    For single product

  • @naifandroid3694
    @naifandroid3694 Před 3 lety +1

    Nayyar Shaikh ,
    I'd like to thank you for all your videos that you made but I noticed in your videos that you did not cover Gutenberg Block Editor while you building E commerce
    I wish if you could show us how to build Single Product Page or E-coomerce by using Kadence theme because most users now would like to use Open Source like Gutenberg Block Editor to build their Sites and to reduce their costs and now WordPress going forward with Block Editor and integrate all features in Gutenberg :)
    again I really thank you for a great efforts that you made in your channel and wish you the best. Like and Share ---> Awesome d^_*b

  • @devnurul11
    @devnurul11 Před 3 lety

    really good

  • @For91Days
    @For91Days Před 4 lety

    This was super helpful - thank you!!!!

  • @pellekarlsson152
    @pellekarlsson152 Před 4 lety

    Great video! Single product Image gallery not showing in Elementor Editor Mode why? when I saved and reopened the editor again product image is gone (product image widget is there without image)

  • @zidipathan
    @zidipathan Před 4 lety

    Salaam....nayyar bhai how can we display only least variation price in elementor product tab?

  • @emtexstore6821
    @emtexstore6821 Před 4 lety +20

    Before one and half year ago i studied the basics of wordpress from nayyar.becoz i want start an online store.after i started an online store which is a failure.but i didn't give up.learned new things day by day.sleepless night.i put my all free time for this.actually i got an intrest or passion in wordpress.then again started a new business.i studied marketing and seo tricks.now in this time my website selling more than 3lkh rs per month.now i am running 3 successful website.now i can make any type of wordpress site within hours.but the basic of wordpress i got from nayyar.thanks man
    Hashim
    Samnantools.in

    • @oneeminem2666
      @oneeminem2666 Před 4 lety

      Great story man and your website looks very clean. Would mind telling me which theme you used?

    • @parthjuneja7074
      @parthjuneja7074 Před 4 lety

      Hamza Shaikh you can use wpthemedetector to check theme of the website.

    • @tweetycutiecrafts385
      @tweetycutiecrafts385 Před 4 lety

      Hi ... I am learning wordpress started with Nayyar eccomerce website with our any idea, thanks to him , your website looks very neat, I need your help , I would like to know how you used the menu in the footer of mobile

    • @hirushadeshan3482
      @hirushadeshan3482 Před 4 lety

      Congratulations man.

  • @Play-Time-for-Kidz
    @Play-Time-for-Kidz Před 4 lety

    Dear Nayyar... One question... If I purchase a $49 plan of Elementor Pro and make a website for the client. Does the client has to pay $49 every year? Since the package plan says that its a per year plan.
    By the way very nice tutorial. JazakAllah.

  • @msmediascreenentertainment1951

    realy great thanks boss

  • @supriyachatterjee3183
    @supriyachatterjee3183 Před 4 lety

    Please make a video on "How to make a floating mobile view 'Add to cart' 'Buy now' button on every single product page.. (Like Flipkart mobile view or many other ecommerce site).

  • @zamsMG
    @zamsMG Před 3 lety

    hallo nayyar shaikh, can you show me how to add attributes like color or size, on creating single product with elementor, i've looked at other tutorials and no one can make it. ?

  • @CuteAvani08
    @CuteAvani08 Před rokem

    When I drop products image it's too small in size . There is no option of increasing size. What should i do.?

  • @aleksandarmarkovic7206

    Thank you so much!!!

  • @abutalhajubaer1842
    @abutalhajubaer1842 Před 3 lety

    Amazing❤️♥️

  • @hoopstalkcentral
    @hoopstalkcentral Před 4 lety +1

    do you need woocommerce theme or plugin for this?

  • @ghoomkeetubrijwasi8934
    @ghoomkeetubrijwasi8934 Před 4 lety +1

    Congratulation for 100K 👍

  • @NanoInfinite
    @NanoInfinite Před 4 lety

    Hi Nayyar. Gr8 tutorial. I want the product gallery images on the left side of the main product inside of below product. How to do it in elementor pro?

  • @rahilahmed2524
    @rahilahmed2524 Před 4 lety

    can we put everything in the right side... Product Description under Add to cart button?

  • @MuhammadZain-he5kf
    @MuhammadZain-he5kf Před 2 lety

    Heloo Sir Can We add different products in one page which all layout and design same. For Example i have three type of products (Ring, Watch, Locket )Normally we add only one product in Custom Product Page , show Only wich upload recently , but i want to Show On this Page three types wich i discribe you on top where same function all types of products which include( Product Image, Product Title, Price , add to cart Button, product category, attributes).. please help me and make a beautiful tutorial and reply me must , i have very well hope you must help me

  • @josephusufunzuza1665
    @josephusufunzuza1665 Před rokem

    Hello, I am using Mallon Theme trying to create a pharmacy website, but the widget under the heading ALL Department is showing these errors: : Undefined array key 6570 in C:\Users\Admin\Local Sites
    espharmacy\app\public\wp-includes
    av-menu-template.php on line 211. How can I fix it?

  • @designerabysneha
    @designerabysneha Před 4 lety

    Thank u so much buddy love u

  • @alferinclan6933
    @alferinclan6933 Před 3 lety

    Bro this is great! but unfortunately, when I add the "ADD TO CART" widget it becomes blank. Any Idea how to fix it?

  • @naryacreation9404
    @naryacreation9404 Před 3 lety

    In cart page, I want to change automatically product price as per product weight instead of product quantity for woocommerce grocery store, please help

  • @createwebsite3202
    @createwebsite3202 Před 4 lety

    Please can you make video nitro theme then prepare for us like kitchenware

  • @paponahamed9625
    @paponahamed9625 Před 4 lety

    brother your videos are great. But i can't find any restaurant order type website on your videos do you have that type of tutorial

  • @suryakantsahoo8655
    @suryakantsahoo8655 Před 4 lety

    hello Nayyar sir how you to make resources and discounts page in WordPress like yours page please tell

  • @pcfreesoftware
    @pcfreesoftware Před 4 lety

    Congratulation for 100K Subscriber.
    can you make the next video on Skrill payment gateway for woocommerce ?????

  • @y2vikram
    @y2vikram Před 4 lety

    Very nice tutorial, learnt a lot

  • @subhajyotisarkar
    @subhajyotisarkar Před 4 lety

    How to add a Buy now button just after Add to cart like amazon flipkart?

  • @youssefbauer1776
    @youssefbauer1776 Před 3 lety

    thank you so much

  • @MrMiragexv
    @MrMiragexv Před 3 lety

    how to build different types of product galleries on single product page?

  • @richburmond6761
    @richburmond6761 Před 4 lety

    Hey Nayar, did u ever try jetwoobuilder to do this? Or woolementor? They both look more extensive. Im not sure what to pick yet

  • @Annons9000
    @Annons9000 Před 3 lety

    GREAT!

  • @motivatorforu
    @motivatorforu Před 3 lety

    Hi there, very informative tutorial. I have one query. It would be great if you can help me out brother.
    I want to create a separate product page which only customer with link can open and then add that product in the cart and checkout.
    For example- I have several products listed on the website. But for a particular product a customer wants an customisation in the product. Hence, specifically for that customer I want a separate product page that would display the customised product and its detail (price ,info etc) only to him.
    I hope you understood my query.
    Thanks in advance.

  • @robertrybicki9970
    @robertrybicki9970 Před 3 lety

    Thanks man! Great help as usual!

  • @buy2carts
    @buy2carts Před 4 lety

    hello, my single page image not showing and also not showing related product too. please provide me why the product image not showing

  • @khorshedalam9440
    @khorshedalam9440 Před 4 lety

    informative video

  • @pellekarlsson152
    @pellekarlsson152 Před 4 lety

    Great video! please can you do videos about customize checkout-page and shop-page in Elementor Pro?

  • @achintya1535
    @achintya1535 Před 4 lety

    How to show product variation and add to cart on shop page ????

  • @rtbfm
    @rtbfm Před 4 lety

    Nice video

  • @muslimmine4057
    @muslimmine4057 Před 4 lety

    Hi Nayyar and thanks for this, it's beautiful ! can i add a custom field just above the add to cart button ?
    Is this seo friendly ?

  • @aravindtiwari9702
    @aravindtiwari9702 Před 4 lety

    Love your tutorials brother.. keep up the good work.

  • @liviflo_official
    @liviflo_official Před 3 lety

    Really impressive, love it

  • @DavidPresent
    @DavidPresent Před 3 lety

    Great tutorial. One question. Can I put a "soundcloud" element instead of "image product". I'm selling music.... thanks

  • @ameen.webdivers
    @ameen.webdivers Před 4 lety

    The search bar in the header is the site search.
    How to replace it with product search?
    Need #help

  • @davis0166
    @davis0166 Před 4 lety +1

    Hey, good video, When I hide the button in related products is hidden also my button in the main product, does someone can help me?

  • @shammualam5851
    @shammualam5851 Před 4 lety

    Sir make one video for pos system and how to manage barcode and how to input bat code in product

  • @RaviSoni-zk7np
    @RaviSoni-zk7np Před 3 lety

    Can I make multiple product page with category for normal business as I am not in e-com business...

  • @Lyricz007
    @Lyricz007 Před 3 lety

    How to add optional fees like setup fees in woocommerce?

  • @mohamedbelfquir862
    @mohamedbelfquir862 Před 4 lety

    Is there an ability to modify the variation product ?

  • @organicyoutubepromotion

    bhai i am from pakistan and congrates for 100k subscribers keep doing good stuff..bhai please aik wo website bna dain jis mai hum kahi say themes or plugins layy kayy apni website payy upload kar kayy apna business start kar sakainn..please bhai please

  • @entertainmentusa1162
    @entertainmentusa1162 Před 4 lety

    Hello from lahore Nayyar bai kindly wpadverts plugin k sath bhi listing wensite video bna dain .. bai u r great teacher .