Elementor Product Loop Builder with Filters for WooCommerce
Vložit
- čas přidán 7. 11. 2023
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
Create products Filters using Elementor's Taxonomy Filter widget.
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorwordpress - Jak na to + styl
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!
Helpful
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!
WOWOWOWO .... This is the ONLY one really useful video for woocommerce..... thanks from Argentina!!!!
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.
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!
Ah men Thankyou, your way of explaining things is easy to understand, please do keeping doing tutorials like this,
Awesome! Glad to hear it’s easy to follow.
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.
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.
🙏😎
Thanks Jeffrey! Super helpful video and you nailed it as always!
Awesome thanks!🙏
Best video I have seen.
You have solved my problem
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.
Nice tip! Cheers!
thanks loads jeff - you have helped me lots with your great video. star man :)
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.
Thanks for sharing the fix! I love seeing this kind of support here 💖
Thanks for this video. Most helpful ...
So glad to hear thanks!
In the beginning i use to hate elementor.
But Now its my love and life😅.
I can't live without elementor.
I love hearing the love! ❤️
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
That’s awesome thank you!
Very good Video thanks!
Thanks so much jeffrey for the video!!
🙏
Thans for your video ，it is really helpful.
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)!
Hey that’s awesome! Trial and error is the best way to learn. It develops solution finding skills. Ask questions here anytime!
Thanks a lot.
🙏
You earned a sub
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.
Good catch!
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.
In the inner container use your flex controls to give them a horizontal layout
perfect tuts...
🙏
Thank you sir.
🙏
thanks usefull
Really appreciate this video, curious how you tackle the filtering with the loop grid. How to sort by price, name and popularity?
dostum, teşekkürler
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
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?
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.
Hey Anthony, check out Paul's video on truncating titles - czcams.com/video/q2E1BaE-ySE/video.htmlsi=ppg2VZYISmyp5ivh
This video is a gem!
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
@@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.
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
Hello Jeffrey, thank you for your useful tips. How do I add a "Quickview button" to loop grid and create quickview popup in elementor?
heey thanks for sharing. I would like to know how to make the taxonomy filter scrollable? Please
Nice browser😮
Thanks, I’m loving Arc Browser!
Jeffrey thank you! Would you care to link a tutorial for using loop builder to create a blogging page of topics instead?
Here's a couple:
czcams.com/video/PbL13b5YjIE/video.htmlsi=iiraRh1XD2PYLNu6
czcams.com/video/C1u47jCppcw/video.htmlsi=gqsCyJ8-cO8n2GZE
These when it was first launched. It's been refined since then
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.
I may have missed it - but can you use loop builder to do this for ACF and CPT?
Yep you can
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
Hello Jeffrey
I am a beginner in WP from China, and I am glad to see your WP tutorial on CZcams. 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?
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?
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
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.
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
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 - czcams.com/video/ExW-x0lVLzg/video.htmlsi=xWvdXU11XH3WK2tK
Can you search the loop grid to filter?
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?
Edit the featured image in the loop and add a URL that's set using the dynamic tag to post url
Do you need elementor pro for all of this?
Thanks Jeffrey. Has anyone found a way to put 'Sale' badges in the loop?
This is a great idea for other video 😉
👍👍👍
💪😎
Nice tutorial with Loop! how do you add the quantity inline w/ add to card button?
Is this for the product page? If so, in the Add to Cart widget, there is an option called Layout to make this inline
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?
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
@@LytboxStudio awesome! that's exactly what i did. Love your stuff man, keep up the great work!
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?
Do you learnead how to do that?
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!
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.
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
@@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.
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"?
You put 'Post URL' on the dynamic link of image text and in the 'link' camp on the title
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?
Not sure, I have tested with external affilate products, I’d need to see the site and understand how the links are working first
what if I want to change the order of the categories, I don't see the options
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
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
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.
Excellent, but the product does not open, any solution?
Make sure to apply an dynamic link to the featured image, product titleand button.
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?
It's been in beta. I've gotten lots of reports of similar bugs. Try again now after a few Elementor updates.
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 ?
You do not need WooCommerce for that. You can get the same look and function using the Loop Grid with posts.
@@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
@@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.
@@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.
@@CarlosRodriguez-vg2ob you'll need to use custom fields to do this
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?
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.
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?
Elementor > Setting > Advance/Features > Flex Container > Inactive & Save. Then try
Try using the navigator. It gets tricky trying to drag and drop in between containers
how to make a drop down filter instead of this tabs?
That's a whole other tut 😉
Does this only work on shop pages?
It also works with regular posts
Hey Jeff, l can’t seem to find choose template type, its only showing choose a template so how to l change that
You need to create a single product template first. After that, enter the name of your template and it'll come up
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
That's question I ve been asking myself. It seems there is no answer yet. Could anyone help?
there is no opptiom in my elementor loop
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.
Oh I just worked out this 🙃👌🤘
I end up using the navigator when the drag and drop isn’t working well 😉
I can't find Taxanommy widget! How to get this widget?
You need to the Pro version and to turn it on in the back end settings
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. :/
Hey share this in the Facebook community so we can help
hey Jeffrey, I figured it out what was wrong. Plus I needed additional things for filtering in this specific apparel store I'm building.
@@HrvojeLivnjak good to hear! You got this 💪
i cannot see that option in my elementor
Are you using Elementor Pro and do you have WooCommerce already installed with products?
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.
For people just looking for the taxonomy filter part, that starts at 11:40. The first half is just building the product loop page.
5 minutes in, how the hell does he get the text side by side with the button😮💨
Use an inner container for the button and text and then use the flex settings to make inline as a row or horizontal
@@LytboxStudio wow never expected a reply, thanks. I will persevere until I complete this even if i have to watch this video 50x😂
@@superiorbeing95 it get's even better after 100x 🤣🤣🤣