How to Build the Woocommerce Shop and Products Archive - Elementor Wordpress Tutorial 2023

[@zyzzbrah5091]

I am a beginner at Elementor builder and this tutorial is better than 100 tutorials I've seen so far on YT. The depth that you cover with your knowledge and also how you approach explaining how things work from the very core it helped me a lot to understand the whole structure and how to use page builder from now on. I just want to say thank you sir for doing this, God bless!

[@Breezeartdesignandprint]

You are by far the most resourceful channel for me as i'm building my first wordpress site for a client. I've not come back to your channel 3 times searching for specific things and after clicking through several different people's videos, by coincidence, your videos are the ones i've watched all the way through because it's ACTUALLY helpful. Subscribed.

[@websquadron]

I appreciate that! Big thanks.

[@freyjauser]

Web Squadron is amongst the best KZbin channel when it comes to Webdesign. Very pedagogue, straight to the point ! Subscriber earned.

[@AMiN-xl8in]

That was exactly what i looked for , thank you 👌

[@webtappers7863]

Brilliant! I love your tutorials, they are full of valuable tips and tricks. Thanks for sharing.

[@toomaskilm]

Your advice on trying to edit the "SHOP" page with Elementor which causes an endless loop fail saved me!!! I wasted so much time on trying to figure it out with host provider to no avail.

[@websquadron]

Glad it helped!

[@AshwiniSah]

You saved my life. Thank you :)

[@websquadron]

Glad to hear that!

[@realvotoan]

Thanks so much!

[@florencephilipanthonypajar4279]

THANK YOU SO MUCH!!!! YOU'RE A LIFESAVER!!

[@torosmedia007]

Hi buddy, i love your tutorials, quick question, How can i add the sizes and swatches of a product in shop and products archive. I will love to see the archive product in home page showing sizes and swatches in each product. Can you point me to the right direction, please?

[@ebsouls]

This is extremelyhelpful!! THANK YOU

[@mcbroccolinnen]

Hello! Thank you so much for this tutorial and all others🙏🏼 I’m a little confused on step 8:30, what did you put in “after” section? You said backspace+..? I watched several times and couldn’t understand🙏🏼

[@websquadron]

I added a 'space' and then the 'chevron' or the '>' symbol.

[@amrfarrouh]

Very useful with a clear details , Thank you so much Bro

[@learner3404]

awesome. this is called real tutorial

[@websquadron]

Thanks a lot 😊

[@davidwiederholt9802]

Fantastic. Been looking into this. Love the real world walkthrough. The video abruptly ended however when you were looking to edit single product.

[@websquadron]

The Single Product comes out..... now :)

[@ThisIsNVMedia]

@@websquadron link?

[@by.machin]

Great content!! Keep creating man!

[@SamWereb]

A very useful, and probably evergreen, tutorial.

[@david.krawczyk]

Thank you for the great tutorials! I am experiencing an issue where when I go to save the template as you show at 3:54 the grid loop just gets frozen. There is no way to edit the grid loop because it does not show. Any insights into the reason for this?

[@websquadron]

Have you got a link on the whole container. If so - remove that.

[@siyabulelaklaas606]

Hi you never explained what to do after changing the shop page name to shop results, do we leave it pointing to it as a default page even after we have finished creating the custom shop page? ]

[@mw1076]

Can you add 'out of stock' ribbon on any of these products that if the product is not available, it automatically shows that ribbon?

[@matteovelicogna7948]

Can I achieve the same filter and sorting with crocoblock jet smart filters instead of that Grid builder plugin you've showed? Thanks

[@websquadron]

Yup - have you seen my Crocoblock video I did last year?

[@matteovelicogna7948]

@@websquadron Not yet but I will! Thx

[@pigletbb]

Thank you very much! I have a quick question. When I have a lot of items, the pagination doesn't show the second page, and instead, it displays a 404 error

[@websquadron]

It should show.

[@esentl]

I am using elementor I see flex containers but not loop in settings-features, is loop exclusive to elementor pro? would pro lite have it if so?

[@websquadron]

Check if it's activated as a feature

[@sharaudramey9336]

ok, you helped! thanks.

[@Pabloh-e6o]

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

[@websquadron]

Posting in many places doesn't compel me to reply.

[@Pabloh-e6o]

@@websquadron Thank you for your response, just publish in different places because I'm not sure if you read them all, I've seen several of your videos and found them very good, I even subscribed to the channel, sorry if it bothers you in different places (including pennsé which was good for the channel given that there is more interaction with the video). There are times when messages are not always responded to. In this case, I'm looking for a solution to a problem and I hope you can help me with that.

[@MDGESAN]

Great tutorial, thank you 🙂

