How to make great WooCommerce Product filters that sell

If done right, product filters drive sales if done right. eCommerce product filters in eCommerce are deceptively simple. However, they are amongst the things that are more than meets the eye.

According to the Smashing Magazine report, only a fraction (around 16%) of eCommerce marketplaces nail down the search experience. Even less are making the most out of tools like product filter and make it work for the benefit of the eCommerce marketplace.

In this article, we will talk about:

• Why are fine-tuned product filters vital for the thriving marketplace?
• How to make effective product filters for WooCommerce?

Why do you need WooCommerce product filters?

On the surface, the product filter’s primary purpose is to narrow search results from general to specific. That function drives product discovery and leads users to the eventual purchase.

But there’s a catch.

Most of the eCommerce shoppers don’t really go “from A to B” to buy a specific product. With some rare exceptions, users don’t come straight to Lenovo ThinkPad X1 Extreme 2nd Gen (20QV0012RT).

For the most part, users tend to browse and look through various options based on key criteria (like price, brand, availability, quantity, etc.). Because of that, users need proper tools to find what they are looking for and buy it.

What does it take to make product filters for WooCommerce right?

Well-made product filter search results is a sign of a fine-tuned user experience. Overall, there are four criteria on how to make good eCommerce search filters:

1. Applying a faceted search.

Simple product filtering gives too broad results. In many ways, it is rather inconvenient for the user.

On the other hand, if you add numerous options to narrow down the selection by attributes, categories, and themes — chances that the user would find what he is looking for and buy it are much higher.

2. Understanding product specifications.

The WooCommerce attribute filter divides between category-specific and thematic entries.

The key is the relevance of the attribute for the particular niche. More on that down below.

3. Understanding how users are looking for products to determine filtering priorities.

This particular aspect includes:

1. How does the user found the product? What are the features critical for finding a particular product? For example, type, model, brand, color scheme, and the likes.
2. Which attributes matter for them the most? Usually, the sequence goes from the most important to the least. For example, type of the product, its general specifications like size and color, price range, availability, etc. Then it goes deeper into product features like the type of USB port, storage space, and the likes.

4. Making the product filters interface accessible.

This one is short and sweet.

You need to make an interface that will be usable without user wondering how to filter this or that. More on that down below.

How to make the most effective eCommerce product filtering?

1. Use category-specific and compatibility filters for the search foundation

The lack of focus on product key attributes is one of the most common woes of a simple WooCommerce filter plugin. Instead of narrowed down results, you get everything and the kitchen sink. This approach results in user frustration that will probably lead to bounce off.

For example, if you are selling toothpaste, you need to attach appropriate filtering attributes (like fluoride or non-fluoride, size of the toothpaste tube, etc.). This way, the users would be able to narrow down the selection to a tee.

Because of that, it makes sense to add category-specific filters and elaborate on them with compatibility filters.

How to determine the right category and compatibility attributes for WooCommerce filter by category?

• The most effective approach is going from broad terms to specific. You can start by assigning distinct attributes for each product in the category.
• The general rule of thumb states that any distinct specification of the product presented in a product list item should turn into a filter. For example, if it is USB flash drives, then it would be good to include platform support, space capacity, featured brands, and so on.

2. Add theme-specific filters

On the other side of the filtering spectrum is so-called thematic filters. From a technical standpoint, thematic filters are more or less creative use of WooCommerce filter by tag.

WooCommerce filter by category revolves around actual attributes of the products. On the other hand, thematic filters relate to the presentation and conceptual purpose of the product.

• The best example of this concept is seasonal sales. For example, “gifts for Halloween” or “1950s throwback clothes”.
• Anything that can characterize the product’s purpose, worth, condition, or style is a ready-made thematic filter.

However, the ambiguity of thematic filters makes it challenging to determine relevant thematic filters correctly. But that’s a mountain worth climbing to the very top.

The thing is — well-made thematic filters are incredibly useful at engaging shoppers and potentially driving them to buy more.

How to figure out thematic tags to boost WooCommerce filter by category?

• Break down thematic attributes by style (stuff like a casual, futurist, urban, and so on), season (summer, Christmas, etc.), usage conditions (arctic, underwater wear, and so on).
• Filter by purchase-related stuff. In a way, it is a variation on the WooCommerce price filter. You can use such tags for value for money, high/low-end, cheap but cheerful, and the likes.

3. Provide range filters for quantifiable attributes + add indexer feature

Most of the consumer products, such as clothes or electronics, come with quantifiable attributes like size, depth, diameter, and so on.

