Elementor Product Loop Builder with Filters for WooCommerce

[@olgaprokopenko2080]

I cannot be more grateful to you! You are the best! Watched two of your videos today and almost finished my project!! The best!

[@Kobayashi360]

Hey Jeff, one key advantage to using the Featured Image in this case is that it allows a fallback option. Why that isn't an option for regular images is just one of those dark little corners deep within Elementor. A couple other things I did with my layout... I set the image width & height both to 100% and then added css: selector { aspect-ratio: 1 / 1 } - this ensures those images stay square regardless of the page width. One last thing - adding a url to the image broke the aspect ratio, so I got around this by putting it in a container (along with the Product name) and applying the link to that container using the fancy new "Additional Options" they gave us. Love your videos, keep 'em coming!

[@IdeaCraftery]

Helpful

[@sebastianmallarini708]

WOWOWOWO .... This is the ONLY one really useful video for woocommerce..... thanks from Argentina!!!!

[@nemanjatomanovic5347]

Great video! When building the Loop Item for product listing, you can adjust the Preview Settings to see the image, title, etc., in Editor while creating the loop item layout. Open the Loop Item Settings (cog wheel icon) > Preview Settings > Products > All or Specific one > Apply & Preview.

[@LytboxStudio]

Nice tip! Cheers!

[@gamipresscordial5379]

I actually took time to watch this Video three(3) times--because I couldn't get my Woo Commerce Loop Grid to work. It was so confusing and frustrating to me, that I created Eight(8) Loop Grids of the same thing, without knowing that I am creating them. The issue is that I was trying to instinctively and intuitively create something I have no knowledge about, without learning it first. But after my frustration, I took time to download this Video and watch it over and over for about 3 times attentively, before everything just clicked. Thanks for taking the time to make this Video!

[@CarlosOzuna1969]

I pretty sure Jeffrey @ Lytbox is the only one really teaching how to do stuff, unlike some others out there and for that we have to like each one of his videos for other like us can find his tutorials. Thank you so much for help us.

[@LytboxStudio]

🙏😎

[@nicolascarrillo4355]

HI, YOU CAN'T IMAGINE HOW HAPPY I AM WITH YOU. For real, you're the best. You solved all my problems! gonna buy your course fr

[@LytboxStudio]

That’s awesome thank you!

[@hdustinowens]

Thanks as always for the great vid! I learn something useful each time. Looking forward to a video about using REM for padding. Curious to hear your pros/cons for REM instead of % or VW.

[@karlozm]

Straight to the point thank you so much, I spent a lot of time on other tutorials yours worked as soon I started watching I'm subscribing to you channel

[@nickkrepeniotis]

Great video and easy to understand as usual. Just an observation. If the product is a simple one it works great while the "add o card" dynamic tag takes you to the product page. But when the product is a variable one, it redirects you to the homepage. Thanks again for the great tutorial.

[@marianaconti8855]

Hi, did you find any solution for variable products? I can't ever go to current product page, I'm lost!

[@miryarmuhammadtalpur3284]

Ah men Thankyou, your way of explaining things is easy to understand, please do keeping doing tutorials like this,

[@LytboxStudio]

Awesome! Glad to hear it’s easy to follow.

[@JuliaHorvatits]

Thank you so much for your help. I was going crazy with the standard woocommerce design - it wasn't really working with the responsible design so MANY THANKS! This looks so great!

[@superiorbeing95]

I had an issue where the tabs were not clickable in some browsers, Elementor said put the taxonomy filter in a separate container and it fixed it straight away, just sharing that in case anybody has the same issue, thanks again for what I learnt here.

[@LytboxStudio]

Thanks for sharing the fix! I love seeing this kind of support here 💖

[@arslanmalik.a]

In the beginning i use to hate elementor. But Now its my love and life😅. I can't live without elementor.

[@LytboxStudio]

I love hearing the love! ❤️

[@CodeTutorialss]

You are my best teacher really thank you so much for all tutorials

[@herfolgedyr]

This is all great but can you click a product and go to the product page? or can you only click "Add To Cart"

[@ibassamca]

Thanks Jeffrey! Super helpful video and you nailed it as always!

