How to Build the Woocommerce Shop and Products Archive

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

Рет қаралды 30,150

Күн бұрын

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 KZfaq Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 105

@freyjauser 7 ай бұрын

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

@zyzzbrah5091 5 ай бұрын

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.

@ebsouls 11 ай бұрын

This is extremelyhelpful!! THANK YOU

@florencephilipanthonypajar4279 11 ай бұрын

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

Great content!! Keep creating man!

@AMiN-xl8in 6 ай бұрын

That was exactly what i looked for , thank you 👌

@MDGESAN Жыл бұрын

Great tutorial, thank you 🙂

@sharaudramey9336 2 ай бұрын

ok, you helped! thanks.

@AshwiniSah 10 ай бұрын

You saved my life. Thank you :)

@websquadron 10 ай бұрын

Glad to hear that!

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

@@websquadron link?

@learner3404 5 ай бұрын

awesome. this is called real tutorial

@websquadron 5 ай бұрын

Thanks a lot 😊

@toomaskilm 4 ай бұрын

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

Glad it helped!

@frannavas3700 4 ай бұрын

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

Are you using any Pagination features?

@sonia1145 10 ай бұрын

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

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

Thank you for the response! @@websquadron

@david.krawczyk 3 ай бұрын

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

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

@gokulkkd 5 ай бұрын

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

@websquadron 5 ай бұрын

No good version yet

@matteovelicogna7948 3 ай бұрын

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

@websquadron 3 ай бұрын

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

@matteovelicogna7948 3 ай бұрын

@@websquadron Not yet but I will! Thx

@maddy1mymk Жыл бұрын

Hi peeps

@pigletbb 2 ай бұрын

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

It should show.

@DEBUGENTITY 11 ай бұрын

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

@esentl 6 ай бұрын

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

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

@ErickTiki 9 ай бұрын

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

I've emailed you as they are separate.

@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, 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 5 ай бұрын

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

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

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

@JulienPop 5 ай бұрын

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

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.

@Tempo_est 4 ай бұрын

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

It is there. Have you typed loop?

@popandbob 5 ай бұрын

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

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

@humbertg.9661 7 ай бұрын

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

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

@websquadron 7 ай бұрын

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

@nuevavidamedia3145 9 ай бұрын

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

@websquadron 9 ай бұрын

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

@nuevavidamedia3145 7 ай бұрын

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

@alanjones9718 10 ай бұрын

Is there a general WooCommerce “getting started tutorial?

@websquadron 10 ай бұрын

Yes, see this: kzfaq.info/get/bejne/fdaYiN2H19DRY6s.htmlfeature=shared

@oracoweb 16 күн бұрын

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

@websquadron 16 күн бұрын

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

@edsonvarillas122 7 ай бұрын

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

I think there is a glitch with related at the moment

@edsonvarillas122 7 ай бұрын

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

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

@websquadron 11 ай бұрын

Gridbuilder WP is awesome

@DEBUGENTITY 11 ай бұрын

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

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

@sallamkashif 7 ай бұрын

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

@stavroskonstantinomanolaki8237 6 ай бұрын

there are plug ins for that

@sallamkashif 6 ай бұрын

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

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

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

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

@Moose3D-rt9bo 2 ай бұрын

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

@websquadron 2 ай бұрын

Difficult help without a 1-2-1 Consultation.

@Moose3D-rt9bo 2 ай бұрын

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

@tucombovalencia3736 10 ай бұрын

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

@websquadron 10 ай бұрын

You need Elementor Pro

@tucombovalencia3736 10 ай бұрын

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

@mariusmanlive 7 ай бұрын

are you using elementor free or pro ?

@websquadron 7 ай бұрын

EL Pro - always.

@DEBUGENTITY 11 ай бұрын

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

@websquadron 11 ай бұрын

Depends on how you built it

@DEBUGENTITY 11 ай бұрын

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

@Webrisernl 2 ай бұрын

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

@websquadron 2 ай бұрын

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

@YoutubeAccount-ip4yv 7 ай бұрын

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

@blaiseeltine9516 4 ай бұрын

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

@seo-uzmani 9 ай бұрын

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

@websquadron 9 ай бұрын

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

PS your caps lock button seems stuck

@redharleymn 5 ай бұрын

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

@websquadron 5 ай бұрын

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

@justbeyoo8193 2 ай бұрын

you lost me

@websquadron 2 ай бұрын

Which bit?

@woodworker-org-uk 5 ай бұрын

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