Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Creating and Styling the Filter Menu

Next, we’ll install and configure the filter widgets bundled with WooCommerce. Finally, we’ll wrap it all up with some styling.

Related Links

4.2 Creating and Styling the Filter Menu

Hello, and welcome back to this Tuts+ course on WooCommerce. In this part of the course, we're going to create our filter menu. We'll insert the widgets that come bundled with WooCommerce into the sidebar. And then we'll add some styling for our menu, so it looks good. So let's get started. So, before we start, let's just take a look at the Widgets that were included with WooCommerce. There are a couple of Widgets that are relevant here. There's a Price Filter Widget that let's people choose the price range that they're looking for products within. And then there's the Layered Navigation Widget that we can use to help our shoppers to choose between different attributes. And these use those product attributes that we've already set up. So let's start doing this in our site. So I'm going to open the admin screen in a new tab in my browser, and then I'll go to the Widgets screen. If I scroll down, widgets that I'm gonna be using are these. WooCommerce Layered Nav and Woo Commerce price filter. So let's start with the price filter. I'm going to add that side bar widget area by clicking here and add widget. And as you can see, that's been added to my sidebar widget area. I'll also add the Woo Comerce layout nav widget, again to my sidebar widget area, and here it is. Now, I'm going to add more than one of these .And I'll start with audience. So, I've selected audience and I'll save that. I'm going to add the widget again so that people can filter by color. And instead of having filter by as the title, I'll type colors. Save that. Let's have a look at my site after I refresh my screen. You can now see my filters have been added on the right-hand side in my sidebar. They don't look too good at the moment. I don't like the fact that they're all scrunched up together but we'll change that shortly with some styling. Now I'm going to add another attribute, which will be size, which people can filter by. And that will obviously only apply to the clothes. So, let's go in to my Admin screens, and Products > Attributes. At the moment I have three attributes set up which are color, range, and audience. And I'm going to add size. I won't enable archives for this because it's not going to go into my menu anywhere. That would be Select for Type of attribute and then I'll click on Custom Ordering for my sort order. So, I click on Add Attribute and my size attribute has been added. Now let's add some terms to it. I'll reorder these. And those should be displayed in that order. Now I need to add some sizes to my products. I'll start by filtering so I'm just looking at clothing. And I'll add the size attribute to my hoodie. So, I scroll down here to the product data meta box, click on attributes, add a size. I'll select all of them. I'm also going to add a color here, as well. And because the color navy isn't available, I'll add a new one. Finally, I'll look at my product. Take a look at it, and you can see in the additional information tab, there's some information about sizes and colors. And I'm now going to repeat that with some of the products. Now I've added some attributes to some of my products. I now need to add the size attribute to my widgets. So, I'll go into the widget screen, select the Woo Commerce widget, and add it to the side bar widget area. Here we can filter by size and I click save .Now, let's refresh the and you'll see that all my fields have been added Now at the moment, they're a big long list, but we can change the way that looks with styling. Let's just go back in to the size one and change the title. Next, I'm going to add a display, so that people can see what filters they've got applied. And there's another widget for that, which is this WooCommerce layered nav. I'll add that to the sidebar widget area and I'll move it up to the top of that widget area. Just close a few things down so I can see what I'm doing. I'll add that right to the top of the widget area. That's saved for me. I'll refresh my store. And until I apply some filters, you can't actually see it. But let's filter here. So you can see, I've got my active filters listed at the top. And if I select Grey as well, you can see that they're both there. At the moment, I'm not really very happy with the way this looks. There isn't much spacing between these lists here. It's a little bit scrunched up down here. And it's taking up quite a lot of space because of all this white space here. So let's add some styling. In my theme style sheet, there's an area for widget styling. Which includes some styling that I added in the previous course, to add featured products to the store. So let's add some styling for those widgets here. The first thing I'm gonna do is add a bit of padding around the lists. So these here, and these here. Just to space things out a bit. So let's check out what classes we need to target to style those lists. So here we have a Woo commerce layers not filters stiff. And the class has got Woo Commerce and widget layers not filters. Now further down If I scroll down here and inspect the element for these, there's a will commerce widget layered nav. Now, there's already styling in the plugin for these so I'll need to make sure I target it in such a way that my CSS overrides what's been added by the plugin. So let's go back into the style sheet I'm adding the sidebar class here, so that my CSS is better targeted and overrides what's been added by WooCommerce. And in each case, I want to target the unordered list inside my widget. Now I'm gonna copy this because the classes for both are almost identical. The only difference here is that the second widget, the one that I've used three times, Doesn't have filters at the end of that class. And then I'll add some padding. So I've added ten pixels of padding, top and bottom. I'll save that. Revisit my site, and refresh. And you can see, there's a bit more space. The next thing I'll do is add a float to the list items here so that like these up here they appear next to each other. Don't take up too much space vertically and fill up some of this white space here. So here I'm targeting the widget layered nav. And I'll add a float. I'll save that, refresh my screen. And you'll see they now appear next to each other. The next thing is to add some spacing between those list items. So I'll had a right hand margin. [SOUND] That looks a lot better. Next I want to do the same up here. Now let's have a look at these list items. These have a class of chosen and they always do because they're always chosen items. So, I'll use that instead of targeting the list item element, I'm going to add that element to this same declaration here. So that's the class for my widget, and then I've got the chosen class. And that applies that styling to both of those widget areas, or specifically to the list items in both of those widget areas. That's better. So I've got more spacing around them both. Still not perfect down here but I'm going to add a little bit of padding along each of these h3 elements that forms a widget title. And again I'll target this specific type of widget. So I'm using the widget layer nav class, combined with the h3 element. I'll add some padding at the top. Save, and refresh, and that's looking as it should be. Much tidier, and easier to interact with. So that's our filter menu added. We can go ahead and add more attributes to the products and then user will be able to find the exact product they want, really easily using this menu. The final thing to do is to tidy up this price filter widget. This is a bit cramped as well and needs a bit of margin around it. So, let's have a look at the output html. This is in the dare with the claffs widget price filter, and then there's a form in there That provides that bar that people can use to filter the price. So, let's target those. So that's the widget price filter class for the widget. And then form for the form inside it. I'll give it a margin of 10 pixels top and bottom, save my style sheet, revisit my site and refresh. And that looks much better, so everything is now spaced out nicely and the site's looking good. In the next part of the course, I'll conclude by giving you a run through of what we've done during the course and giving a recap of what we've achieved. See you next time, and thanks for watching.

Back to the top