[@LytboxStudio]

Awesome thanks!🙏

Thank you so much, you opened my horizons, you are great ❤

[@SamFrysteen]

Hey mate, don't forget to enable the preview (page settings) when editing the product loop item - then select a product. Makes it easier for styling it with content in it.

[@LytboxStudio]

Good catch!

[@nazirnoorsalaman7637]

Jerry you are a legend man, thank you very much for the following video. I started working with the dynamic tags in wordpress and advanced custom fields, this is an eye opener. I have a question: can I create a wishlist based of a figma design using the following scenario (dynamic tags) and product compare?

[@beatriceprinz6308]

Thanks for this video. Most helpful ...

[@LytboxStudio]

So glad to hear thanks!

[@catchphrase7154]

Excellent video. Tell me which option to choose.. for example, there are very different products with more than 150 categories and they have a lot of characteristics. let's say 20-30 fields.. and in total 8-10k. which option would you recommend? It would be very interesting to see cool work and how to scale in an easy way.

[@RR-ok4wz]

Dude ... I just started watching your tutorials, and they are amazing! I've def got some questions, but let me do some trial and error tests first so I can figure things out on my own. I'll be back (in terminator voice)!

[@LytboxStudio]

Hey that’s awesome! Trial and error is the best way to learn. It develops solution finding skills. Ask questions here anytime!

[@shoichiro15]

Thanks so much jeffrey for the video!!

[@LytboxStudio]

🙏

[@Khanabdulhamid]

Best video I have seen. You have solved my problem

[@jaseyarm]

thanks loads jeff - you have helped me lots with your great video. star man :)

[@oneilbronsen9689]

Hi Jeffrey, thank you for the informative video. Im actual building my own online shop. I use your video to create loop grid and filter. Can you help me understand or how can i link my product grid to my single product information page. For the customers to view the product. I don't see a dynamic tag for that. Thank you

[@JulioCajas-z1z]

Hi Jeff, thanks a lot for this video. Is it possible to use the taxonomy filter with the loop carrousel?

[@riccardosalmaso3644]

Hi Jeffrey awesome video!⭐⭐⭐⭐⭐ How can I filter the 'product category'? Because I want 3 specific category displayed. Many thanks in advance for helping. Keep going🔥

[@Maypalm]

Really appreciate this video, curious how you tackle the filtering with the loop grid. How to sort by price, name and popularity?

[@swiftwraith]

Hi Jefrey, what about clients who use longer titles which can then affect the layout? I have one client who likes to use longer product titles which then cause the justification of the button & price below to stagger horizontally which kinda is the point of this video, to keep everything in line. The only thing I can think of is to set a height on the upper container but that can cause issues in itself. Equal height on the loop grid settings has no effect either as this applies to the full container and not the inner ones.

[@LytboxStudio]

Hey Anthony, check out Paul's video on truncating titles - kzbin.info/www/bejne/p2OoYnWXepKsiacsi=ppg2VZYISmyp5ivh This video is a gem!

[@iwbowden]

So, you've got two product titles: Super Duper Widget - Standard and Super Duper Widget - Deluxe. You truncate the field to 18 characters. What's the result?! Not very helpful! I think his issue requires adding some spacing to even things out, not truncating. @@LytboxStudio

[@LytboxStudio]

@@iwbowden depends on the situation to find the right solution. Super Dope Widget Deluxe isn’t a long product title. Sometimes we get clients that have 8-10 words in their product title. This is where truncating can be useful. Check out Amazon, some product tiles are 2 words, others are like a sentence. They truncate them to keep an even grid.

[@jakubkrivohlavy9012]

Amazing, but it still needs an upgrade. Any ideas how to add something like TAG on a product - like if its on sale, then there will be red box tag with sale written over product loop. Is it somehow possible? Or NEW product, or Recommended etc

[@LytboxStudio]

It’s possible, I use ACF custom fields for this. They can be added to the Loop builder as well. This video can give an idea of how to do this - kzbin.info/www/bejne/e6m6Xqtmobt_sMksi=xWvdXU11XH3WK2tK

[@newtonregmi5777]

informative, thanks

