Skip to main content

How to make a Horizontal Product Filter for WooCommerce

Danielle Di-Tommaso
April 25, 2022
acsell product filter developer

Looking to make your WooCommerce store more user-friendly? A positive ecommerce user experience is critical to the success of your online business. One of the best ways to improve the usability and customer experience is to add filters to the products on your WooCommerce store. 

In this article, we’ll explain what product filters are, what they can be used for, and how to implement a horizontal product filter on a WooCommerce website. We’ll also discuss the plugins that allow you to create these filters and share some best practices to follow. 

What are Product Filters? 

Product filters allow your customers to refine product searches by filtering products based on multiple attributes such as price, color, size. Using filters on your store makes it easier for your customers to navigate products and quickly find what they’re looking for. 

A WooCommerce horizontal product filter is a product filter displayed on top of your page vertically. It is an alternative to the traditional sidebar filter on the left or right side of the page.

Sidebar filters
Horizontal filters

Reasons why adding product filters is beneficial for your ecommerce business 

Improve website navigation 

Shoppers want to be able to search for products the way they want. The most effective way is to filter products based on attributes but also factors like discounts.  

Increase conversions

Strategic user experience has the potential to boost conversions by as much as 400%. Product filtering allows customers to discover all products that match their criteria, giving them more choice to zero in on that perfect product, and resulting in a sale for you. 

Reduce bounce rates

89% of consumers shop with a competitor following a bad user experience. An engaging product search experience driven by WooCommerce horizontal product filters keeps shoppers on your website for longer.

Support your SEO

Search engines rank indexed filters over multiple pages and navigation menus. So, product filtering can do its bit to rank your most important product pages at the top of search engine results 

How to add WooCommerce horizontal product filters

There are many uses of product filters that make them a valuable addition to your WooCommerce store. They allow your customers to browse different options, such as colors or fabric swatches. This can give them more ideas about what they can potentially buy and may influence their choice of product even as they’re going through all the available options. Filtering by attributes such as category or price serves shoppers that have a reasonably good idea of what they want to buy. It promises an efficient search, which your customers are sure to appreciate. 

When it comes to WooCommerce stores, there are two main ways of adding product filters: adding a custom filter using PHP code or using a plugin. The first route is worth your while only if you have PHP programming knowledge or an in-house developer for the task. The average WooCommerce store owner is better off using a plugin. It is a no-coding solution – you don’t have to bother with CSS, HTML, and/or PHP programming.

A plugin makes the process of creating custom product filters with advanced search capabilities easy. You can add multiple selections and attribute-based filtering using dropdown lists and checkboxes more quickly and cost-effectively than if you were to code and troubleshoot your way into achieving the same results.

The top product filter plugins

The default product filter widgets from WordPress are insufficient to provide online shoppers a good filtering experience on websites. Ecommerce business owners leverage product filter plugins for WooCommerce to enhance site usability. Here’s a look at the four best product filter plugins for WooCommerce.

1. Acsell

Acsell Product Filters

With Acsell, you can filter by items, featured products, stock, attributes, tags, price, and photos with advanced filters. The plugin allows you to apply multiple customized filter types at once for more efficient product searches. And you can construct custom filter groups with any fields you want and apply them to individual pages or globally easily – no coding knowledge required!

If you’d like to create WooCommerce horizontal product filters, you can do so easily for each category page and group filters together. Here too, you can apply a single set or group of filters to all products or to each page individually. Your customers can filter attributes within the browser instead of being redirected to another page.

2. Product filters for WooCommerce

Product Filters for WooCommerce

The paid plugin allows your customers to filter by category, attributes, tags, taxonomies, price, and product availability. Filtering elements include a price slider, checkbox list, dropdown, radio box, text list, box list and others. Powered by AJAX, the plugin sorts products without reloading the page. It implements adaptive thumbnail images that adapt to whatever screen size the customer is using and does it seamlessly.

However, Product filters for WooCommerce is not known for its customer support and lacks proper documentation. If these factors matter to you, the plugin may not be the best option to create WooCommerce horizontal product filters.

3. YITH WooCommerce Ajax Product Filter

Yith WooCommerce Ajax Product Filter

The free version of the plugin allows you to add product filters like a list, drop-down list, color, label, and more. You can choose from elements like active filter labels, preset filters and a filter reset button to create WooCommerce horizontal product filters. The plugin offers infinite scrolling which replaces pagination on the shop pages you want. The premium version offers more features like a price slider and additional layouts. A downside is that the plugin has been reported to slow down websites, which could be a deal-breaker as far as customer experience is concerned.

