When you have thousands, hundreds, or even dozens of products, it becomes very important to give your customers enhanced search functionality to find the product they want. One of the ways of doing that is to give them a way to filter search results. WooCommerce has filtering logic built right into it with the Layered Nav widget.
You'll need to have a few products on your site and at least some of those products will need to have global attributes set as per the Adding global product attributes recipe in Chapter 2, Adding Products.
If your products already have attributes set, then giving your customer the ability to filter the shop page or search page is very easy. You only need to add the Layered Navigation widget to the page.
- Go to Appearance | Widgets.
- Under Available Widgets, click on WooCommerce Layered Nav and then add it to the appropriate sidebar.
Note
WordPress themes can have multiple sidebars, and they vary on a per-theme basis. If you don't know which sidebar to use, a good place to start is by trying the main sidebar or primary sidebar. If you are still having problems, then the next best bet is to try each sidebar until you find the right one.
- Once the widget is added to a sidebar, it should slide open. At this point, you can change the Title, Attribute, and Display type. The defaults are perfectly good for this example, so I won't be changing them.
- Click on the Save button.
- Go to the frontend of your store and you should see the Layered Nav widget.
In addition to the Layered Nav widget, which is great for attributes such as color and size, there's also a WooCommerce Price Filter that is great for letting a customer only see products in their price range. There is also the WooCommerce Layered Nav Filters, useful when you have a ton of Layered Nav widgets. With this, users can see all of the filters in one place and disable them easily.
These widgets only work on pages that display a list of products, such as the Shop page. The widgets won't do anything or even show up on a page that doesn't display products.