[@olgaprokopenko2080]

Do you think I can do taxonomy filters on slide-out pop-up on mobile view?

[@NickDemty]

This video was incredibly informative! Quick question: Is there a nifty way to make the container clickable so users can effortlessly glide to the respective product page?

[@LytboxStudio]

You can make the container clickable but it will break the style of the links inside of the container like the button. What I do is add the dynamic link to the image, title, and button so the user isn't clicking around trying to find what works

[@NickDemty]

@@LytboxStudio awesome! that's exactly what i did. Love your stuff man, keep up the great work!

[@JasonDelaLuna]

Jeffrey thank you! Would you care to link a tutorial for using loop builder to create a blogging page of topics instead?

[@LytboxStudio]

Here's a couple: kzbin.info/www/bejne/hpOvYmaYar6df6csi=iiraRh1XD2PYLNu6 kzbin.info/www/bejne/eWLYZWqgeNWjmdksi=gqsCyJ8-cO8n2GZE These when it was first launched. It's been refined since then

[@comixrevolution]

Hi Mr. Jeff, thank you for this video, it is really spectacular to hit the target! I have a question for you. I have over 40 categories and over 1000 tags: I will convert all non-main categories and all tags to attributes. So, how can I create the same attributes -based filter using only Elemtor Pro? Thanx a Lot MZ

[@parameshwarin5198]

Hello Jeffrey, thank you for your useful tips. How do I add a "Quickview button" to loop grid and create quickview popup in elementor?

[@zafit02]

Jeffrey any idea how to show "OUT OF STOCK" instead of the price when product it's out of stock in the loop

[@NCitadel]

Thanks for such invaluable knowledge that you provide so generously. I have come against a problem, namely I have inserted the taxonomy filter as you instructed (taxonomy: categories) but when I preview it, the links don't work. They don't seem to be active in fact. And I reiterate a question asked by another user: where does the Loop Grid 1 come from? I quote you: 'I created a loop grid'. Thank you!

[@LytboxStudio]

When you create a Loop Grid, you automatically create a Loop Grid template after selecting edit. You can give your Loop Grids any name you like. My default was Loop Grid 1 If you are using WooCommerce, you'll need to choose Products in your loop grid settings. If not, select posts. Make sure to have categories attached to your blogs or products. By default they are set to uncategorized.

[@nelabeceru]

Thank you! It's good to have the answer from a leading light in webdesign. I am still learning elementor pro, so I apologize if my questions are those of a neofite. As I mentioned, the links in the taxonomy filter (I selected categories)do not seem to work. When I hover and click, they change color as I customized them, but they are not active. They do not return the expected result. I refreshed css and files but to no avail. If I am not asking too much, what might be the cause? Is there something I am not doing correctly? Thank you in advance! @NCitadel

[@LytboxStudio]

@@nelabeceru it's all good. Asking questions and digging in is how we learn 💪 I think your situation can be a number of causes and can't tell without looking closer at the site. Keep going, try to deactivate everything, and even try to start over. That's what helped me when I started learning.

[@elmamounbennis642]

heey thanks for sharing. I would like to know how to make the taxonomy filter scrollable? Please

[@王怀磊-x1v]

Hello Jeffrey I am a beginner in WP from China, and I am glad to see your WP tutorial on KZbin. I have learned a lot of knowledge. I encountered an issue with this tutorial where I was able to switch product menus normally in the theme editor. However, after importing the products archive to the homepage, it is not possible to switch the product menu properly (I can click on the menu normally, but the products below will not change). What is causing this problem?

[@LytboxStudio]

It's hard to diagnoses this, could be a number of reasons. I find when I get stuck, it helps to start over. Maybe try and build a new Loop Grid on the homepage. BTW, are you using the Loop Grid?

[@VictorSotto-w7t]

Nice tutorial with Loop! how do you add the quantity inline w/ add to card button?

[@LytboxStudio]

Is this for the product page? If so, in the Add to Cart widget, there is an option called Layout to make this inline

[@DavidKrebs-gm8bd]

Very good Video thanks!

[@JoeyProulx]