Because of that, product filters for WooCommerce with range operators can be beneficial in rounding up possibilities. One needs to set the boundaries and get the appropriate selection.

In addition to product specifications, you can also use the same approach to range prices and dates. For example, if you are looking for a cheap pair of shoes — you can easily set the price threshold and get something within that range.

Setting the WooCommerce price filter is a no-brainer because the price range is one of the most effective methods of filtering.

On the other hand, if you are dealing with products with a limited shelf life (like fruits and vegetables), it is a good idea to add “best before” filter.

Similarly, you can use checkbox filters to round up posting dates of the product (if one looks for something brand new) or their release dates (for example, if one looks for vintage book releases).

The other important related feature is an Indexer. While it seems obvious — it is much more convenient when the user can see how many items of the particular products are available.

4. Keep active filters at the top + “reset all filters” button

Here’s an uneven mistake. The number of WooCommerce filter by attributes shown at once (numerous categories and subcategories, etc.) result in users losing track and bouncing off.

It’s not a good thing. The more user backtracks through the filters, the less motivated he gets to make a purchase. This issue is especially the case in mobile where screen space is much more limited, and the filter list is in the dropdown hideout.

Because of that, it is a good idea to attach an additional filter section that shows active filters at the top of the page, right in front of the user’s eyes.

There are several ways to implement it:

• At the top of the vertical product filter bar. This way, the active filters section will be a natural continuation of the regular one.
• At the horizontal bar at the top of the webpage. This approach makes active filters visually separated from the rest as a makeshift shorthand.

And one more thing.

Don’t forget about the “reset all filters” button. It is a little thing, but it greatly helps shoppers during the search. The thing is — product filters are a rabbit hole, and sometimes one needs a way out.

The “reset” button is the option that keeps the user on the same page and retains an uninterrupted shopping experience.

5. Add product rating filters

When it comes to commerce, there is always an element of casual distrust to the seller. It is a natural precaution that the product presentation might be misleading.

According to Smart Insights, one of the ways to deal with it is by adding filters for product ratings.

Here’s why it is a good idea.

• Ratings work well as a shortcut to better-received products. It helps to narrow down the selection with an emphasis on the quality of the product from the consumer’s point of view.

6. Truncate long search filter lists

Have you ever felt intimidated by the sheer volume of available filters? Well, the overlong filter list is one of the most damaging usability problems in this field. That’s a common issue with product filters for WooCommerce. It would help if you covered everything possible, and one of the unintended consequences is the bloated clutter of the filter list.

Here’s why. In the case of search filters, too many options sag the shopping experience. Users can get lost in the variety of filters.

There are three common mistakes:

• One endlessly long list of all available WooCommerce attribute filters. Frustrating.
• Filter section with excessive inline scroll space. Annoying.
• Null Filters with “zero” value — like you are looking for a cheap laptop, and there is an Apple brand filter with a zero at the tail end of the list.

That is why it is better to make those lists more compact.

• Truncated and collapsed filters give the user a leeway to model his journey through the search results. If he wants to look through available brands — he can open up that listing and so on.

There are several ways you can do it:

• Truncate filter list to 5–10 essential options (like the most popular models or best reviews).
• Collapse filters by categories in hamburger panel. For example, brands in the brand section and so on.
• Hide filters that have “zero” value in the configuration. There is no need to show filters that don’t have any use with the current filter set-up.

Here’s how to handle WooCommerce filter by attribute:

• Arrange filter hierarchy by category or other attributes. The best example is the “brand” category. You don’t want the likes of Asus and Lenovo present in all its variety. As a result, you get foldable categories that expand when the user needs them.
• Then go to the plugin editor, activate the collapse feature and set the number of items that trigger the truncation.

7. Apply the Search Filter widget on a typing box

Search query autocomplete is one of the workaround search features for the WooCommerce filter plugin. With a couple of letters to type — it gives a list of suggestions to boot.

This feature helps shoppers with getting closer to the desired product in a shorter time. And if there is yet another way to do — why not give it a try?

One of its main benefits is that it cuts off a couple of filtering rounds. In some cases, it can even help to get users straight to the product he is looking for.

From a technical standpoint, it is more or less Google Autocomplete mixed with WooCommerce filter by tag for convenience. It works just like a regular product filter, based on the product database and revolving around various product tags.

In conclusion

These are critical elements of making top-notch WooCommerce product filters. As you can see, the fine-tuned design of this element can play a critical role in making a marketplace more usable.

What is even more important is that the well-made search filters lead to shoppers finding what they want to buy.