Instructions for creating filters for products

In the product category page, we should create a filter for the product by price, attribute, etc. The filter will help customers easily find the product that matches their needs. In this article, I will show you how to create a product filter by price and attribute.

Before doing this article, go to the interface store to install yourself the Basic Store interface .

Product catalog page

Create filters for products

After installing and activating the  BasicStore interface , go to the menu  Appearance  > Widgets . You will see on the right there is a Sidebar with the name Shop Sidebar .

On the right side, drag the following Widgets to  the Shop Sidebar  in order:

• Active filter : let it show the filters that are applied.
• Filter products by attributes (2 pieces) : to apply product filtering by the Capacity and Color attributes that I created in the previous post.
• Filter products by price : to filter products by price.
• Recently viewed products : To filter out the products the customer recently viewed.

Then you set up the widgets added to the Sidebar as follows:

• Product filter active : just change the title to “Filtering”.
• Filter products by attribute (2 pieces) : One you leave the title “Capacity”,  the attribute  selects “capacity-volume”. The rest you leave the title “Color”, the attribute “quick”. If the product has multiple attributes, you can add an attribute filter this way.
• Filter products by price : just change the title to “Filter by price”.
• Recently viewed products : You can change the title and edit the number of products displayed.

After each setting, remember to press the  Save button !

Filter products off the homepage

Now you go out of the Shop page, you will see the widgets appear on the right as shown below.

Try filtering products by attribute as well as price to see the results. When you filter products, the Filtering widget will display the filtered content.

summary

Above is a guide to filter products using available WooCommerce widgets . To make these filters look better, you can use professional WooCommerce themes. Good luck!