This is great. I got it working for a client for ALL categories, but i'm trying to make it so that if I land on a specific category page, the taxonomy filter shows the child categories.. ie. I click on the Cars category, and the filter will show all the subcategories of the Cars parent, if I click on Motorcycles category, it shows the subcategories of Motorcycles in the filter. That way, each category page has its own taxonomy filter. I can't seem to get the taxonomy filter to do that and play nicely with the category query of the loop. Any ideas?

[@maximoarg]

Hi! Im crazy about that, you find any method to "to make it so that if I land on a specific category page, the taxonomy filter shows the child categories.."? Im thinking in pay jet smart filters, but for only categorys is too overkill... My shop have a lot of categorys and sub categorys

[@mdtaaibalam7272]

Hii, Thank You for this Amazing video!!! I have a question sir, How to add hover effect on images like, whenever I hover over on the product image then the Product image should be change

[@MurtasimHere]

Hello Jef! Loved the video! If we have a long tail title, how can we hide most of it on the shop page and only show the first three words?

[@gustavoduartt777]

Do you learnead how to do that?

[@晚睡的猫]

Thans for your video ，it is really helpful.

[@henningokholm7912]

The only thing I was stuck in was the second container in the "add to cart" and the "price", those two would not be horisontally but only vertical aligned.

[@LytboxStudio]

In the inner container use your flex controls to give them a horizontal layout

[@millennialpregnancy]

Hi Jeffrey. I was wondering if "loop grip" changed its name because I don't have it as an option while building the page. I already activated everything in the elementor plugin features. Hope you can help me with that. Thanks

[@MaurizioDeFeudis-gy9fd]

perfect tuts...

[@LytboxStudio]

🙏

[@mahfujahmed00]

Thank you sir.

[@LytboxStudio]

🙏

[@Dhrubo_Jyoti]

Thanks a lot.

[@LytboxStudio]

🙏

[@mells_studio]

Thank U . I tried the widget filter in editing mode everything is fine but in viewing mode, you don't see anything, what could be the reason? And is it possible to sort the category filter in the order I want because as of now it is only according to A to Z

[@EMedia-ht2vr]

the add to cart works but it also redirect me to the product page, i just want the items to be added

[@jhinson]

Thanks Jeffrey. Has anyone found a way to put 'Sale' badges in the loop?

[@LytboxStudio]

This is a great idea for other video 😉

[@Ztarlit]

What query did you choose for this to work? When I click the categories it stays blank. Thank you!

[@anjaaumeier7338]

Thanks for the great tutorial. However, I'm wondering how I can customise the loop so that I can also click on the product, not just the "add to cart" button? As a prospective customer, I would like to view the product first and not add it to the shopping basket straight away. How can I do this with the loop grid? I have not found a dynamic link like "Product URL"?

[@gustavoduartt777]

You put 'Post URL' on the dynamic link of image text and in the 'link' camp on the title

[@ΜάνθοςΜανωλτζάς]

How to make a variable listing with color swither on archive page? I can fix only on single product page.

[@nazirnoorsalaman7637]

Hi Jerry, please help. I have elementor pro 3.25 but I am missing the taxonomy filters?

[@kevintriik8271]

Hello! Thank you a lot! I have a question, if i click now in picture then its not opening the product, how i can make that work?

[@LytboxStudio]

Edit the featured image in the loop and add a URL that's set using the dynamic tag to post url

[@sebas-garro]

Hi Jeffrey, I added the loop grid, styled it and gave it a name. When I add the taxonomy filter, and I try to select the loop grid, it does not show it in the dropdown. Any idea why would that be happening?

[@RashedKhanMenon-u4w]

How do you filter taxonomy in a Loop Carousel or achieve similar functionality to a taxonomy filter in a Loop Carousel in Elementor?

[@ClubMusicLive]

Hey Jeffrey, how do you solve sorting with Loop Grid? We want to preserve the ability to use query strings like, ?orderby=popularity and ?orderby=date.

[@dilshigeeth3008]

I created a product grid using loop grid. How can use product filters(size, price and etc) for loop grid in woo commerce product grid.

[@farhatmahi4509]

You earned a sub

[@HaleFamilyVlogs]