[@TruthSeeeker777]

There must be a video before this one I missed such as plugins and step one. Ill try and find it.

[@websquadron]

All of that is superseded by my new course that’s coming out on 10/10/24

[@ErickTiki]

Im a small business owner but, I do all my own web development which of your courses should I take or does the bigger one have both the web learning and business learning in it?

[@websquadron]

I've emailed you as they are separate.

[@Tempo_est]

Did they remove "Loop grid" ? I don't have any widget called loop grid in elementor... i have enable flexbox container and grid is active.

[@websquadron]

It is there. Have you typed loop?

[@frannavas3700]

Really helpful. Thanks. Do you know hot to display i.e.: "1 - 16 of 29 products"? I mean, a counter of products shown against total results.

[@websquadron]

Are you using any Pagination features?

[@edsonvarillas122]

thanks, but im having a little problem using the loop template to build my product search page result, because it shows all the products related with the search term, even if they are out of stock. I have checked the woocommerce setting that hides products out of stock but the problem remains the same. is there a way to solve this?

[@websquadron]

I think there is a glitch with related at the moment

[@edsonvarillas122]

@@websquadron yes, i decided to contact with tech support, and they provided a custom code for the function.php file that fixed the problem: // Exclude out-of-stock products from search results function exclude_out_of_stock_from_search($query) { if (!is_admin() && $query->is_search && $query->is_main_query()) { $meta_query = array( array( 'key' => '_stock_status', 'value' => 'outofstock', 'compare' => '!=', ), ); $query->set('meta_query', $meta_query); } } add_action('pre_get_posts', 'exclude_out_of_stock_from_search');

[@JulienPop]

Hey thank you for this tutorial ! I seem to have a problem, whenever I choose product images in the dynamic tag of the CTA widget, it doesn't display anything unless I choose a specific product. Any video why that doesn't work ? Thanks again for the video !

[@JulienPop]

Ok, solved. ^^' I had chosen to create a post loop grid template instead of a product loop grid template. It was that, or it was maybe because I had a blank single product template sitting in my template libraries.

[@Mahnoor_Shahzadi]

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

[@DEBUGENTITY]

And iam only getting gridbuilder grid option in facet widget not getting elementor loop grids why anyone😢

[@sonia1145]

Thanks so much for the great video! I am new to all of this and boy do I have my work cut out for me! This video helped me alot! Wondering if you have any tips or ideas as to why the product archive might not be displaying when dropped onto pages. I have the astra theme. It displays within the theme builder, however, i cant seem to figure out why it doesnt display when it in from elementor builder section and doesnt display on any other page other than the shop.? Any help is appreciated! Thanks again.

[@websquadron]

Did you copy the container for the products and then drop it onto a page called shop? Or was the products archive widget as that only really works on the shop template. Tip 1: Create products archive template and that will be the shop results. But you can create a separate shop page with the products widget

[@sonia1145]

Thank you for the response! @@websquadron

[@CalvinHanson]

Using Elementor Pro and building my product archive template, I see my loop grid on my Product Archive Template Edit page, but not on any on the front end, just a blank section. Anyone else have this issue? Maybe I am making a simple error. I have my product grid on a number of pages already but it just won't show on the product archive pages.

[@websquadron]

Have you set the display conditions?

[@CalvinHanson]

@@websquadron I set it for all shop archives If that is what you are referring to. I cleared all my caches I could find as well. I am 1 version older than the latest Elementor..Should I "Regenerate CSS & Data" ?? I am throwing the site on the test server to see if there could be a plugin issue.

[@gokulkkd]

Hey thanks for the wonderful video. Can u suggest me free plugin for filtering that's associated with loop grids 😊

[@websquadron]

No good version yet

[@ThisIsNVMedia]

you reference other videos is there a playlist? or can you share the links to the other videos??

[@websquadron]

That was a while ago. Now the new version is here learn.websquadron.co.uk

[@ThisIsNVMedia]

would like to but there is no mention of woocomerce in those videos/classes.@@websquadron

[@DEBUGENTITY]

Is there any product filter plugin which works with loop grid products filtering properly with AJAX

[@websquadron]

Gridbuilder WP is awesome

[@DEBUGENTITY]

@@websquadron ya but its not free.. I used YITH filter thats also working fine.. & woocommerce official filters widget also work great & for styling i add custom css code but it dont jave AJAX option one

[@DEBUGENTITY]

@@websquadron can u make a video on YITH product filter free one any which works with loop grid

[@oracoweb]

Grid Builder, this doesn't appear to be an Elementor Pro element. Is it worth getting?

[@websquadron]

For filtering, definitely yes. If you only plan to filter by Taxonomies then just using the Elementor Pro Taxonomy Filter is fine.

