How to create a Product grid / Archive page with Categories

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

Рет қаралды 244,291

3 жыл бұрын

In this video I'm gonna show you how to create a product grid / archive page with Elementor Pro, the Astra theme and Woocommerce. This Woocommerce Archive page also has a category list on the left that will automatically filter your Woocommerce products by category.
The playlist with all the Woocommerce videos: livingwithpixels.com/playlist...
The page with all the links: livingwithpixels.com/links/
→ 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.

Пікірлер: 240

@rod0008 Ай бұрын

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 4 ай бұрын

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.

@staceycandace2067 2 жыл бұрын

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

@karyl372 2 жыл бұрын

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

@juliamoss4675 3 жыл бұрын

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.

@mariannereuter 2 жыл бұрын

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!

@spacecheese6404 3 жыл бұрын

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

@jamals8265 2 жыл бұрын

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

@phkoon 8 ай бұрын

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!

@ludwigvonreiche479 3 жыл бұрын

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

@johnsims1833 3 жыл бұрын

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

@phillsand_co 3 жыл бұрын

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

@CouleurCameleon 3 жыл бұрын

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

@lepetitgigoteur9730 3 жыл бұрын

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. 🙏

@sotamods-TMH 3 жыл бұрын

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

@TiannaYvonne 2 жыл бұрын

This is exactly what I needed. Thank you!

@dianahermesdorf9909 2 жыл бұрын

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

@launchpadtx9963 2 жыл бұрын

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

@jgvisualsplash 3 жыл бұрын

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.

@katiewilliams1174 Жыл бұрын

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

@cartimandua4709 3 жыл бұрын

I like when you say Woocommershh 🤩

@OscarObians 3 жыл бұрын

And plginssh 😁🤩

@biaccoo 3 жыл бұрын

Thank you so much for this!!

@modhausstudio 10 ай бұрын

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!

@MADB0X 11 ай бұрын

Great tuto! Great series! Thank You!

@mironvankastel6354 3 жыл бұрын

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 🙈

@mslcreative 8 ай бұрын

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

@aahkendall 3 жыл бұрын

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

@wpkilson58 2 жыл бұрын

I love you my man, awesome video

@mfwdesign903 3 жыл бұрын

Very helpful, thanks brother!

@chamikaeshan8101 2 жыл бұрын

Thank you. Superb tutorial. Highly recommend for beginers

@PaulCarey91 3 жыл бұрын

Great content! Thanks for your help.

@OmarWaleed 3 жыл бұрын

More than wonderful tutorial ;) Thanks

@somayehgholamnejad7684 Жыл бұрын

great, thank you for all the useful videos.

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

@nickday2657 2 жыл бұрын

Really helpful, thanks!

@AiGyT Ай бұрын

Thank you dude ❤

@nissankahettiarachchi95 Жыл бұрын

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

@user-cg7wt3bx5y Жыл бұрын

Fantastic, thank you

@christinekaragianni7265 3 жыл бұрын

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

@LearnandEarn375 3 жыл бұрын

Hi, are you need a wordpress developer

@christinekaragianni7265 3 жыл бұрын

@@LearnandEarn375 No thank you I'm creating it myself :)

@LearnandEarn375 3 жыл бұрын

@@christinekaragianni7265 it's OK

@mohamedel-toukhi4093 3 жыл бұрын

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

@irfankhalil-ix8qr 2 ай бұрын

thanks for this tutorial,

@Scotth212 3 жыл бұрын

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"

@VictoriaB513 Жыл бұрын

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

@TheSembodogelar 3 жыл бұрын

The Universe bless you man !

@mnabeel7276 Жыл бұрын

love you bro!

@creagiovane3318 5 ай бұрын

THANK YOU!!!!!

@rbevans4581 3 жыл бұрын

Thanks Reno!

@DKingFisher 2 жыл бұрын

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

@XaceroX 3 жыл бұрын

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

@gotta-date-with-hate Жыл бұрын