I can design the product, put categories menu in, but as soon as I try filtering, it goes blank

[@BIGJUNO_DESIGNforDOGS]

dear Jeffrey, I ám looking for a way to display variable products in my shop. Is there a way to show for ex. different sizes of a variable product ? thanks for you help

[@maximoarg]

Its there any way bro? I have three presentations of each product, 1 box with 10 pens, 10 box and 50 box.

[@bobbyryandra]

Nice browser😮

[@LytboxStudio]

Thanks, I’m loving Arc Browser!

[@MadMarcTV]

What if your store is a combination of products and external affiliate products.. then the add-to-cart button won't work for the affiliate products?

[@LytboxStudio]

Not sure, I have tested with external affilate products, I’d need to see the site and understand how the links are working first

[@muhammad-shahin]

If my product have multiple varients instead of add to cart I want to show Select Options how can I do that?

[@CarlosRodriguez-vg2ob]

can i use something like this for affiliate marketing, where I don't have products since I don't have the woocomerce installed, so instead and I want to use use images with links or do I have to install the woocomerce to get the same look ?

[@LytboxStudio]

You do not need WooCommerce for that. You can get the same look and function using the Loop Grid with posts.

[@CarlosRodriguez-vg2ob]

@@LytboxStudio ok so thank you for the quick reply man. your videos are BOSS. I will follow the video and see how far I can get. so when it comes to blog posts then i just do images with links and if so i don't see how since when i click on saved it shows me duplicates only

[@LytboxStudio]

@@CarlosRodriguez-vg2ob thanks for that. You want to use featured images in your posts then when adding to the Loop, add a dynamic link to the post URL. I have a few other loop grid videos showing more on this.

[@CarlosRodriguez-vg2ob]

@@LytboxStudio@LytboxStudio ok, I got one last question. I finally got the look like that; however, the one thing I did not see in the video was how do you target the buttons? if I have multiple products, I would want each button to go to a different place. Like a Buy Now button that each would go to that product link in Amazon since there are meant to be affiliate links.

[@LytboxStudio]

@@CarlosRodriguez-vg2ob you'll need to use custom fields to do this

[@ingarnt]

Suggestion: Use Loop Grid in the title so it's easier to find. I watched this when it came out, and wanted to watch again, but was almost impossible to find via YT Search. had to Scroll reeeeally far :)

[@LytboxStudio]

Good idea!

[@kenpan3735]

How to make more than 2 lines Taxonomy Filters? For example 1st line for choosing size, 2nd line for choose color, 3rd line for choosing shape

[@christiannyirenda186]

Do you need elementor pro for all of this?

[@ytstudio-d]

what if I want to change the order of the categories, I don't see the options

[@LytboxStudio]

Good question, you can’t change the order in Elementor, but you can change the order in the backed dashboard. Go to your dashboard > categories and change the order there then they’ll reflect in Elementor

[@juanobeats]

Excellent, but the product does not open, any solution?

[@LytboxStudio]

Make sure to apply an dynamic link to the featured image, product titleand button.

[@GkM3077]

Is there any chance to make the title responsive so whenever clicks it redirects directly to the product page For link dynamic tag there is no product content or anything like that there is only add to cart tag Is there a solution for this

[@LytboxStudio]

This can be done with the dynamic link. Choose Post URL and it's go to the product page and post blogs to the post page.

[@chimchase]

Can you search the loop grid to filter?

[@hamzamon]

I am facing an issue where filtering by taxonomy shows all items, and the filtering does not work. In ACF Taxonomies, I have selected "category" for my projects and added the categories "Ongoing" and "Completed." In the loop items, I have selected "loop grid" and set the taxonomy as "category," getting "All," "Ongoing," and "Completed." However, it shows all items even when filtering by "Ongoing" or "Completed." What went wrong?

[@LytboxStudio]

Not sure but the taxonomy filter is still in beta and I’ve seen a lot of comments where it isn’t working right. I’d hold off on the filter for now until Elementor fixes it and moves it out of beta.

[@getzon_in]

thanks usefull

[@ZetaVids]

I cannot put two containers in the same row.... He drops it directly into the under container every time I try what am I doing wrong?

