Filtering Products by Attribute in WooCommerce (Step-by-Step)

Want to make it easier for customers to find what they’re looking for? Allow them to filter products by attributes such as color, price, and size. Apart from attributes, filtering based on product categories, availability, and rating will further enable faster and more effective searches.

In this post, we discuss the benefits of adding product filters to your WooCommerce store and take you through the steps of enabling filtering by attribute.

Why should you filter by attribute in WooCommerce?

Filtering is more than a convenience feature – it can help drive conversions by enhancing the shopping experience on your website. Here are the key reasons to shape product browsing with WooCommerce filters by attribute.

To better organize your catalog

Filtering by attribute helps you organize your product catalog. It is especially useful if you sell variable products (like T-shirts in different colors and sizes) or products within the same category that are differentiated by a specific attribute. For example, if you run an online bookstore, you might split your catalog into categories like non-fiction, fantasy, and thrillers, but want to add an option for your customers to filter between hardback and paperback books within these categories. A WooCommerce attribute filter is a quick and easy way to do this.

To improve the customer experience for different kinds of shoppers

There are two main types of online shoppers that are likely to visit your eCommerce store – those with a clear idea of what they are looking for and those who are simply browsing your product catalog to look for anything of interest.

WooCommerce filters by attribute benefit both of these groups. They allow needs-based buyers to find products to their requirements quickly by filtering your catalog by only the product attributes that are of interest to them. For example, if you run a clothing store, they might wish to filter by a particular color or size.

For wandering shoppers, WooCommerce attribute filters are a handy tool to help explore your range in a more structured way. They enable these potential customers to filter by product attributes that are most of interest to them, making it more likely that they will come across products that they would like to purchase.

Essentially, using filters can kick-start an active search for products on your site. Rather than simply going through product images and descriptions, online shoppers can set filters as they wish and browse your catalog effortlessly. This makes for a more streamlined user experience on your site and can help to boost conversions.

To boost conversions

The user experience on your WooCommerce store has implications for sales. A great user experience helps decrease bounce rate, creating more opportunities for conversions. You can make the most out of the traffic you receive and support your sales goals.

As already mentioned, presenting online shoppers with WooCommerce attribute filters impacts their shopping experience positively. They can navigate your product catalog faster and reduce the number of steps to find what they want. Shoppers can tailor searches to their preferences, which can contribute to an engaging shopping experience.

By reducing the amount of time it takes for shoppers to find what they are looking for, you stand to increase the chance of them purchasing from your eCommerce store rather than taking their business elsewhere.

With this understanding of the benefits of WooCommerce filters by attribute, let’s see how to enable product filtering for your store.

How do you filter by attribute in WooCommerce?

The easiest way to set up WooCommerce filters by attribute is to use a plugin. Of the many plugins that offer filtering functionality, the WooCommerce Product Filter plugin from Premmerce stands out for its performance, support, and affordable price.

Here’s a quick look at the plugin’s features:

• Custom filters: You can create filters relevant to your product, choosing from a number of filter options, including price, color, category, tags, rating, stock availability, and more.
• Fast filtering: The plugin uses AJAX to filter your product catalog so that users don’t have to reload the page every time they make a filter selection. It is, therefore, much faster than other plugins that use forms, which have to be submitted every time a selection is made.
• Bulk generation of SEO-friendly pages: WooCommerce Product Filter enables you to generate separate landing pages for each filter selection, which helps to improve the discoverability of your site. To take this to the next level, you can pair WooCommerce Product Filter with WooCommerce Permalink Manager, also from Premmerce, to optimize the URL structure for each filter, improving their shareability and making them more intuitive to understand. This, in turn, can encourage Google to rank those pages higher than others, giving brand visibility and organic traffic a boost.
• Single widget for all filters: You can display all of your product filters using a single sidebar filter widget. This help customers select their preferred WooCommerce filters by attribute, hide the ones they don’t want, and modify selections conveniently.

Tutorial: How to set up filters by attribute using WooCommerce Product Filter

After purchasing WooCommerce Product Filter, you’ll be able to access it in your Personal Account on the Premmerce website. This tutorial takes you through the steps of enabling filtering by attribute on your online store using the plugin.

