According to a study, adding a product filtering system can shorten the user journey, increase LTV or CLV, and increase the conversion rate of an online store by 26%. Website filters are a tool that simplifies navigation through an online shop, helps a customer to find the product they need, improves behavioral characteristics, and can improve the visibility of the site in the search. A properly configured and designed filter shortens the user’s path, increases LTV, and increases the average bill and another project KPIs that generally affect business profits.
Which Filter Design to Select?
The two most common design of filter menu designs are:
- left/right sidebar
- horizontally above the products
You can combine both of these approaches to simplify and speed up the search for the right product. Thanks to its wide settings WooCommerce Product Filter plugin allows locating the filter on different parts of the website. You can do it both with the help of shortcode or use such page builders as Divi or Elementor.
An example of combined alignment on iHerb cosmetics shop.
Here is an example of horizontal alignment on Puma shop.
This is what vertical alignment looks like on the Tommy Hilfiger brand shop.
WooCommerce Product Filter plugin is a great solution for filtering any type of goods beginning from phones and clothes, food, vehicles, etc.
If we are talking about a large online shop with a wide range of products, then there will be many search parameters, so it is better to use the side menu filter. This option is suitable if you are selling electronics such as iPhones, Apple Watch, Mi Band, Lenovo, Samsung, and so on.
For online shops dedicated to the fashion niche, the top filter menu is more suitable, since there will be much fewer search parameters. Such filter location takes up less space and allows you to add more tiles with products in the search results, which plays an important role in making a decision.
If there is a brand filter, then it is worth highlighting up to the 5 most popular brands and only then displaying the list in alphabetical order. With the WooCommerce Product Filter plugin, you can also add a brand search thus speeding up and facilitating the customer’s task since there won’t be a need to scroll through the entire list to select the desired brand.
Checklist for Setting Up and Designing Filters
Correct filter working
The output must match the specified filter parameters. Test the operation of all parameters to avoid displaying irrelevant products and issuing with a zero result.
Make filter noticeable
Make the filter visible so that the user does not have to look for it on your site. For example, on the Zara website, you may not immediately see the filter button in the upper right corner.
Adding new filter options
When adding new parameters, the output should not be reloaded, and the previously applied filter should not disappear. The user’s focus must remain in the same places that there is no need to look for the desired parameter again. WooCommerce Product Filter plugin takes care of this important option. There are 2 ways to implement:
- Ajax content loading – when page content is automatically loaded from the database, without a visible reload of the entire page.
- Displaying the “Show” or “Apply” button after selecting a specific filter option.
Filtering and sorting are not the same things
Do not confuse sorting and filtering goods. These are completely different functions. The task of the filters on the site is to narrow the selection of products in the search results by a certain attribute, and sorting simply changes the order of the products in the search results according to a certain attribute (by price, by name, by promotion, by novelty, etc.). Separate these tools so as not to confuse users.
Filter options for different categories
WooCommerce Product Filter allows making parameters and their prioritization should be relevant to the product category and change depending on the selected category.
Display applied filter options
Show the customer exactly which filter options have already been applied. Also, allow resetting all parameters at once or individual filter settings. Like on Amazon when the selected parameters are marked bold.
If you decide on a Product Filter plugin you can select how exactly to highlight the selected filters. You can make them bold, make them to the top, or both methods. Besides, there are different opportunities to reset the filters.
Custom filters on the site
You should not be limited to basic filters(default WooCommerce taxonomies), you can add custom filters that will be useful for your target audience. The main thing here is not to overdo it and not be too smart with the names of the filters. You can add as many custom taxonomies as needed and create filters based on that parameters.
If you have many items in your online shop with a large number of various filters, allow collapsing and expanding the selection parameters. So the filters on the site will not look endless and intimidating.
So, when designing and configuring product filtering, you should take into account many nuances. But at the same time, if everything is done correctly, then the filters on the site can make the service more customer-oriented and thereby increase the conversion rate of the online shop by 26%.