Introduction: Building a WooCommerce Product Filter
Inside this video, we are going to create a category and tag filter just like this for WooCommerce products. What's up everyone? I'm Jeffrey at Lightbox, and inside this one, we're going to keep things really simple. We're only going to be using Elementor Pro and WooCommerce. No additional plugins, no add-ons, and no snippets of code that you need to add. We're going to only be using new features inside of Elementor.
I'm going to show you a few things. I'm going to show you how to create a product grid that looks like this and then how to add category and tag filters to it. This way, you can make your shop pages for your WooCommerce sites a lot more interesting. So let's have some fun, and I'll show you how to do this.
Enabling the Taxonomy Filter Feature
To get started, there's a couple of things we need to do. First, head over to your Elementor settings, and then from here over to Features. We got to scroll all the way down until you find the taxonomy filter. This is what we're going to be using for our category and tags filter. It works for blog posts, but it also works for products as well. So go ahead and turn that to active.
Now, previously before we had, we would have also had to activate the loop grid, but it's no longer here inside our features. It's already automatically turned on inside Elementor. So let's go ahead and save.
Preparing WooCommerce Products and Categories
The next thing we got to do is you got to make sure you have your product set up. So, first, add all of your products, or at least add some to get started, and make sure your products all have categories. Once you have all your products added and you got your categories connected to your products, then we're going to go over here to templates and to Theme Builder.
Creating the Product Archive Template
We are going to build a product page, a product archive. So go over here to your product archive, and this would be something like you would see on the shop page right here that shows all the products. I'm going to click new, and let's go ahead and give it a name. I'm going to call this a shop page. Let's create the template, and then we can start building from here.
Now, I'm not going to use any of these pre-built templates. I'm going to build everything from scratch. Now I do have one that I've built already here. What I'm going to do is, just to make things go a lot quicker, I'm going to copy and paste the banner so that way we got, you know, a decent looking space to build this on. So let me copy this, and then I'm going to copy this opening right here. And then we're going to use this as a reference.
Now this is really important whenever we are building something like this, we're building a website, it's always good to have a reference close by—not necessarily that we would copy, but one that we could use as a guide. So let's go back over to our page.
Building the Loop Grid Item
Let me add a container. I'm going to add some spacing around this container. Let me change this to rem, and I'm just going to put two rem around, just so that way we got some padding going on. Next thing, we are going to go up over here and we're going to search for the Loop Grid widget. I just type in Loop and then we're going to drop this widget in here. And this is how we're going to build our product card. In fact, this is the only thing I use now for product and post cards because it just works so well.
Let's go ahead and click on create a template. Go ahead and select on Save, and now let's start dropping our elements inside here. If we go back over to our example, we got an image, we got the title, we got the button, and then we got the prices. So we're just going to drop these elements inside there.
First one, I'm going to drop an image. Now you could use the featured image, I like to just use the regular image because I feel like I have more control over it. Plus, this gives me a chance to show you how to add more dynamic content. Next we'll add the product title. So let's go back over here. You could either add the post title, but again, I'm going to use my basic widgets. I just prefer to use my basics and use a dynamic tags. Again, it just goes to the control that I have, and it works for my system right here. So we'll just leave that.
Next, we need to add the button, and then the price. Now the thing is, we have the button right here and the price, and they're going horizontally. In order to do that, we have to drop in an inner container. That way, we can make sure they're aligned horizontally. So let's go back here and we're going to drop in an inner container. Or just a container, but since it's inside of a container, it turns to an inner container.
All right. Now let's go ahead and drop in a button. I'm just going to use a regular button here, and then I'm going to go and drop in my title right over here as well, another header. Okay, I need to flip these around, and if you kind of have a challenge moving things around, open up your Navigator right here. I always like to work with my navigator, especially when we're using inner containers. It just makes things a whole lot easier to manage. All right.
Connecting Elements to Dynamic WooCommerce Data
Let's start from the top and work our way down. First let's go to our image. We're going to click on this dynamic tag right here, and then we are going to go down to WooCommerce product image. Now we're not going to see the product yet, we're going to see that in a moment. I'll show you how to do that, but it's okay. What I want to do is I first want to set it up for the height, and I'm going to get all this put together. So I'm gonna, let me start this off at 350, and object fit I'm going to put cover. Now it's really important when we are adding images for like product grids, anything with a grid, that we do use height and cover for the object fit. That way everything is equal size, because the images that you add, they might be all different ratios, different sizes, and we don't want a grid that is all choppy, we want everything nice and smooth. Okay.
Next up, let's go over here to our title. And again, we are going to go to the dynamic tags. We're going to use dynamic tags for everything. Scroll all the way down to WooCommerce and look for the product title. There we go, we got our product title here. It disappeared, but again, don't worry about that, we're going to see it in the front end soon. Once we save everything, we can align this to the left. And if you got global styles, go ahead and use them. Let me see, for this one I'm going to put a small title, that should work fine.
Now let's do the same for our button and our price. We're going to go over to the button. Let's go to text. We could go ahead and say add to cart, and then on the link we're going to go over here to this dynamic tag, scroll all the way down to WooCommerce and select on add to cart. Now we have our add to cart button.
Styling the Product Card
Okay, we could go here and style it up. I already have my default styles. Let me see in my example, what color is... okay, I use a dark blue with the full radius. So let's go ahead and replicate that. I'm going to turn this white, the background this dark blue right here, and then for my border radius I'm going to put 50. Okay.
Now let's go over to our price. Select on this, and same thing, we're going to go to our dynamic tags, scroll all the way down to WooCommerce, and then we're going to put product price. And here you're going to want to change the HTML tag. I left it on the H2 for the title, that's totally fine. We do not want it to be H1, H2, or maybe H3 will be fine, but H2 I would leave it there. But now for the price, we're going to want to turn this to either a div or a span. I'm going to put it as a span, and then I'm going to set up my globals right here. I'm going to change the color and then I have, I have a small text somewhere, yeah, I'm going to use a small body.
Okay, let's go ahead, save and go back so we can see what things look like right now. Okay, it's not showing, and there's a reason why it's not showing. Let's go over here, click on the icon wrapping around everything, because this is our Loop Grid widget here. By default it's on Posts, so we need to change this to Products, and now we can see the product showing. I probably should have done that in the very first place and we would have seen it working, but here we go. We got it going.
And another thing we could do as well, let's go back over to our template. Click on Save. We could give this template a title, and I do like to give it a title because by default, we have this long string right over here. I'm going to call this my Shop Grid. Okay, cool.
Now we can start styling everything up, but because we're using the dynamic tags it sometimes might not show. Sometimes I'll refresh it and it'll show, it's just one of those glitches that happens, but if not, no worries at all. So I'm going to go to this image right here, to my Style, and let me add a border radius. I'm going to put 12 pixels border radius right here. All right, cool. That's looking good. This Add to Cart, it's way too big, so let me fix that. I'm going to go to my typography, and I do have a small text over here. Okay that's looking good.
Finalizing Card Layout and Spacing
And now we need to fix up all the spacing that's happening here. So what I'm going to do is first, I'm going to go to the outer container and I'm going to use my gaps. I'm going to change this over to rem, and I'm going to put two. You know what, two is too much. Let me go ahead and put one. All right, that's really 16 pixels right there, since we're using rem.
And then now we need to fix this Add to Cart. Since we're using that inner container, we could go here, click on the container, and if yours is like this, just go ahead and change the direction. We want to go to our align items to make sure that they are centered. Let me move that up. And then we can go over to our gaps. Again, I'm going to use rem and let me go ahead and just put one. And already this is starting to look clean. So now I'm going to update this, let's save and go back.
You know, I'm going to make this into four. I want to have these a bit smaller. So by going to the loop grid, we could set up everything here. First we can set up things with the columns. I'm going to change this to four, this looks a lot better right here. And then I'm going to put eight, because there's eight products right now on my thing. You can go ahead and put more.
Refining the Grid and Image Size
Now there are some other options here like apply alternative template. I'm going to do a separate tutorial on this because that'll take us away from what we're doing inside this tutorial. Going to leave it there. One thing I do want to do is now that I have all four columns, I want to reduce the size of this image right here. So let me just jump back over here, go back to edit my image, and then I'm going to reduce the height. Let me find something that looks good. You know, I'm going to leave it at 250. All right, let's save and go back.
Adding and Positioning the Taxonomy Filter
Now we have our product grid is looking clean. The next step is let's put that filter up over here. So go over here to your container and you can go ahead and label this as well. I label all my containers usually in my workflow, we're just trying to go a little bit quicker today. Now go over here to your widgets and type in tax, and you're going to see the taxonomy filter. Let's drop this right above our grid. And you want to make sure the filter is right above the loop grid right over here.
Next up, we are going to select a widget, which is Loop Grid one, and then select the taxonomy. And for this one, I'm going to do product categories. Now you can do the same thing for product tags, product type, shipping classes, so you have more availability. The only thing is we can only choose one. So this is for a filter that is definitely more minimalistic.
Okay, so our filter shows here and right away we can see it's working right out of the box and pretty quickly. Let me go ahead and add some spacing here. I'm going to go to my filter, advanced, and let me add some padding on the bottom. Let me go to rem, and I'm going to add just one rem on the bottom. Give a little bit of breathing room. In fact, let me actually add two. Now from here we can style everything up.
One style that I do like to do is the pill form. So let's start over here with content. Okay, so we got a couple different options here. We have the direction, we can go vertical, and we can go horizontal. Now the vertical is actually pretty dope if we're going to do something like, let's go here to my shop grid, say we're going to put this on the side. Now I could go ahead and shift this around, we could actually create a filter here on the side, so this is a really good use case for it. For now, we're just going to style it up at the top. We're going to create that pill type of style.
A couple of the options we have are going to be the alignment. You could align it to the left, center, or we could stretch it out. I like to keep it in the center or to the left, that's where I usually keep it. It's better for user experience.
Advanced Filter Settings and Mobile Responsiveness
Then we also have the settings. This is one I like to keep on just by default, just in case if we do have an empty item, we don't want that to show. Taxonomy children, well I don't really use them too often. I try to keep my categories and tags minimal. I know there are some sites I've ran across where you got like 50 categories and it gets quite a bit overwhelming and obviously we can't really show 50 categories and a bunch of children categories, so you can go ahead and show but I'll leave this on hide.
The next thing is we could put this first item in, which is all, or we could remove it, or you could go ahead and change the text. So I could go ahead and call this 'all products' right here. Now say you do got 50 categories and you don't want to show all of them, you can limit them like right here. Let me put two, and you can see that it only keeps two plus the first item, which is just by default everything.
And then the next one, this one is really good, I'm glad that Elementor put this in, and that is going to be the horizontal scroll. Now we don't really need it on desktop unless if you do have a whole lot of categories that are going off screen or like breaking the line, but this is really helpful when we get to say mobile, maybe even tablet as well, because you see they're breaking right here and that makes it kind of hard to use, but if we enable this, now it is going to scroll. So when you look at that in the front end, the users on their phone, they could swipe the category list right here. So that's really, really useful. I'll leave that one on.
Next to style it up and to get that pill form right there, well we could go ahead and create space. I'm going to give it a bit of space, I'm going to leave it at 24. I'm going to set my typography. I'm going to use this button right here. Let's go ahead and add the colors to it. And then I'm going to set this border radius, so I'm going to make this 50 pixels right here. And then for padding, I'm going to switch this over to REM. And you guys are going to notice I'm using REM a whole lot more. In fact, I got a video on that coming up. For right now, let me go ahead and do this. I'm going to put, let's say a point... no, I'm going to put 0.5 on the top and bottom, and then let me do 1.5 on the right and left. We can't really see anything yet, but I like to set this up in the very beginning because it's going to make the next step a lot easier when we add our backgrounds.
So let's add the background type, and I want the other ones that aren't selected, I want them dark so that way they're easy to identify. And let me change the text to white right here. Okay. So now next, and we can see how it works right here. Okay, we got the hover. Let's go over to the hover, and for the background type on the hover, I'm going to turn to this off-blue right here. But also the text I want to keep it white. There we go. So now this looks clean right over here.
And active, let's go ahead and give this a text... let me see, space blue, and then I am going to give the background this off-white. So now we got this pill right here. It's very light, I want it to be really easy... you know, I want it to be very minimal but very identifiable which one is actually active. And that is it.
Final Results, Alternatives, and Conclusion
We have this. Let me go ahead and, well you would add a condition, put it into your shop page, and then use that. But I already have one added to my shop page, so I'm just going to put save and close. Let's take a look in the front end, and now we have this working filter right over here. Now, this is great for like a basic commerce site with not a whole lot of products, just something that's kind of clean, makes it easier to use and navigate. You can't do anything more complicated with it though. If you do want a more advanced filter, I would suggest checking out something like Jet Filters or WP Grid Builder. Those are going to be able to give you more robust type of filters for bigger e-commerce sites. But this right here, it just gives a nice, easy to use experience for a very clean and minimalistic e-commerce shop.
I hope you found this video helpful and I hope that it helps you to create more interesting shop Pages for your WooCommerce site. Now if you have any questions or if you're stuck or anything like that, please drop them inside the comments. I'm happy to help everybody out. And if you did find Value inside this video, then please don't forget all that good YouTube stuff you know like And subscribe. It really does help to support the channel and I super appreciate it. Well that's it for this video and I will be back soon with another one. Thank you for watching.