4. JetSmartFilters

JetSmartFilters

The plugin works with Elementor and Gutenberg to help you add customizable filters to your product pages, like a sorting filter, rating filter, alphabet filter, date range, and others. Your customers can apply multiple filters to find relevant products instantly.

This WooCommerce horizontal product filter plugin offers the option to organize category filters and their sub-categories into one hierarchy to show a relative path. The custom field types you can use include checkboxes, switcher, icon picker, color picker, radio boxes, and more.

Acsell is the best way to create product filters

A comparison of the four top plugins for creating product filters reveals Acsell to be the best choice. It’s extremely user-friendly, enabling you to customize your product display and navigation without having to use any code. It allows for a great deal of customization so you can create filters and product categories aligned tightly to your target audience.

Acsell takes the full customer experience into account with its in-browser filtering technology which shows products automatically without reloading the page. Adding the plugin to your site doesn’t slow it down. A highly rated support team has your back with detailed documentation, which isn’t the case with other product filter plugins.

The plugin is easy to set up for adding WooCommerce horizontal product filters. It is recommended that you start with the Config Wizard to create a set of global filters that will be available across your whole website. You can modify these manually afterwards and create specific filter sets for individual pages of your website.

Add filters

You can edit your filter template based on what you think looks best and is more user-friendly for the horizontal filter layout. For example, you can display some options in one or two columns, horizontally, or wrapping as they fit.

Edit filter template

Rearrange filters according to your preferred appearance on your desktop and mobile sites.

Rearrange filters

Why you should experiment with product filtering

Experimenting with filtering implementation is important for a number of reasons. For one, there are different types of filters, including category-specific filters, thematic filters, and compatibility filters. The best type of filtering for your store depends on the type of products you sell. For example, if you sell compatibility-dependent products, such as adaptors for certain brands of laptops, then adding compatibility filters will make it possible for shoppers to see only those adaptors relevant to their specific laptop. 

For another, you can determine whether you should choose a Woocommerce horizontal product filter or sidebar filtering layout. Usability tests have found that the horizontal filter toolbar outperforms the sidebar. As the horizontal toolbar is placed above the products, it is more easily found. On the other hand, the sidebar tends to be overlooked or ignored by shoppers. A long list of options can also lead to an uncomfortable and visually unattractive structure but this issue can be overcome by implementing filters compactly.

A horizontal layout usually looks better and is more user-friendly when there are fewer categories or attributes, and is more suitable for online stores that sell apparel and home decor. Although horizontal filters are not very popular yet, according to a study, they’re a growing trend with 24% of the top 50 U.S. stores favoring them over traditional filtering sidebars.

The quality of implementation matters in delivering an easy and enjoyable product search experience. Weighing the pros, cons, and suitability of filtering implementations can help you make the right choices and boost your bottom line. 

Best practices for product filtering

An effective filtering system makes it easy for your customers to find products relevant to their searches. If your store has many products or your product can be filtered on the basis of several attributes, then you may want to ensure that the search experience isn’t confusing or overwhelming for customers. These best practices of product filtering can help you make the right decisions on optimizing product exploration and discovery: 

  • A custom-designed dropdown that displays checkboxes for each filter value is ideal for important options like colors, materials, brand names, and so on.
  • Multiple filter values allow shoppers to narrow down their product search with fewer clicks than if this option wasn’t allowed.
  • Live updates to product lists when a filter is activated guarantee a better customer experience.
  • Placing important filters at the top saves customers the time to go through or scroll down for the criteria that matter most to them.
  • Choosing the specific number of items per page that must be displayed in the filtered search results works well for stores selling a large number of products.

Improve product findability and customer experience with horizontal filters

As ecommerce store owners are increasingly adopting horizontal product filters, it’s worthwhile to assess if this layout can enhance your site’s user experience. What is certain is that they won’t miss the filtering options as they might with the traditional sidebar.

No other plugin does WooCommerce horizontal product filters better than Acsell. It is unmatched in personalization options, site loading times and ease of use. In fact, you can reduce loading time by more than 50% by using Acsell.

Get started today to see Acsell in action.

Acsell Product Filters

Start your Free Trial Today

This is a 7 day free trial, so you can try Acsell Product Filters for yourself.

  • 7 day Free Trial Acsell Product Filters Plugin

  • No credit card details required

Join our free newsletter

Interested in learning more about how you can make your WooCommerce site even faster?