[@sallamkashif]

Another Question .. how to add product attributes under the Product Name on SHOP page? For example, Sizes (S M L XL) ?

[@stavroskonstantinomanolaki8237]

there are plug ins for that

[@sallamkashif]

@@stavroskonstantinomanolaki8237i know and already using a plugin for this... but i want to achieve that without a plugin by using snippet codes....

[@popandbob]

I love the look of that gridbuilder plugin for filtering but it costs the same as elementor pro!?! Yikes that's a bit much when one considers how much elementor brings vs this plugin. I'm guessing they price it like that because of the grid creation options but most of us elementor users wont need that feature. Wonder if they will ever add a lower priced filter only option?

[@websquadron]

They won’t lower it :( I was hoping for a lighter version too

[@birkofs]

Could you explain how to get in the loop grid product sales flash?

[@websquadron]

I’ll see what I can do

[@tucombovalencia3736]

Hola Saludos, cuando le doy crear plantilla solo me salen 4 opciones : contenedor - página destino - página- sección no logre avanzar 😢

[@websquadron]

You need Elementor Pro

[@tucombovalencia3736]

@@websquadron No.... Thanks Hermano !!

[@humbertg.9661]

Hey good man! grid Builder prices have triplicated in less than a year. Can you suggest an alternative? maybe a free one. I just need to filter 2 categories. I tried using tabs but I don't believe woo likes that idea 😞. Keep on the good work!

[@humbertg.9661]

Never mind I was looking at the annual plans, but anyway if there's a free option the better 🙂

[@websquadron]

There's no real good free version unless you manually build

[@Moose3D-rt9bo]

I followed your instructions but facets are not appearing in the elementor widgets, any help appreciated.

[@websquadron]

Difficult help without a 1-2-1 Consultation.

[@Moose3D-rt9bo]

It’s ok, I saw the part about enabling the addon - my bad! 😅

[@sallamkashif]

A question ... how to do "2nd image on mouse over" on product archive page??

[@websquadron]

You'll need to add the 2nd image as a custom field for products. Then bring it through on the loop grid. Then set it to be opacity 0, and when the container os hovered, then the opacity becomes 1.

[@sallamkashif]

@@websquadron looking fwd to seeing your video on this 😆

[@websquadron]

@@sallamkashif No plans to record yet

[@tucombovalencia3736]

Hola Saludos, cuando le doy crear plantilla solo me salen 4 opciones : contenedor - página destino - página- sección no logre avanzar 😢

[@DEBUGENTITY]

Hey iam not getting the facet widget in my page why can u tell me?

[@websquadron]

Depends on how you built it

[@DEBUGENTITY]

@@websquadron i have not used its elementor addon thats why.. But loop grid is not showing in facet

[@mcbroccolinnen]

What if when I click “name of product” in dynamic tags, the heading just disappears?😢

[@websquadron]

It shouldn’t disappear ?

[@mcbroccolinnen]

@@websquadronI fixed it! I rewatched your lesson, I should have clicked “products” instead is “posts”☺️

[@alanjones9718]

Is there a general WooCommerce “getting started tutorial?

[@websquadron]

Yes, see this: kzbin.info/www/bejne/faHLhq2Mp8-gadkfeature=shared

[@Webrisernl]

I want to sell 1 or 2 items on the page... do I need woocommerce?

[@websquadron]

No. Could use PayPal or stripe button. Could use Forminator. Lots of other solutions ,

[@mariusmanx]

are you using elementor free or pro ?

[@websquadron]

EL Pro - always.

[@maddy1mymk]

Hi peeps

[@YoutubeAccount-ip4yv]

this will not show "out of stock" if out of stock so not the most helpful if using as product archive and that feature is important to you.

[@websquadron]

Ok

[@blaiseeltine9516]

great video.. hard Northern Wisconsin accent, a little hard to follow. i mean, I know it's English and the closer you get to Milwaukee, it get's better but still.

[@websquadron]

Ok

[@seo-uzmani]

why you didnt write "WITH ELEMENTOR PRO!"???

[@websquadron]

Because you can’t build those templates without pro and I didn’t mention or state on the cover art that I was using a 3rd party plugin.

[@websquadron]

PS your caps lock button seems stuck

[@redharleymn]

Too fast and you seem to go everywhere other than the archive page.

[@websquadron]

Okay. Don’t forget to slow down the speed using the settings.

[@justbeyoo8193]

you lost me

[@websquadron]

Which bit?

[@woodworker-org-uk]

you didnt mention you need elementor pro advanced , dynamic tags for any woocommerce dont show when you try to add product title, or ant woocommerce product related?????