elementor $69 plugins $0 you , Talent used to build website = Priceless Side note : I love your accent..it's a refreshing change from the American accents I listen to all day...

@emmyvanmeir 3 жыл бұрын

You're my hero! ;-)

@trandong37 3 жыл бұрын

thanks a lot Rino

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

@davidadams421 3 жыл бұрын

Very good.

@sharifuzzamanshaon2644 3 жыл бұрын

Tremendous idea...🤓

@Valeras 3 жыл бұрын

Thank you, super !!😍👍👍👍👍 +1

@ModernCreator 3 жыл бұрын

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

@Mr_Kenneth 3 жыл бұрын

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

@ravindersharma1604 3 жыл бұрын

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.

@negarnobakhti1900 3 жыл бұрын

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

@christianbernalgarzon8055 3 жыл бұрын

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

@user-yk8js8iz1e 7 ай бұрын

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?

@RichIslam 3 жыл бұрын

Good job bro

3 жыл бұрын

Nice! Even if we have done a couple of these, it is always nice to see little tweaks and more. Saw you will od cart next but i think filter would be a good one ;)

@Xtazy51 2 жыл бұрын

Hi Rino! thanks so much for the content you put out, you really changed my life direction! wanted to offer actual website implementation besides the design so I need to thank you for that! I have one question ,is there a way to modify the My account page / Register / Login without using another plugin? thanks!

@lom840 3 жыл бұрын

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

@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

@crestcare6504 3 жыл бұрын

Amazing

@mapabianchi Жыл бұрын

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

@labeeqabdullah1594 3 жыл бұрын

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

@ashbinkoirala5998 3 жыл бұрын

Biggest fan💐

@willir14 8 ай бұрын

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.

@henriettefrausing4952 Жыл бұрын

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 😅

@sonia1145 10 ай бұрын

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?

@Fesemusica 2 жыл бұрын

whats up bro, hey, im having a problem with my long titles, they are making my archive pretty ungly, with the buttonsnoot been in the similar place, any ideas on how can I make my buttons to stay in the same place even if the title is larger?

@philColour 2 жыл бұрын

Hey Rino, these video's have been super helpful but I have encountered an issue is the size of the search, sort and pagination elements, they have gone really big. Does anyone know if there is a setting for this?!

@federitossa 2 жыл бұрын

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

@arturominam 11 ай бұрын

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.

@stevenramos4639 3 жыл бұрын

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

@user-bp6ot8ug2u 5 ай бұрын

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

@angelboscan5935 2 жыл бұрын

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.

@focuslashes730 3 жыл бұрын

thank you

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

@swaminawale7386 3 жыл бұрын

Is it ok to use elementor addons or WooCommerce adddons in website ? or it will make site heavier and reduce response time ?

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

@adictivedesign Жыл бұрын

Is there a way to build the shop on the landing page? Because when I try, then everytime I change the product category, i get redirected to a new page for categories.. Basically its not fully functional then, as it not behaves like a shop would but just works like buttons, redirecting you to another page..

@susanaarango7850 2 жыл бұрын

Thank you for this! I have a question though: my archive page, for whatever reason, doesn't 'publish' the 'add to cart' button, and I can't get it to link or direct me to my cart, checkout etc. Does anyone know why?! Help is greatly appreciated, thanks

@hitarthmodi3600 3 жыл бұрын

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

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

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

@khanfaysal993 3 жыл бұрын

which theme u activated like brandstore ?

@prof.cipolla7039 2 жыл бұрын

Great class. Any idea how to build a FAQ per product or, at least, category? Tks

@marcelomanlusoc3889 3 жыл бұрын

can you help me with Astra theme? in my shop page when in mobile the left product is smaller and the right side is a little bit bigger?

@JohanDG7 2 жыл бұрын

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?

@user-pw9xz1li6x Жыл бұрын

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

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

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

@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!! :(

@dev6716 2 жыл бұрын

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