Download and install the plugin

Download the plugin archive and follow the steps below:

1. Log in to your WordPress dashboard and go to the ‘Add New’ page.
2. Click ‘Download plugins’.
3. Choose the downloaded plugin archive.
4. Click ‘Install’.
5. Click ‘Activate’.
6. Enter the license key (you can find it in your Personal Account) and click ‘Agree & Activate License’.

Set up the attributes you want to display in the filter sidebar

It’s important that you enable WooCommerce filters by attribute relevant to your product catalog. Including a filter that doesn’t describe any product feature or excluding one that applies to a number of products in a particular category will make it harder for customers to find the products they are looking for.

To set up filters for the attributes you want customers to be able to filter by, follow these steps:

1. From your WordPress dashboard, navigate to Premmerce > Product Filter
2. From the ‘Attributes’ tab, you’ll see a list of all product attributes that have been set up on your WooCommerce store. To activate filters for each one, toggle the icon in the ‘Visibility’ column. Note that the plugin will automatically hide individual attributes from the filter options if they are not used for any products in your catalog.

For each filter attribute, you can choose the field type – options include checkbox, radio button, color swatch, slide, and more. Simply select your preferred option from the ‘Field type’ dropdown list. The change will be saved automatically.

For example, let’s say you wanted to set up a color swatch filter for different colors of T-shirt on your WooCommerce store. All you would need to do is find the ‘Color’ attribute on the Attributes tab, then change the field type to ‘Color’. This will create a new button prompting you to set up how the color swatches will be displayed on your store front end, using every color option you have created for your ‘Color’ attribute.

Next, you’ll want to set up how shoppers can interact with your WooCommerce attribute filters by adjusting the options in the ‘Display as’ menu. There are five different options to choose from: Default, Dropdown, Scroll, Scroll + DropDown, and Hoverable Dropdown.

That’s it! You’ve set up your first WooCommerce attribute filter using WooCommerce Product Filter. You can make adjustments to any of your filters from the WooCommerce Product Filter dashboard at any time, either individually as described in the steps above, or by using the bulk actions list. To adjust multiple filter options in bulk, simply follow these steps:

1. Select all of the filters that you want to adjust the options for by ticking the corresponding checkbox.
2. Open the ‘Bulk actions’ dropdown menu and select the change you would like to make to the filter options.
3. Click ‘Apply’ to apply your chosen action to all of the selected filters.
4. Repeat until you have made all of the changes you would like.

You can also adjust the order in which your filters appear on the front end of your site. Simply drag and drop your different filters using the three lines icon at the right-hand side of the list. If you need to change the order of the attribute terms in the filter, or add additional terms for your customers to filter by, you can do this by navigating to Products >  Attributes and clicking ‘Configure terms’ next to the attribute you want to make adjustments to.

Examples of how attributes appear in the filter sidebar

Now that you’ve set up your attribute filters, you’ll want to check that everything appears as you intend on the front end of your WooCommerce store. Returning to the example above where we set up color swatches for the different ‘Color’ attributes available on our store, let’s take a look at how this will appear on the front end.

Filtering by attribute simplifies product search and helps conversions

Attribute-based filtering allows shoppers to filter products based on specific attributes like color, size, pattern, and other product characteristics so that they can find what they are looking for quickly. It improves your store’s user experience, SEO, and, most importantly, conversions. 

WooCommerce Product Filter from Premmerce offers all the features an eCommerce store owner needs in order to add intuitive filters to their site at an affordable price. It is the best plugin to enable WooCommerce filters by attribute. Use the solution to:

• Create attribute filters aligned to your products
• Organize all filter types in a single sidebar widget
• Ensure a great experience with instant filtering powered by AJAX
• Add new attribute filters, make bulk changes, and create custom filters
• Generate SEO-friendly landing pages in bulk, and ensure they have the optimal permalink structure by integrating with WooCommerce Permalink Manager

Try WooCommerce Product Filter now to take your site’s UX to the next level and drive more conversions. The plugin is available from $69.99/year with a 30-day money-back guarantee.