Join Patrick Rauland for an in-depth discussion in this video Filter products, part of WordPress: Customizing WooCommerce Themes.
- [Instructor] One of the first things that developers who are new to Woo start or want to do, is write custom code to filter the shop page. They want to filter their products by color, or by brand, or by style. And while I applaud their drive, they're unfortunately trying to solve a problem that's already been solved. Filtering products is built into WooCommerce. You don't need to code anything, you just need to know where that functionality is located. The first thing you need to do, is you need to have attributes. Attributes are things that you can search for on a global level.
You can find these in the WordPress admin, under 'Products', 'Attributes'. I've already created these attributes for my store. But, to show you how, I'll create one new attribute. Once you create an attribute, you'll want to create terms for that attribute, or values. For color, we might have red, blue, and green. Now that you have your attributes you can add them to your products. If you we go to 'Products', and then let's go down to Polo Shirt, and if we scroll down to 'Attributes', we can now add extra attributes.
So I've already added, again, all the men's sizes for this polo, but let's add women's sizes. Go ahead and click 'Add'. And then from here, you'll want to 'Select all', and then I like to delete the ones that aren't applicable. So this polo doesn't come in extra-large, we'll delete that. And let's say it doesn't come in large yet, but it will come in a month, just delete that for now and add it in a month. We can save this as is. If you want to let people choose an option, which you'll likely want to do, click 'Used for variations' and then click 'Save attributes'.
Now that we have attributes added to all of our products, we need to add a widget to the sidebar. And that widget will do all the filtering. We need to add the Layered Nav widget. We can find this under 'Appearance', and then 'widgets'. We scroll down, 'WooCommerce Layered Nav'. Click on it, and you can choose which sidebar you wanna add it to. My theme has six sidebars, storefront has six sidebars, I'm gonna choose 'Sidebar' because that's where I want it to go. 'Add Widget', there it is.
It by default, chooses an attribute for you, as well as a title. I wanna change this to 'size-mens' and everything else is fine for right now. Click 'Save', and then on the front-end, when we go to 'Active Wear-Men', you'll see that we can filter by the size. Five that are large, five that are medium, a few small, a few extra-large and a few extra-extra-large. And we can click on these filters to see exactly which products are large. Or, we can see which ones are large, and small.
And these products come in both, large and small. If we select multiple filters, it will restrict them with an 'and' query. That means that both conditions need to be true. So if I selected small and medium, the product would have to have both of those. For some sites, this functionality might make sense. But for clothing, if I'm in between sizes, I might wanna see clothing that fits either small or medium, and go from there. We can change this by changing the type of query used in the widget. If we go to the admin, and click on 'Widgets', and then open up the Layered Nav widget, we can change the query type to 'or'.
Click 'Save', and then go back to the front end. And now if I click 'Large', and 'Medium', let's say, it'll show us products that are either large or medium, instead of products that are large and medium.
This course covers the fundamentals of building custom WooCommerce themes. Learn about using WooCommerce hooks, template overrides, PHP, and CSS to style the different store pages, and add custom imagery and icons to fit your branding. Author Patrick Rauland also introduces UX design techniques that encourage customers to buy, such as highlighting savings and adding social media icons for sharing.
- Selecting a base theme
- Matching theme colors
- Overriding and updating WooCommerce templates
- Using hooks
- Modifying your product page: images, tabs, icons, and more
- Modifying the shop page, including customer savings
- Modifying the checkout page
- A/B testing your changes