How to create a Product grid / Archive page with Categories - Elementor Woocommerce

Поділитися
Вставка
  • Опубліковано 15 січ 2025

КОМЕНТАРІ • 249

  • @rod0008
    @rod0008 7 місяців тому +9

    Rino is the man with the master plan! Even 3 yrs later this is yet the most relevant woocommerce tutorial I've seen - thank you sir

  • @paulb6550
    @paulb6550 11 місяців тому +1

    Two years plus since you did this and still it is the best solution to adding the category name to a shop page that involves no addition plugins. I am delighted with this result. I particularly like the use of a divider as the element to use. Excellent.

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

    OMG YOU ARE TRULY THE BEST!!! l learned how to create a single page, archive products and finally sidebar/categories!!!! I can't thank you enough!!! I was scratching my head and cussing for the past few days.... THANK YOU!!!!!!!

  • @spacecheese6404
    @spacecheese6404 4 роки тому +18

    damn you are on fire, you educated yourself to please your viewers needs, thanks a lot I love these new E-Commerce series!

  • @ludwigvonreiche479
    @ludwigvonreiche479 4 роки тому +4

    I've built quiet a few ecom sites with elementor - but watching your tutorials, I'm still learning some new moves. Thanks mate!

  • @cartimandua4709
    @cartimandua4709 4 роки тому +12

    I like when you say Woocommershh 🤩

  • @sotamods-TMH
    @sotamods-TMH 3 роки тому +1

    This and the 2 previous vids were VERY helpful to me, so THANKS A LOT for that!!! What I was actually looking for was how to optimize the search results after adding a plugin so that I could add a 'magnifying glass' icon to my header besides 'user' & 'cart' icon... then I found this vid and now I'm stuck to your series ^^
    So I think I'll just browse your vids a little more to expand my knowledge :)

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

    You are by far my fave Elementor guru. Thank you so much please never stop what you are doing!

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

    I can't find the "Shop Product Structure" that you have at 7:30

  • @DavidGilbert-mv5qv
    @DavidGilbert-mv5qv 3 місяці тому

    Wow thanks for this. Most productive 20 minutes of my day.

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

    I've been struggling with this since yesterday, and once I saw your videos I knew that my struggle will end. Thank you dude!!

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

    RHINO!! You are soooo smart and talented! I love your content and delivery!!!

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

    So glad I found your videos! This tutorial helps me a lot not to be overwhelmed with all the functions WooCommerce has to offer. Very conclusive and comprehensible - thank you!

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

    Been longing for the updated version of the Woo tutorial series :D
    Even though it's changed a lot, your videos are being so helpful.
    Thank you!

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

    Wooow !! Thanks a lot ! I was looking for this tips for a while ! I'm french but you're accent still perfectly understendable for me. 🙏

  • @IlleDavid
    @IlleDavid Місяць тому +1

    Hi Rino, I cannot find in Product Catalog the Shop Product Structure. Do I have to install any plugin or something? I want to hide my add to cart button and I don't know how. Can you please help me?

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

    3:50 Bro, u just saved me by showing this trick....i wanted full width with banner and also the sidebar and u just made it easy. Thank U !

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

    Thank you! After wasting a day trying to figure this out I found your video and you have made everything clear. I've also changed from the Hello! theme to the free Astra theme and have found the extra controls in the Customiser very useful.

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

    Thank you so much for this great tutorial! After days of trying to figure this out...i stumbled across your very informative video! Very helpful!

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

    I love your videos. They are so great! Tx a lot!!!!!! You make my day, you are my hero!!!!

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

    You are the man. thankyou again. But how do you show "all products" in the product categories menue?

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

    Great, thanks both to you & "you from the future". Good job guys!

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

    Thank you for the helpful information!! Have rewatched your videos on repeat!! Subscribed :D

  • @Scotth212
    @Scotth212 3 роки тому +5

    I love your videos. You are very clear in your description and explanations. much appreciated. I'm missing one key point...How do I add the new product archive template to my menu? I still see the old store page when I click on "store"

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

    Echt super dankjewel voor alle tutorials! Had er anders echt niet uitgekomen, maar moest en zou zelf m'n eigen webshop maken met mijn achtergrond als mediavormgever 🙈

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

    One more great tutorial! Thank you so much Rino !!! I'm currently designing my food blog and you have helped me very much!

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

    8:56 A gray background and the exact moment his happiness kicks in

  • @TozinkCreativeIdeas
    @TozinkCreativeIdeas 7 місяців тому +1

    How do you display the sorting bar selection?

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

    Hi, I'm watching all your videos lately, as I'm trying to create my online store

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

    Fresh Morning | Fresh Air | Breakfast | RINO 🌹❤️

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

    Awesome video! I never thought of using menus for a simple side filter. It is much faster when building a super simple product or post archive page. Btw, I think Elementor added a feature that helps with previewing responsive visibility directly in the editor. You just need to retract/hide the editing panel and elements that have responsive visibility will actually hide/show as in preview. I find it helps when building more complex layouts.

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

    This is exactly what I needed. Thank you!

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

    You're the greatest man, appreciate all of these tutorials!!!

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

    Thanks man, who would've thought I only needed to change the theme 😂

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

    Brilliant. Really useful as Astra and Woocommerce plus Elementor can be awkward.

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

    Wow. I learn good stuff while studying and practicing this video. Thanks.🎉❤

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

    Thank you. Superb tutorial. Highly recommend for beginers

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

    Hey rino we need more videos on woo... From you Coz learning from here is fun. So when should I expect a UA-cam notification on my mobile???????

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

    Great tuto! Great series! Thank You!

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

    Prefect, I have been looking for an alternative categories column, thank you for the video 🙂

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

    Great Video. I created the side bar menu and archive but when I click on the side bar menu, it always opens the full category in a new page and the side bar menu disappears. How did you manage to keep the side bar menu visible and just update the right side column?

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

      same problem here...

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

      @@Joneszy78 same problem :(

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

      ​@@th3notori0usX found the solution by any chance?

  • @conordia6906
    @conordia6906 20 днів тому

    Hey, thanks for the video, does this only work with the Astra theme?

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

    Nice! When I'm creating a product archive and press on a product category, I get redirected to the "default" woocommerce product-category page. What am I doing wrong?

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

    Very helpful, thanks! And I didn't know about the inline trick to line things up on mobile!

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

    Hello, first of all thank you for your great video. It helps me a lot in creating my store. I still have one questions. Under the image still the notes plus shipping and VAT are displayed. Where can I hide this?
    Thank you and best regards, Willi.

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

    To see the changes on elementor editing page, update the page and reload it.
    Btw great video. Cheers.

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

    which theme u activated like brandstore ?

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

    Thank you for the useful contents and tutorials. may I ask what is the best filtering plugin you suggest?

  • @Pabloh-e6o
    @Pabloh-e6o 11 місяців тому

    Many thanks, excellent work. I wanted to ask you today how Loop Builder allows you to place products and create a carousel of these elements with Loop Grid of products, however it is not possible to place the Image Flipping effect (by hovering the image changes to what you have as a gallery of this product in automatic form, it is important that it is from the product gallery and not from the media library), if you could help me with how to do it in some way I would be very grateful. Your help is very valuable, very grateful

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

    The Universe bless you man !

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

    Hi Rino, thanks for your videos, but I tried to change the "Product Title" but I can´t (part 5:20 of your video) because I have different options and I don´t have the field that you change in the video, please, help !!. Thanks again.

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

    Love your videos, are you going to do a video about a product page with a variable product?? The Add to cart widget changes a bit with it and its driving me crazy!!

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

    Hi friend, thank you for this great video. I have a issue , when I click on the category the products are being open in a new page and not in the same page as i want. what should I do pls ?

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

      That’s unfortunately how it works right now. Hopefully Elementor will add true filters in the future where the page doesn’t have to reload.

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

      @@rinodeboer still no solution for this?

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

    great, thank you for all the useful videos.

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

    awesome video. In the account page when I click on the order and browse the product it will redirect me to the default shop page what I do need help??

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

    Thank you, Rino! You saved my day ... again!! :)

  • @LariLehtimäki-w9q
    @LariLehtimäki-w9q Рік тому

    Hello, thank you for your videos; they are very informative. Can you help me with this: When I click on a product category, the product moves to the theme appearance? How can I keep it in the same appearance when all products are displayed?

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

    Hey! thanks for the content! It's really hellpfull. Would you please tell me the name of the pick color extension?

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

    Hi man! Great video, just had a problem at the end of my website when I see it on my phone, how can I change the row product to only show 2 and not 3 on the same row

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

    Hey ! Great content! im having an issue related with products columns in mobile? its seems theres no css code cant help me on to make 2 columns.

  • @אלדדגדג
    @אלדדגדג 2 роки тому +1

    hey i try to hide the button "add to cart" from the archive page product with customize wordpress
    but dont find the option why?

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

    Great content! Thanks for your help.

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

    Thank you so much for this!!

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

    in 07:52 column width in astra and elementor, 1140... but how about mobile width? sometimes I get white margine and i only fix it with Css but I want to fix it with coding.

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

    More than wonderful tutorial ;) Thanks

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

    Hello, very good video, I have the following question.
    What product filter can I use with Elementor and ACT (advance custom type)

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

    Hi thank you for that video. But I have the problem the I always see the standard archive layout. Make everything like in your video. I have no idea what I make wrong.

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

    Hi there, just found your youtube channel and this is great! thank you so much. I have an additional question.. I have product categories within product categories. The product archive also decides how multiple product categories are shown, but I am not given any options to change the design of these. Do you have a useful tip for managing the design of these?
    For example a brand (parent product category) "Lego" and multiple product categories underneath that (children product categories) "City" , "Friends" , "Disney" but the display of those children-product-categories seems fixed even with Elementor Pro 😅

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

    Very helpful, thanks brother!

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

    Muchas gracias, me estaba rompiendo la cabeza y no daba con la opción de conectar los productos con las categorías

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

    I love you my man, awesome video

  • @Mahnoor_Shahzadi
    @Mahnoor_Shahzadi 3 місяці тому

    i want to make cards by my own to be used in this archieve page, how can i do it, please let me know, i'm new learner

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

    Thanks for the video, I've just been wrestling with the mobile column view for archive page. Seems that the theme setting for it conflicts with in Elementor on page settings. causing the columns to double.

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

    this was great. But i am little confused, how do you turn off the add to cart buttons in mobile?

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

    Can you create these same filters with sub categories? I can't figure out how to expand the menu. It wants to keep the subcategories minimized by default.

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

    great video! I have a question tho, I did the same with astra but the problem is that the name and the price of the products are far away and i can't seem to find a solution, please help!! :(

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

    hey good video! i only got a little problem. the archive shows every product I have and not by categorie, how do i fix this?

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

    Hi, Ravinder this side I have been watching your videos that are quite informative and helpful thanks and a good job. May I request you to guide us on how can we use slide images of the product display on the Home Page on Hover the product? Actually, I mean suppose we have the product displayed on the Home page ( and that product has 5 images) if we hover it the images should change.

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

    Great work Rino. Hey, just a question around how you add all products as an option to the side menu and how you can get back to the shop without going back to the shop menu. Love your course on padding and margins too!

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

      Yes you didn't show us the "all products" option, I tried to do it but it's not linked to the shop page, for example when I click on "all products" option it deselect the shop button in the top menu,
      How can we do it so that if we click on the shop button in the top menu it'll show the page with "all products" option selected and highlighted?
      Thank you for all your work on this channel.

    • @231krw
      @231krw 4 роки тому

      2 solutions that I have are 1) Create a custom link back to your shop page and call it "All Categories". Down side is that it will reload the Shop page when you click on it. 2) change the name of "Uncategorized" or ad a new category call "All Categories" and make sure that all products are in that category. (Haven't tested this one yet, I feel like there might be an issue with this.)

  • @irfankhalil-ix8qr
    @irfankhalil-ix8qr 8 місяців тому

    thanks for this tutorial,

  • @martadanielczyk4602
    @martadanielczyk4602 Місяць тому

    Hi,
    When i clik on Category, all products are still on the list:( Do you know maybe why its not working?:(

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

    Hi I found your video helpful HOWEVER.....After Following your tutorial, I’ve created a Product Archive page. On that page I’ve created a side bar with the Categories menu. I want to make it so whatever category I click on should show ONLY those products in element. Right now the product archive page says “Products” at the top and all products show below that, BUT When i click on one of the categories on the left it opens up a different pages for the category and it shows all the products for that category. it doesn't sort the Products on the same page like your tutorial shows.. What am I missing???

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

      have you found the solution?

  • @leomakingads
    @leomakingads 3 місяці тому

    will hello elementor theme still work?

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

    Rino plz upload full crash course on woocommerce ...by the way thanks for this video

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

    Hello Rino! Thank you for the video! Im just wondering if there is a way to load the products (when you click on the desired category) without completely refreshing the page? Is this even possible with woocommerce and elementor?

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

    hello i like your tutorial but when i click on different category my sidebar nav menu disappear and only products are visible how can i fix it ?

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

    Question: After following this video, when I click on a category, it takes me to the category page that looks different from what you designed in this video. Why do you think that is?

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

    Good tutorial. In the future, please don't skip ahead with steps that you haven't yet demonstrated like at 5:21 I spent 10 mins trying to figure out how you filled the left-hand side column because you didn't show us how to do it until 11:48

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

    Good TUT. However, I was wondering if it is possible to create a Product grid / Archive page with Categories using free elementor?

  • @MariaBrooks-j4n
    @MariaBrooks-j4n Рік тому

    Hi Rino, thanks so much for putting out this WooCommerce series, I'm stoked to be able to build a e-comm website using Elementor Pro. I have a brand new install of WP, Elementor Pro, Astra theme. I've added 4 products to my store. As I followed along in this video, when I got to the part where you add the Archive products widget, it doesn't work for me. That widget doesn't appear on the left. I did a search and found it. But when I add it to the page, it gives me an error message that "We can't seem to find what you are looking for". Why don't I have archive products??

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

    How to make different categories archive shop pages for different shop collection categories... Please thanks

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

    I need more help! After i finished editing the archive page, when i look at the page there is the gap on the top right of the shop page on my header. It is like my header is not long enough to go across my whole top of my page. How can i fix it?

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

    Hey when I am in the customize page and then go, Woocommerce > Product Catalog it shows up with the single product page instead. How do i change this to the product catalog page?

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

    Hey rino, i am a big fan of you. I have a question, please answer.
    How you add 'all products' option in category menu?

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

      I just found a ans/solution of my ques/problem. I add a custom link of my shop page to the category menu and named it 'All products'. Boom! It’s work.

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

    hey bro you have any tutorial on creating a custom dashboard for clients with form & update entries. customers can only view their dashboard while the super admin can view all

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

    How can I paging with jet woobulider
    It hasn't paging option itself

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

    Is it possible to add additional data to a product in a product grid, like advantages and disanvatages(Pro and Contra)?

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

    Hi, thanks for the great tutorial. I have a question tho, when i add the whole layout, when i click on any category on the left, the whole page refresh and direct to a brand new page of that category (no sidebar ) what should i do?

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

    Hi I created a product archive and all the product breadcrumbs and titles are showing in vertical position how can I make horizontal

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

    thanks a lot for the awesome tutorials! I have been watching tons of tutorials, but this is the first one where it really "clicked" for me. I have had so many issues with WooCommerce because I did not realize just how little is editable on the products archive page. Will you ever do a paid version of this as well? I would love to optimize my Store page as much as I am able to customize my product pages. keep up the great work!