Woocommerce Product Page with Elementor Pro - How to build it yourself

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 299

  • @samuelnkanyane4289
    @samuelnkanyane4289 3 роки тому +9

    DUDE You are freaking awesome , we build livelihoods from this knowledge and we don't even acknowledge cause it's just another youtube video but from an African kid gathering knowledge and skill your time and effort is waaay much appreciated. THANK YOU

  • @Q-1424
    @Q-1424 10 місяців тому +1

    You have no idea how much positive value you are adding to this community and this world! Thanks a million ❤
    Have a blessed healthy long life❤

  • @fitopiesagamagiera
    @fitopiesagamagiera 4 роки тому +10

    I have been using woocommerce since September. It's not long, but you know, the store is up and running. I learned a few new things today. I look forward to the next episodes. I'll pimp my Woo with You :-D

  • @muhammadpro
    @muhammadpro 4 роки тому +26

    We all love you Rino! Please don't break this chain :D

  • @mujtaba135
    @mujtaba135 2 роки тому +4

    He teaches so perfectly that I can watch him all day like I have a crush on him.

  • @rapha-ux
    @rapha-ux 4 роки тому +11

    Rino, thanks for sharing your knowledge. You're an amazing professional and teacher.
    This WooCommerce series is insane! 🔥🔥🔥

  • @herman9128
    @herman9128 3 роки тому

    Rino! You are super pro and generous IT man ! Hang on there and you have millions to support you !

  • @barfusswinzerschreiber
    @barfusswinzerschreiber 3 роки тому

    I am in the process of building our own shop page and had some problems at the beginning.
    Then I came across your videos and they helped me a lot, even though they are in English...
    But you explain it so well that even I understand you and can follow you, although my English is very rusty, because I don't need it anymore since my school days.
    Thank you very much and keep up the good work - TOP
    (have translated this text automatically :-))

  • @happyfacesdk
    @happyfacesdk 2 роки тому +5

    Thank you so much for this amazing tutorial! I have built my own homepage with Astra theme and Elementor Pro, but have had a problem with making my new woocommerce shop look good. Well you have just solved all my problems (and saved me lots of money). Thanks for this great series 😀

  • @phoenixsh
    @phoenixsh 3 роки тому

    I usually don't leave reviews, but this video deserves it. This one solved my issue completely. Easy to understand, well-explained step by step. Congratulations.

  • @Elevationprint
    @Elevationprint 3 роки тому +9

    Hey! Thank you so much for the tutorials!!!! I know you made this for a simple product, but I am wondering how you go about getting setting this up for a variable product. I don't see any widget to drag in like "product options" or "variable options". Any help you might be able to share??

  • @hasnainalimirza1192
    @hasnainalimirza1192 Рік тому +1

    What if we have different templates for categories? Do we need to create a page for each product and then use a template for it different dynamic tag on it? Editing a template would not work. Will I copy paste each section? Please explain. You'll get a subscriber!

  • @apolloniafassett7823
    @apolloniafassett7823 3 роки тому +2

    You have just gained a new subscriber. Thank you so much! I was struggling with the product setup on my site. Amazing content! Keep it coming.

  • @manavsadiwalambinfoways8477
    @manavsadiwalambinfoways8477 2 роки тому +1

    Hey bro, If we drag the product images in a column and possibly we have more than two products in our product field then on dragging which image will come, our choice image or any other

  • @Melissa_Lawrence
    @Melissa_Lawrence Рік тому +1

    Did you ever end up showing how to remove the magnifying glass icon in the product gallery by chance? I use the hello theme and I can't seem to find it anywhere how to remove it in the settings.

  • @JoeGator23
    @JoeGator23 4 роки тому +5

    Can I use Hello theme of does it have to be Astra... or can I use Astra for the build and switch off Astra and open Hello Elementor.
    I'm asking because Hello Elementor runs/performs quicker for me as built from your video for archives and templates for posts. Thanks!

  • @muhammadsaadalam5826
    @muhammadsaadalam5826 2 роки тому +2

    you are a live saver buddy just love you

  • @richrunners
    @richrunners 3 роки тому +3

    I've built my website based on your previous tutorials, and expanded them exploring what can be done. So now I realise I can't use Astra, as I started with Elementor theme. I created a product page from scratch to emulate what Astra does (mostly) and found the magnifier (you used word search icon) is part of the Product Image widget. Seems it's an Elementor attribute, and I also couldn't find a way to hide it.

  • @ivfchic3316
    @ivfchic3316 3 роки тому +1

    Superb content, I was getting so worried about how to do this but now I can sleep better knowing that all I have to do is follow the rest of your amazing tutorials! Wholehearted Thanks for this brilliant series! 👍🏼

  • @josipvalcic6252
    @josipvalcic6252 4 роки тому +8

    Greate Video! If you can make more videos how to optimize website to load fast, that will be amazing 😁

    • @nander1988
      @nander1988 4 роки тому

      Use the nitropack plugin. Gets your Google pagespeed score to 90 desktop and 70 mobile in the press of a button. And it's fee

  • @monikamajer5049
    @monikamajer5049 Рік тому

    Thank you so much for sharing so much knowledge in this clear and easy to understand tutorial!

  • @bicanvr
    @bicanvr 3 роки тому

    Why dont you use elementor hello theme ? Is it not usefull or Is astra theme more usefull ?

  • @Rafcoins.
    @Rafcoins. Рік тому

    Super video. What if sombody don't want all products in Shop but want create something difrent for example silver, gold and silver product put in silver but gold product in gold section. Do you have any videos how to do this? Also have a question about Tables. How creat tabel in product information?? Thank you.

  • @JonathanAyers
    @JonathanAyers 2 роки тому +1

    First, love all your videos.
    Now, any idea why some things change on the product page when looking at it on the site vs in the builder? The Category, Product Title, Breadcrumbs, Add to Cart Button all either change size or add a ton of padding for no apparent reason. Any thoughts?

  • @yellowhanzel
    @yellowhanzel 8 місяців тому

    Hello Rino, i was wondering if you know how i can get 3 rows of text of the product title. I have a lot of products with longer names. Due to the longer names the add to cart buttons are not in line with each other. I use astra theme and woocommerce. Thanks in advance your video's are great tho.

  • @fayazali6675
    @fayazali6675 2 роки тому

    Hi! Rino, i was zero in elementor and wordpress but you make me pro, whenever i need any help i just explore your chanel you are the only option. for me you are the only option
    love form pakistan

  • @joshuathejeweler
    @joshuathejeweler 8 місяців тому

    How do you get the Price value to show both the sale price and the standard price crossed out? When I add this I only see the sale price.

  • @morjhie
    @morjhie 2 роки тому

    Thank you! Please I have an important question: how do i edit the Woocommerce orders page of my website to suit the colors and style I want?
    Also, how can I edit the Woocommerce default button that says “no order has been made yet?”

  • @xQuty
    @xQuty 4 роки тому +2

    Building a site with your videos! Love it

  • @vickgankov
    @vickgankov 3 роки тому

    Awesome tutorial. How do we remove the magnifying glass though?

  • @digitalboy4757
    @digitalboy4757 4 роки тому +1

    Your all tutorial are too much helpful

  • @beadamicowriting
    @beadamicowriting Рік тому

    Thank you for this awesome video! How do we decide which product gets featured? I created a landing page and I want to just add the product price widget, is there a way to specify which product price gets shown? Thank you

  • @ECOM121
    @ECOM121 2 роки тому

    Hello there! Can I add specific product the page template only show on the specific product??

  • @suzannepowell-simplebusine5988

    Hi Rino, I've been following your excellent woocommerce videos. I have 2 problems. Firstly my store is digital so have no need for an address etc on the customizable checkout page. Any suggestions?
    Secondly, I have mistakenly made my basket the checkout page, so when I click on the basket it takes me straight to checkout. How do I unlink them?

  • @ewast777
    @ewast777 3 роки тому

    Everything is cool except I can't find any possibility to add variable product into this design...could enybody help with that? There is any addons to do it in Elementor ?

  • @learnwithpeer1685
    @learnwithpeer1685 4 роки тому

    why you have not provided the image resources?

  • @chaimate1475
    @chaimate1475 3 роки тому +1

    Thanks for the video, very nice.
    How do we select the product, I saw you drag a product and the photos just showed. What if you have multiple products and how do you go about choosing a product

    • @JaRoCs18
      @JaRoCs18 2 роки тому

      have the same problem, cant choose / change product ;/

    • @mubarakadekunle7944
      @mubarakadekunle7944 9 місяців тому

      @@JaRoCs18 Please have found any solution on to solve this

    • @mubarakadekunle7944
      @mubarakadekunle7944 9 місяців тому

      Please have found any solution on to solve this

  • @BESTGolfBattery
    @BESTGolfBattery 10 місяців тому

    We need to get rid of the "next" and "previous" buttons that appeared underneath the product gallery thumbnails. Any idea how to do that?

  • @БелОртоКлуб
    @БелОртоКлуб Рік тому

    May you help me? I repite my question here:
    I have a trouble with editing product orientation (vertical and horisontal) into each category. Elementor allows to edit first page (product catalog), but doesn't allow to edit second page with products images. What should I do in my situation?

  • @BramNooijen
    @BramNooijen Рік тому

    Hi Rino, Ik wil bij een product variatie een i toevoegen met meer informatie over een variatie. Een soort van maattabel dus. Weet jij hoe ik dit kan toepassen met elementor?

  • @ChristianEiermann
    @ChristianEiermann 3 роки тому

    Hi Rino. You usually recommend the Astra theme, even for Woocommerce setup. What about Woocommce + Hello Elementor? Not a good starting point?

  • @laibatariq4212
    @laibatariq4212 Рік тому

    Your explanation is amazing. Very informative video! Thankyou:)

  • @vlvbeats517
    @vlvbeats517 2 роки тому

    Hey Rino, great tutorial, would you please tell us why Products Images doesn’t work on other themes and puts all product images in one row

  • @therichardchannel
    @therichardchannel 2 роки тому

    How do I get the image gallery to take up the whole width of the left column like yours? Mine only take up like 25 of it and can't find way to fill the remaining space, between the picture and the product info on the right side

  • @moshoshindele
    @moshoshindele 3 роки тому

    How about styling a ADD TO CART for variable products. I 'm literally stuck. Can't find any option that changes the variation box background to black. The page's background color is black.

  • @anosromanee-conti7960
    @anosromanee-conti7960 3 роки тому

    and also,i noticed that you said you want to remove the search icon on the prod. image but i couldn't find it in the video where you show how to remove it?

  • @inesferreira183
    @inesferreira183 7 місяців тому

    I have some containers in my home page that are not full width, I use astra and even selecting full width, it leaves a gap.. and then tells to upgrade. Is that true?

  • @robert45633
    @robert45633 4 роки тому +1

    How do you change the text "add to cart"? to something like "toevoegen"

  • @EnrichBeautySalon
    @EnrichBeautySalon 2 роки тому

    Nice video. How did you get that hover-zoom effect?

  • @cesarencina5606
    @cesarencina5606 3 роки тому

    Hi, maybe a basic question, everything looks great on the desktop but when I check on my mobile (iPhone) the product description does not show. I have been through everything I can think of but can't seem to get it to show.

    Any help greatly appreciated!

    Thanks

  • @gianlucaqu2424
    @gianlucaqu2424 3 роки тому

    Hi, how's possible to put thumbnail on the left of the principal image? Thanks

  • @fashionbysouad
    @fashionbysouad 3 роки тому

    Hi, I have a clear/sticky header. So on every page I use the same sized black section at the top. When I create a costum single product page and add the product to my cart, the 'added to cart' notice appears above this black section. This does not look nicely under my header as you may guess. Am i doing something wrong?

  • @keithdmello
    @keithdmello 2 роки тому

    excellent tutorial especially about the image size and shape

  • @QuT1zZ
    @QuT1zZ 4 роки тому

    Hey, there is variation widght for products with colors and sizes?

  • @adaydreamer3231
    @adaydreamer3231 Рік тому

    Can I change that background with product catagory.

  • @dalehewett4323
    @dalehewett4323 3 роки тому

    What about a variable product? How would you get those option boxes to configure the price

  • @robbiemendezNL
    @robbiemendezNL 3 роки тому

    Hey, thanks for your video's man. I learned a lot so far. However, I had a question about creating a product page. When I add the ''Product Images'' It's simply not loading the images. actually nothing at all. So for example when I drag in the ''price'' it doesn't show up. I followed the exact same steps you did within this video. Any idea? I've tried many times now & also used different browsers but the problem still remains.

  • @sergiomartinez2101
    @sergiomartinez2101 3 роки тому

    Hi, I don't have the product description widget , I had populated the description in the product wordpress editor and have Elementor pro + Astra

  • @Andy_Todd
    @Andy_Todd 2 роки тому

    You sir, are a legend. So well explained as always. Thank you

  • @starseoltd.4927
    @starseoltd.4927 Рік тому

    My problem is setting the left and right margin. Mine is full width and I do not want full width. How do I change?

  • @UpdatesMike
    @UpdatesMike Рік тому

    Great stuff! By the way, do you know how to make the product image thumbnail smaller or to make them become slider on mobile display? Thank you

  • @aryan3387
    @aryan3387 3 роки тому

    Your videos have helped me a lot these past few months and I landed my first 1000 dollar client today , I shall share the website link once it's live , love from India! Thank you so much!

    • @rinodeboer
      @rinodeboer  3 роки тому

      That is soooo cool to hear. Thanks man 🙏🏻

    • @kashba
      @kashba 3 роки тому

      ayy! can you share the link
      i'm from india and on the lookout for clients too . where do you get your clients if you dont mind me asking

  • @viktorchemezov927
    @viktorchemezov927 3 роки тому

    Whats the best choice - Elementor Pro + Premium theme (like astra) or Crocoblock + Elementor free version?

  • @dev6716
    @dev6716 3 роки тому

    it is possible to show out off stock in replacement of add to cart button in astra theme???? or any other solution

  • @bonang2152
    @bonang2152 4 роки тому

    I would think Hello Elementor is the best theme with Elementor Pro, is there a free option under Astra as Hello Elementor

  • @alihmd1628
    @alihmd1628 2 роки тому

    Rino, i want to ask you a question.
    Can we make an e-commerce website using crocoblock and woocommerce to make a full customized website?

  • @reutuser5869
    @reutuser5869 4 роки тому

    Hi love the new series can you please write down the name of that chrome add on that shows the color number

  • @alessandroaggio
    @alessandroaggio 2 роки тому

    Hello Rino, super video and super serie! When i add the product image (astra theme) it shows only the main image and not the "gallery images", why?

  • @amirizwan833
    @amirizwan833 3 роки тому

    may i know why my add cart button is oval? how to change that to rectangle? tq

  • @Djulenuhalte
    @Djulenuhalte 3 роки тому

    Hello, whicth theme you use in this video? Thanks, nice video mate

  • @caitlinvandevelde
    @caitlinvandevelde 8 місяців тому

    Hi Rino, ik zou heel graag de zoom optie willen uitzetten. Je benoemd het wel even maar weet jij of dat mogelijk is?

  • @MorganReyes-i1d
    @MorganReyes-i1d 2 місяці тому

    Hello
    How can i create multiple single product pages based on different categories?

  • @wildatease8325
    @wildatease8325 3 роки тому

    Hi!
    I wanted to know if I can customize different products in different ways... the thing is, I only have 6 products and they all have different elements, so I cannot use a template for all... how can I do this? Thanks for your help

  • @maelhachmi
    @maelhachmi 3 роки тому

    your video is straight forward to the point. I like it keep on the great job.

  • @HyuntaeKim-w7n
    @HyuntaeKim-w7n 2 роки тому

    just question, what is the size of the image ? can you tell me ? is it 300px x 300px ?

  • @gringow8154
    @gringow8154 3 роки тому

    QUESTION: attributes are not showing on the product page! how can i fix this? i set attributes and variations correctly and i build the product page but variantions not showing!! any help?

  • @bluepeamarketing
    @bluepeamarketing 3 роки тому

    My image doesn't show up and my add to cart section looks horrible. Do you have any suggestions on how to fix that?

  • @DrMeow-dr
    @DrMeow-dr 10 місяців тому

    I have woocommerce installed but its not showing on dashboard

  • @jamesstrickland8696
    @jamesstrickland8696 3 роки тому

    My product pictures have a transparent background but when I hover the image, the background turns white. How do I change that?

  • @Anime-nl9mr
    @Anime-nl9mr 3 роки тому

    Hi! How can I build a merchandising selling page inside my current busines webpage? Thank you!

  • @karyl372
    @karyl372 2 роки тому

    OMG you made this so easy!!! Thank you so much!!!

  • @munizmediaworks
    @munizmediaworks 2 роки тому

    What a fantastic video series. You have helped me and so many others! I am faced with an peculiar issue - it appears when I publish my Single Product Template "Recently Viewed Products" appear before my template. even if I delete all components and save the empty file - recently viewed products display and nothing else (but the header and footer. Is this a known bug and how can I clear that so I can publish my brand spanking new page? You've been such a help. I'm hoping you've come across this. Many thanks for your contributions!

  • @amineboualaoui6590
    @amineboualaoui6590 3 роки тому

    thanks for the great tutorials, I'm using buddyboss theme, any solution for making the image gallery with a slider in case of lots of images ???

  • @jordanhare935
    @jordanhare935 Рік тому

    Is there any way to customize your woocomm category or shop page using elementor free? I am having a hard time showing tags, attributes etc on the shop page, as our catalog does not always include price. Would love to see how to edit my current shop

  • @andreas-stricker
    @andreas-stricker 3 роки тому

    nice tutorial - but do you know why this template doesn't show up when i insert a woocommerce single page on a page with the "woocommerce pages" widget?

  • @NebMotion
    @NebMotion 4 роки тому

    nice one, subscribed. can I ask a question... can you replace product images with videos? and have them show in the shop not just the product page?

  • @AhmedBaberOfficial
    @AhmedBaberOfficial 4 роки тому

    Great !!!!!
    Please uploads daily about this series

  • @traceskimill9584
    @traceskimill9584 3 роки тому

    Wow! I love your videos. They are very enlightening.

  • @genobisceglia5629
    @genobisceglia5629 2 роки тому

    Excellent video! Very helpful! Thanks for your hard work.

  • @NATHAN-uc2gf
    @NATHAN-uc2gf Місяць тому

    Is it supposed to be the pro feature

  • @towardslove
    @towardslove 4 роки тому

    Brother
    Whenever I am using product product widget..I am getting blur or opaque image of the product alls time.please help.I have elementor Pro but wocommerce is simple one

  • @mohamedel-toukhi4093
    @mohamedel-toukhi4093 3 роки тому

    For the single product template, if I have 6 or 7 photos for a single product, can I make them show as a slider

  • @vassiliskontopanos9888
    @vassiliskontopanos9888 4 роки тому

    In case something goes wrong, how do I fall back to the previous default wooconerce single product template?

  • @kemet73
    @kemet73 4 роки тому

    Hei, what could I use for cookies and privacy ?

  • @Olaffhb
    @Olaffhb 3 роки тому

    Hi Rino, is het beter om met het 'hello' Theme van elementor je website op te bouwen ipv met bijv. Astra? Of hoe denk jij hierover? Hoor het graag!

  • @jamarchicr
    @jamarchicr 2 роки тому

    Hi Rino... thank you for this tutorial, one question.. which are the best size of pictures for products ?

    • @jeanvisuals8785
      @jeanvisuals8785 2 роки тому +1

      1200px on the long side is a good median

  • @redharleymn
    @redharleymn 4 роки тому

    This is a great video; however, all my product thumbnails are showing in Opaque and I can't figure out why.

  • @cordemarcus31
    @cordemarcus31 3 роки тому

    Can you make Product page with variation swatches??
    Because WooCommerce didn't work with Elementor, When i use variation swatches the product image photo didn't change.

  • @jayamay
    @jayamay 4 роки тому

    Excellent. Great video Rino. Will be updating my site with what I learnt from tomorrow 😉👍

  • @GamezGh1
    @GamezGh1 Рік тому

    Can you do a tutorial on how to add search Bar to the page?