WooCommerce provides some basic filtering and sorting capabilities out of the box. You can for instance filter products by category, price, rating etc and sort by price. However, that’s about as much as you get. If you need any advanced WooCommerce product filters, then you’re out of luck.
The good news is though, that we can implement some of these more advanced product filters using a WooCommerce plugin. Some of the options you may want to filter on are:
- Product color
- Product code
- Product size
- Product weight
- Product height
- Product length
- Product shipping options
- Product categories and tags
- Product rating
- Product locations
- And more!
Whatever the filtering that you would like to implement, this guide will show you how to get it set up. So let’s get started.
Step 1: Install a WooCommerce product filters plugin
As mentioned in the intro, the only way to get advanced filters setup on your site is to install a plugin. Here at WP Geeks we’re busy creating our own, extremely flexible, WooCommerce product filter plugin. Unfortunately, it’s not quite finished yet. In the meantime, we recommend that you install the WooCommerce Products Filter plugin from the WordPress.org plugin repository.
Go ahead and install the plugin to your WordPress website. Once installed, activate it and move on to the next step.
Step 2: Setup the filters in the plugin settings
Great! The plugin is now installed and activated. The next step is to setup the filters that you would like to enable on the store. Have a quick think about your products and the filtering options that would be most useful to your customers. It’s always a good idea to put yourself in to the shoes of your customers to best figure out how you should configure your store.
Have a good idea of the filters you want to enable? Excellent. Now Navigate to “WooCommerce” on the left hand side WP Admin menu and click the “Settings” submenu. Lastly click the “Products Filter” tab at the end of the menu.
You’re now presented with a whole host of options for configuring the plugin. The most important is the first tab of settings where you enable the filters. Based on which filters you decided to add to the store, go ahead and enable them on this settings page. You may also want to change the look and feel of the WooCommerce product filters. You can do this on the “Design” tab.
Here is an example of our demo store where we have enabled the “Price” and “Category” filters.
Step 3: Add the filter widget to your sidebar
Before the filters will show up on your store, they need to be added to a sidebar. To do this, we need to add a widget. Navigate to “Appearance” and then click the “Widgets” submenu.
Once you’re on the widgets editor, locate the “WOOF – WooCommerce Products Filter” widget and add it to your sidebar. There is some configuration you can do here. The most important is setting the title.
Finally, make sure the widget is saved to the sidebar. Here is what our demo settings look like for the widget.
Step 4: Test the WooCommerce product filters on the front end
By now you should all be ready to go and the filters will be activated on your store. However, it’s good practice to make sure it’s all running smoothly. Go to your store’s frontend and start applying the filters to the product results. Make sure there is no unexpected behaviour and it’s a good user experience.
You may have to do a few small design tweaks to get it looking on brand.
And that concludes this guide. Did you find it useful? We sure hope so. Let us know if you got stuck anywhere or if there were any issues that you encountered during the setup. We’ll be happy to answer any of your questions in the comments below.