[@RahatAhmedShanto]

Elementor > Setting > Advance/Features > Flex Container > Inactive & Save. Then try

[@LytboxStudio]

Try using the navigator. It gets tricky trying to drag and drop in between containers

[@zuzannakopyt4585]

I do not see woocomerce in dropdown list while selecting dynamic tags. Anyone can help?

[@ismailcakr3923]

dostum, teşekkürler

[@AhsanFaraz-fz3kp]

how to make a drop down filter instead of this tabs?

[@LytboxStudio]

That's a whole other tut 😉

[@minimeiauw4]

You add taxonomy filter and chose Loop grid 1 in the dropdown. I might missed something but You dont explain where this "loop grid 1" comes from

[@NCitadel]

That's question I ve been asking myself. It seems there is no answer yet. Could anyone help?

[@iuliarichea3390]

The only issue i see is that now my clients cannot click on the products(or image products) to be taken to the product page to see more information-you only are able to add to cart without the posibility to acces the single product page. so wierd

[@kalinin_77]

👍👍👍

[@LytboxStudio]

💪😎

[@viralplug2061]

Hey, with the taxonomy filter, it does work when i make it and filters my products. But when I update it and go to the site it does not work, any idea what im doing wrong?

[@LytboxStudio]

It's been in beta. I've gotten lots of reports of similar bugs. Try again now after a few Elementor updates.

[@mohsinworld]

I can't find Taxanommy widget! How to get this widget?

[@LytboxStudio]

You need to the Pro version and to turn it on in the back end settings

[@michaelzishiri7051]

Hey Jeff, l can’t seem to find choose template type, its only showing choose a template so how to l change that

[@LytboxStudio]

You need to create a single product template first. After that, enter the name of your template and it'll come up

[@hugoreyesolloqui4899]

Mmmmh. I can't link the image to the product page. In this tutorial you only link to "add to card" right?

[@LytboxStudio]

Link the product featured image url with the dynamic tag ‘post url’. I also do this on the product title.

[@rChandan_Singh]

there is no opptiom in my elementor loop

[@superiorbeing95]

interesting but i couldn't follow through to the end, i learnt a few things but his Elementor behaves differently to mine, how can drag the text to the side of the button for example. I'll try follow it again but the way elementor mess with things between versions is not helpful.

[@superiorbeing95]

Oh I just worked out this 🙃👌🤘

[@LytboxStudio]

I end up using the navigator when the drag and drop isn’t working well 😉

[@swing-o-gram]

For people just looking for the taxonomy filter part, that starts at 11:40. The first half is just building the product loop page.

[@mohddanial2067]

i cannot see that option in my elementor

[@LytboxStudio]

Are you using Elementor Pro and do you have WooCommerce already installed with products?

[@HrvojeLivnjak]

for some reason I have a totally wrong path structure to access a single product preview and add to cart because of that doesn't work. :/

[@LytboxStudio]

Hey share this in the Facebook community so we can help

[@HrvojeLivnjak]

hey Jeffrey, I figured it out what was wrong. Plus I needed additional things for filtering in this specific apparel store I'm building.

[@LytboxStudio]

@@HrvojeLivnjak good to hear! You got this 💪

[@tareknnassar]

I think elementor failed to make this feature more advanced, it is very simple at this time and needs further development to take full advantage of it. I looked everywhere on how to replace the text with images/icons for the taxonomy filter but failed to find a simple method to do so, i would rather have more intuitive filter than just text, would make more sense in a lot of cases. Thanks.

[@superiorbeing95]

5 minutes in, how the hell does he get the text side by side with the button😮‍💨

[@LytboxStudio]

Use an inner container for the button and text and then use the flex settings to make inline as a row or horizontal

[@superiorbeing95]

@@LytboxStudio wow never expected a reply, thanks. I will persevere until I complete this even if i have to watch this video 50x😂

[@LytboxStudio]

@@superiorbeing95 it get's even better after 100x 🤣🤣🤣

[@igotslickshoes]

I may have missed it - but can you use loop builder to do this for ACF and CPT?

[@LytboxStudio]

Yep you can