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

Тәжірибелік нұсқаулар және стиль

In this video we're going to build the product page with Elementor using Woocommerce data. This is a simple product with not much attributes, in the future I will make it more complicated. But this video is part of the playlist where we are building a simple webshop.
The playlist with all the Woocommerce videos: livingwithpixels.com/playlist...
The page with all the links: livingwithpixels.com/links/
My basic video about Columns, sections, padding and margin: • Sections, Columns, Mar...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Пікірлер: 297

  • @rapha-ux
    @rapha-ux3 жыл бұрын

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

  • @Q-1424
    @Q-14245 ай бұрын

    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❤

  • @samuelnkanyane4289
    @samuelnkanyane42893 жыл бұрын

    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

  • @happyfacesdk
    @happyfacesdk2 жыл бұрын

    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 😀

  • @mujtaba135
    @mujtaba1352 жыл бұрын

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

  • @phoenixsh
    @phoenixsh2 жыл бұрын

    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.

  • @ivfchic3316
    @ivfchic33163 жыл бұрын

    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! 👍🏼

  • @apolloniafassett7823
    @apolloniafassett78233 жыл бұрын

    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.

  • @fitopiesagamagiera
    @fitopiesagamagiera3 жыл бұрын

    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
    @muhammadpro3 жыл бұрын

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

  • @barfusswinzerschreiber
    @barfusswinzerschreiber3 жыл бұрын

    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 :-))

  • @herman9128
    @herman91282 жыл бұрын

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

  • @fernandoaraoz6916
    @fernandoaraoz69163 жыл бұрын

    Excellent production Rino! It's a very clear and helpful video! Thank you for sharing.

  • @Andy_Todd
    @Andy_Todd Жыл бұрын

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

  • @xQuty
    @xQuty3 жыл бұрын

    Building a site with your videos! Love it

  • @temimhammadi6684
    @temimhammadi66843 жыл бұрын

    Great content as usual ! Thank you for the tips.

  • @monikamajer5049
    @monikamajer50499 ай бұрын

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

  • @jayamay
    @jayamay3 жыл бұрын

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

  • @fayazali6675
    @fayazali66752 жыл бұрын

    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

  • @zeldawilson5370
    @zeldawilson53703 жыл бұрын

    Thanks very much Rino, this helped me a lot.

  • @muhammadsaadalam5826
    @muhammadsaadalam58262 жыл бұрын

    you are a live saver buddy just love you

  • @traceskimill9584
    @traceskimill95843 жыл бұрын

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

  • @genobisceglia5629
    @genobisceglia56292 жыл бұрын

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

  • @philippelauzon8159
    @philippelauzon81593 жыл бұрын

    What a great teacher !

  • @laibatariq4212
    @laibatariq4212 Жыл бұрын

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

  • @maelhachmi
    @maelhachmi3 жыл бұрын

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

  • @karyl372
    @karyl3722 жыл бұрын

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

  • @triciamaebantog3867
    @triciamaebantog38673 жыл бұрын

    Hi Rino! Thanks so much for all your content! They're all so valuable! :) Just want to ask, you mentioned in one of your videos that you usually do a mockup design in Adobe XD first before creating the website in Elementor. With e-commerce sites, do you also do mockups first? Thanks so much in advance!

  • @Ahmedb1
    @Ahmedb13 жыл бұрын

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

  • @keithdmello
    @keithdmello2 жыл бұрын

    excellent tutorial especially about the image size and shape

  • 3 ай бұрын

    He is so likeble 😅 Thanks for your videos, very useful.

  • @Thebusysuperhuman
    @Thebusysuperhuman3 жыл бұрын

    Thank you ! Excellent video

  • @24Gillios
    @24Gillios3 жыл бұрын

    Damnit Rino, I needed the products archive video first! Good job though, thanks! 😁

  • @AngelSanchez-rb5wk

    @AngelSanchez-rb5wk

    3 жыл бұрын

    That's what was wondering about, too lol. Either way this is a great video. Question: So you enter all your products and images to make your archive first? Then you make your product pages with elementor?

  • @sharonlevy71
    @sharonlevy71Ай бұрын

    You explain beautifully

  • @ArefinShafi
    @ArefinShafi3 жыл бұрын

    Love to watch your Videos.

  • @a1m1a1a
    @a1m1a1a3 жыл бұрын

    Really useful! Thank you!

  • @Elevationprint
    @Elevationprint3 жыл бұрын

    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??

  • @YohGS
    @YohGS3 жыл бұрын

    Great videos Rino!!!!

  • @josipvalcic6252
    @josipvalcic62523 жыл бұрын

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

  • @nander1988

    @nander1988

    3 жыл бұрын

    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

  • @Enriquemdmr
    @Enriquemdmr3 жыл бұрын

    Thanks! - Keep going. Looking forward to Cart and My account customization to put Icons.

  • @digitalboy4757
    @digitalboy47573 жыл бұрын

    Your all tutorial are too much helpful

  • @rinodeboer

    @rinodeboer

    3 жыл бұрын

    Glad you like them!

  • @elnick2349
    @elnick23493 жыл бұрын

    Love From India Brother

  • @LT-lu8je
    @LT-lu8je3 жыл бұрын

    Thank you.very helpful

  • @BushraAzeem
    @BushraAzeem3 жыл бұрын

    Great Explanation sir keep it up

  • @sc_3433
    @sc_34333 жыл бұрын

    very helpful, thanks

  • @Melissa_Lawrence
    @Melissa_Lawrence Жыл бұрын

    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.

  • @Charles.parker
    @Charles.parker Жыл бұрын

    Amazing tutorial

  • @soufside2010
    @soufside2010 Жыл бұрын

    Hey Rino, hope you're doing well. Big fan here! I've been following along in this tutorial and noticed that astra has made some of those options premium like Global Color Palettes for example which you used in this tutorial. I was wondering if you have any advice on a differnt way I could get around that option or would I have to redo the whole thing and buy a premium template?

  • @katehogan2352
    @katehogan23522 жыл бұрын

    Fab video Rino! So informative. Just wondered if there is anyway to use an image set up like this without having woocommerce installed. As we aren’t an e-commerce site as such but I would love my product pages set like this. So 1 large image and smaller underneath

  • @nastja3294
    @nastja32943 жыл бұрын

    Thank you!!! ☺️

  • @leadingculture
    @leadingculture Жыл бұрын

    Thanks very useful

  • @CarlOttersen
    @CarlOttersen2 жыл бұрын

    Hi Rino! I always appreciate your video and tutorials - clear, positive and most helpful every time. I am in the process of setting up an eCommerce store, based on WooCommerce. In my case I would like to ship to customer from several suppliers directly, some of whom are located in other other countries. I have the single vendor configuration set up, as I am the vendor (I buy and resell), not an agent/intermediary. It is, in essence, a drop-shipping model. I don't see how to do that in single vendor, and I can't seem to find a plug-in that lets me create 'sourcing' shipment 'from supplier' addresses. Is multi-vendor the workaround solution, where I create (and manage) 'vendors', who are actually my suppliers? Payment of course would be managed differently as there is no commission, the products having been previously ordered. A quick pointer from you would be tremendously useful, and greatly appreciated. Many thanks, Carl.

  • @iamalifawad
    @iamalifawad3 жыл бұрын

    Hi Rino! I want to tell you the right color picker extension for google chrome. It is the COLOR ZILLA extension. I am not pointing to you as you are my teacher but giving a suggestion. Thanks from the core of my heart for this series.

  • @arnejange
    @arnejange2 жыл бұрын

    Bedankt topper

  • @robbiemendezNL
    @robbiemendezNL3 жыл бұрын

    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.

  • @russelmason8841
    @russelmason88412 жыл бұрын

    Hi, I love your content; it inspires me to do a lot of work, even building my own webpage. I have a question. I have a webpage that I use for consultancy; however, I want to also sell books. When my customers/clients click on "shop" in the header, I would like to take them to another page with my store. I have tried to create and embed a woo-commerce page without success. Can you assist me with a video like that or any advice? Thank you. Keep up the good work

  • @aryan3387
    @aryan33873 жыл бұрын

    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

  • @NebMotion
    @NebMotion3 жыл бұрын

    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?

  • @JonathanAyers
    @JonathanAyers2 жыл бұрын

    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?

  • @sherylzhao1165
    @sherylzhao11653 жыл бұрын

    Hey! Thank you for your video . I have a question : Elementor + Astra + Woocommerce , or Elementor Pro + Woocommerce,are there two combinations same in function to setup a ecommerce store ? Comparing these two combinations , how about loading speed of each?

  • @JoeGator23
    @JoeGator233 жыл бұрын

    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!

  • @WeaselTM
    @WeaselTM3 жыл бұрын

    There is a mistake. You should be using *short description* on the side of the image. The *product content* goes lower down on the page where it is often placed in a tab with other more detailed data and e.g. the Reviews. This is a standard in e-commerce and it will eventually come to bite you in the butt when you want to change theme or import/export, etc. Other than that very nice tutorial, will be looking into your elementor videos!

  • @amansuri6282
    @amansuri62823 жыл бұрын

    whahah geniaal maatje

  • @mariano-cucinotta
    @mariano-cucinotta3 жыл бұрын

    Hello Rino, great video. Do you know by chance if there are sample data to populate the archive of products and categories .xlm to use to test woocommerce? Thanks

  • @kristinapan543
    @kristinapan5433 жыл бұрын

    hi rino, thank you for doing the videos, they are very helpful. im having so much trouble with elementor and woocommerce. mostly, i dont know how to make the homepage i created using elementor as my website's homepage instead of the shop homepage. for example, when i type my website name in the url, the page that pops up is the shop's homepage and i dont want that.

  • @richrunners
    @richrunners3 жыл бұрын

    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.

  • @-tomaszo
    @-tomaszo3 жыл бұрын

    Great !✌🏻👍🏻

  • @blakeolsen3060
    @blakeolsen30603 жыл бұрын

    Great video, love your work. Is there a place I missed how to connect your Archive Page and the Related products section?

  • @munizmediaworks
    @munizmediaworks Жыл бұрын

    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!

  • @MiroVaz
    @MiroVaz3 жыл бұрын

    Great and simple to understand as always. One question: how can I display “single product” attributes ?

  • @miguelmorales961

    @miguelmorales961

    3 жыл бұрын

    No answers here...

  • @LiftUp7547
    @LiftUp75473 жыл бұрын

    Great guy

  • @vickgankov
    @vickgankov3 жыл бұрын

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

  • @vlvbeats517
    @vlvbeats5172 жыл бұрын

    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

  • @beadamicowriting
    @beadamicowriting11 ай бұрын

    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

  • @ruwanwlr9388
    @ruwanwlr93883 жыл бұрын

    Thanks Rino

  • @ricknoisable
    @ricknoisable2 жыл бұрын

    you are awesome

  • @ismailmarketing
    @ismailmarketing3 жыл бұрын

    Great content, can you make a full tutorial on how to make ecommerce website.

  • @JDanielVzla
    @JDanielVzla3 жыл бұрын

    Hello man, Cool tips thanks for the content. Is there a way we can change the name of the button?

  • @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

  • @amineboualaoui6590
    @amineboualaoui65903 жыл бұрын

    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 ???

  • @_rheaaa
    @_rheaaa Жыл бұрын

    You saved me from misery!

  • @JavelinGuitars
    @JavelinGuitars3 жыл бұрын

    Awesome tutorial, really quick and easy. Loving it! btw: will this template work with variable products? or is there no way to customize variable products?

  • @rinodeboer

    @rinodeboer

    3 жыл бұрын

    Thank you! This also will work with variable products! It’s just a dropdown that you can customize a little bit.

  • @JavelinGuitars

    @JavelinGuitars

    3 жыл бұрын

    Can't tell you how much I appreciate the answer, especially in such short notice! Keep up the great work 💖

  • @Elevationprint

    @Elevationprint

    3 жыл бұрын

    @@rinodeboer can you elaborate on this at all?? Video, site, or any thing with more info?

  • @ewast777

    @ewast777

    3 жыл бұрын

    @@rinodeboer Could you explain how to add this? I've tried to do this but variable product doesn't appear at all. But in this ugly default woocommerce page it appears. So how I can add this? There is no options like variables table in Product section (from which you built the whole product page design.

  • @richardchristian7434

    @richardchristian7434

    2 жыл бұрын

    Has anyone figured this out. I can not find a way to do this tutorial with variable products

  • @reutuser5869
    @reutuser58693 жыл бұрын

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

  • @ChristianEiermann
    @ChristianEiermann2 жыл бұрын

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

  • @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.

  • @alkististamataki5142
    @alkististamataki51423 жыл бұрын

    Hi!! Thank you for ur videos!! I am facing some trouble with my product images. I am using elementor pro and oceanwp as theme. I want to change how my products images appear. Is it possible or I am stuck with ugly kind of carousel thing? :(

  • @redharleymn
    @redharleymn3 жыл бұрын

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

  • @moundjikhaldi9669
    @moundjikhaldi96693 жыл бұрын

    THANKS...

  • @user-fr7zj1xy9k
    @user-fr7zj1xy9k Жыл бұрын

    Hi Rino, Thanks so much for the awesome content you publish! I've learned a ton about working with Elementor Pro by watching your content. So I have a question on this custom product page. I'm building a test store for clothing and the products have size and color. I can't figure out how to add those to the product page and force the user to select one before they can click the "Add To Cart" button.

  • @user-fr7zj1xy9k

    @user-fr7zj1xy9k

    Жыл бұрын

    Rino, never mind I figured out my issue. I needed to create variable products...duh!!

  • @tirve
    @tirve3 жыл бұрын

    How can I just have a direct ‘order’ button instead of an ‘add to cart’? Good video as always!!!!

  • @hasnainalimirza1192
    @hasnainalimirza1192 Жыл бұрын

    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!

  • @julienwan1248
    @julienwan12483 жыл бұрын

    Hi, thanks you for this great video I wanted to ask you if you have a upload schedule for this series ? Would love to know when the next episode comes out.

  • @rinodeboer

    @rinodeboer

    3 жыл бұрын

    Thank you! Nope, but this week most videos will be uploaded for this simple webshop. After that I don’t have a schedule yet.

  • @itouchgrass869
    @itouchgrass8692 жыл бұрын

    thanks

  • @UsamaMasood93
    @UsamaMasood932 жыл бұрын

    life saver

  • @alessandroaggio
    @alessandroaggio2 жыл бұрын

    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?

  • @andreas-stricker
    @andreas-stricker3 жыл бұрын

    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?

  • @bonang2152
    @bonang21523 жыл бұрын

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

  • @garethheaton1211
    @garethheaton12113 жыл бұрын

    Hey Man, Thanks for the great videos! This is really helping, I'm just starting out with Woo (migration from Squarespace) and am pretty much following your advice to the letter, although I've run into a [hopefully] minor issue and I wondered ion you could help? I have followed your instructions exactly but when I save and go to preview I seem to loose the images (when published too), the image block remains and I know the images are still there because they still open to full screen when you click on the empty space but they are invisible when the screen is viewed normally! I downloaded WP, Woo, Astra, Elementor Pro and all of the security add ons only yesterday, so I assume they are the most up to date versions. Thanks in advance! Gaz

  • @garethheaton1211

    @garethheaton1211

    3 жыл бұрын

    Hold up! I think might be sorted! Thanks!

  • @viktorchemezov927
    @viktorchemezov9273 жыл бұрын

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

  • @vassiliskontopanos9888
    @vassiliskontopanos98883 жыл бұрын

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

Келесі