Elementor Product Loop Builder with Filters for WooCommerce

Подписаться 23 тыс.

Просмотров 25 тыс.

50% 1

Create products Filters using Elementor's Taxonomy Filter widget.
===================================
🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorwordpress

Хобби

Опубликовано:

7 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 109

@Kobayashi360 6 месяцев назад

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 4 месяца назад

Helpful

@sebastianmallarini708 4 месяца назад

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

@user-hr1bo3tp8c 2 месяца назад

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!

@CarlosOzuna1969 7 месяцев назад

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.

@nicolascarrillo4355 6 месяцев назад

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 6 месяцев назад

That’s awesome thank you!

@nemanjatomanovic5347 7 месяцев назад

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 7 месяцев назад

Nice tip! Cheers!

@gamipresscordial5379 4 месяца назад

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!

@hdustinowens 6 месяцев назад

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.

@Khanabdulhamid 4 месяца назад

Best video I have seen. You have solved my problem

@ibassamca 7 месяцев назад

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

@LytboxStudio 7 месяцев назад

Awesome thanks!🙏

@nickkrepeniotis6015 5 месяцев назад

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.

@miryarmuhammadtalpur3284 6 месяцев назад

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

@LytboxStudio 5 месяцев назад

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

@shoichiro15 17 дней назад

Thanks so much jeffrey for the video!!

@arslanmalik.a 7 месяцев назад

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

@LytboxStudio 7 месяцев назад

I love hearing the love! ❤️

@beatriceprinz6308 7 месяцев назад

Thanks for this video. Most helpful ...

@LytboxStudio 7 месяцев назад

So glad to hear thanks!

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

@user-zn2xj1cz8s 3 месяца назад

Thans for your video ，it is really helpful.

@mahfujahmed00 Месяц назад

Thank you sir.

@salimms5944 7 месяцев назад

Elmentor now is more better and i am soo happy about all of these feature i will stay work just in elementor and i hope they will add features like classes and components

@LytboxStudio 7 месяцев назад

They’ve definitely been adding much better features this last year. Now if they can add classes like Bricks, that’ll be interesting

@MaurizioDeFeudis-gy9fd 2 месяца назад

perfect tuts...

@LytboxStudio Месяц назад

🙏

@Dhrubo_Jyoti Месяц назад

Thanks a lot.

@LytboxStudio Месяц назад

🙏

@user-wt6hp3cg8z 4 дня назад

Hello Jeffrey I am a beginner in WP from China, and I am glad to see your WP tutorial on RU-vid. 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?

@farhatmahi4509 4 месяца назад

You earned a sub

@getzon_in 6 месяцев назад

thanks usefull

@Maypalm 4 месяца назад

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

@ismailcakr3923 7 месяцев назад

dostum, teşekkürler

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

@SamFrysteen 2 месяца назад

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!

@parameshwarin5198 2 месяца назад

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

@millennialpregnancy 5 месяцев назад

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

@mdtaaibalam7272 4 месяца назад

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

@JoeyProulx 3 месяца назад

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?

@swiftwraith 7 месяцев назад

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 7 месяцев назад

Hey Anthony, check out Paul's video on truncating titles - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-q2E1BaE-ySE.htmlsi=ppg2VZYISmyp5ivh This video is a gem!

@iwbowden 7 месяцев назад

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 7 месяцев назад

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

@bobbyryandra 6 месяцев назад

Nice browser😮

@LytboxStudio 6 месяцев назад

Thanks, I’m loving Arc Browser!

@ClubMusicLive 3 месяца назад

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.

@chimchase 3 месяца назад

Can you search the loop grid to filter?

@JasonDelaLuna 7 месяцев назад

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

@LytboxStudio 7 месяцев назад

Here's a couple: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PbL13b5YjIE.htmlsi=iiraRh1XD2PYLNu6 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-C1u47jCppcw.htmlsi=gqsCyJ8-cO8n2GZE These when it was first launched. It's been refined since then

@BIGJUNO_DESIGNforDOGS 4 месяца назад

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

@igotslickshoes 7 месяцев назад

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

@LytboxStudio 7 месяцев назад

Yep you can

@jakubkrivohlavy9012 6 месяцев назад

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 6 месяцев назад

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ExW-x0lVLzg.htmlsi=xWvdXU11XH3WK2tK

@user-ww9qu7ke9q Месяц назад

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

@mohsinworld 6 дней назад

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

@jhinson 7 месяцев назад

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

@LytboxStudio 7 месяцев назад

This is a great idea for other video 😉

@HrvojeLivnjak 6 дней назад

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. :/

@NickDemty 2 месяца назад

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!

@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

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

@kevintriik8271 3 месяца назад

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 3 месяца назад

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

@uasha68 7 месяцев назад

👍👍👍

@LytboxStudio 7 месяцев назад

💪😎

@MadMarcTV 6 месяцев назад

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 6 месяцев назад

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

@ytstudio-d 6 месяцев назад

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

@LytboxStudio 6 месяцев назад

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

@ZetaVids 2 месяца назад

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

@blackgirlmagicnmore 3 месяца назад

Does this only work on shop pages?

@LytboxStudio 3 месяца назад

It also works with regular posts

@viralplug2061 2 месяца назад

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.

@CarlosRodriguez-vg2ob 3 месяца назад

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 3 месяца назад

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

@CarlosRodriguez-vg2ob 3 месяца назад

@@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 3 месяца назад

@@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 3 месяца назад

@@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 3 месяца назад

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

@minimeiauw4 4 месяца назад

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?

@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

@ChandanSingh-jy8vv 3 месяца назад

there is no opptiom in my elementor loop

@AhsanFaraz-fz3kp 2 месяца назад

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

@LytboxStudio Месяц назад

That's a whole other tut 😉

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