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

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
This is How to Build the Woocommerce Shop and Products Archive - Elementor Wordpress Tutorial 2023
00:00 Products Archive Template with Loop Grid
16:16 Products Archive Display Conditions
20:35 Shop Page
23:07 Add Gridbuilder for Product Filtering
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your KZbin Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@freyjauser]

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

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

[@webtappers7863]

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

[@AMiN-xl8in]

That was exactly what i looked for , thank you 👌

[@ebsouls]

This is extremelyhelpful!! THANK YOU

[@florencephilipanthonypajar4279]

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

[@amrfarrouh]

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

[@SamWereb]

A very useful, and probably evergreen, tutorial.

[@by.machin]

Great content!! Keep creating man!

[@MDGESAN]

Great tutorial, thank you 🙂

[@AshwiniSah]

You saved my life. Thank you :)

[@websquadron]

Glad to hear that!

[@sharaudramey9336]

ok, you helped! thanks.

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

[@nuevavidamedia3145]

@@websquadron link?

[@learner3404]

awesome. this is called real tutorial

[@websquadron]

Thanks a lot 😊

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

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

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

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

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

[@maddy1mymk]

Hi peeps

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

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

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

[@user-bp6ot8ug2u]

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.

[@user-bp6ot8ug2u]

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

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

[@birkofs]

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

[@websquadron]

I’ll see what I can do

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

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

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

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

[@DEBUGENTITY]

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

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

[@nuevavidamedia3145]

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

[@nuevavidamedia3145]

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

[@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');

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

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

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

[@alanjones9718]

Is there a general WooCommerce “getting started tutorial?

[@websquadron]

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

[@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 😢

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

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

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

[@mariusmanlive]

are you using elementor free or pro ?

[@websquadron]

EL Pro - always.

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

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

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

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

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