How to Search and Filter Products by Attribute in WooCommerce

If you want to filter products by attribute in WooCommerce (and have those products show up as single products rather than variable ones) it simply can’t be done with a standard WooCommerce instal.

In fact, if you were to use the standard WooCommerce product filter and select an attribute, all variable products with that attribute would appear.

However, instead of an accurate search result showing the attribute they selected, they’d be shown a confusing range of products which seemingly has nothing to do with the selected attribute.

So to combat this, we’ll provide you with step-by-step instructions to add a better way to filter products by attribute on your WooCommerce store. This method will allow you to display product variations on the shop page as though they are separate products.

The plugins mentioned in this guide:

• Show Single Variations – Make product sales easier by displaying product variations on the shop page, filtered, and search results.
• WooCommerce Attribute Swatches – Transform your search and filter attribute dropdowns into user-friendly swatches.

Want to jump straight to the tutorial? Click here.

What’s an attribute?

Before we get into the tutorial, it’s worth addressing what an attribute is, so we can get our foundations right. 

Attributes are configurable properties of a product. An attribute can be anything from:

• Product color
• Size
• Weight
• Brand
• Or something custom to an individual product 

If you need additional help configuring attributes and variations, our Ultimate Guide to Product Variations will help.

So now we know what an attribute is, let’s look at why improving your product filter and, therefore, your customer experience will benefit your store.

Why upgrading your product filter will benefit your store

The product filter on your WooCommerce store serves as the perfect place to make your customer’s experience of your store quicker and more enjoyable. 

When browsing your store, a customer may be looking for a specific ‘type’ of product. How your filters behave in this situation will either aid their search or hinder it.

For example, if a customer on your store was interested in looking at your entire range of blue plant pots, they’d use your filter function to narrow this down. However, without an improved filtering system, they’d be shown variable products that have blue attributes, but the images and product names shown would be from the parent product, not the individual variation. 

With an upgrade, you’d be giving your customers more accurate results when filtering your products. Customers would be shown the individual variation with an appropriate image as single products instead of the parent product.

How to filter products by attribute in WooCommerce

So now we know the benefits of improving your product filters, next we’ll outline how to add the ‘filter products by attribute’ functionality into your WooCommerce store using a plugin. 

Set up your filter widgets

Before you can properly set up filtering by attribute, you’ll need to enable the filtering widgets on your online store. These widgets appear in the shop’s sidebar, tag, category, etc.

To enable these, do the following:

1. Go to Appearance > Widgets
2. Drag & drop the Filter Products by Attribute widget into the sidebar
3. Click Save

That’s it. Your store sidebar should now show the filter products by attribute widget. How this looks will depend on your store’s theme and settings.

Now that we have the basics set up, it’s time to enhance this feature by giving your customers better results with a plugin.

Show Single Variations gives your customers better results when they search for items in your store. When filtering your products by attribute, customers will be shown relevant product images, instead of the generic parent product.

Install Show Single Variations

To get started, purchase Show Single Variations from the Iconic store: iconicwp.com/woocommerce-show-single-variations

Then follow these steps:

1. Go to Plugins > Add New > Upload Plugin
2. Choose the zip file you downloaded, upload, and then click ‘Activate’
3. Once activated, you’ll need to enter your license key

Now that we have Show Single Variations installed, we can move on to adding better attribute filtering functionality.

Enable filter products by attribute

The first thing you need to do after installing Show Single Variations is to process your product visibility. This will set the default visibility settings for all of your products and variations.

1. Go to WooCommerce > Show Single Variations.
2. Click Process Product Visibility.
3. The process will run and notify you when it is completed.

Next, you’ll be able to change the visibility of each variation. This will allow you to pick which variations you want to show up as individual products when a customer uses WooCommerce filter by attribute.

1. Go to your variable product edit page of choice.
2. Scroll down to the Product Data section and click Variations
3. Expand the variation you would like to edit.

4. Here you’ll see some new checkboxes including, Show in Search Results, Show in Filtered Results, Show in Catalog, Featured, and Disable “Add to Cart”.
5. Click Show in Filtered Results

6. Then click Save Changes.

Now when you visit your shop catalog and filter by attribute, you’ll see the individual product/s rather than the parent product.

How to upgrade your WooCommerce product filter even further

The customization of your WooCommerce product filters doesn’t have to stop there. The standard WooCommerce filter widget displays individual product attributes as words or checkboxes, and while this functions well enough, customers benefit from visually seeing their filter choices.

A swatch plugin like Attribute Swatches gives your customers an easier and clearer way to search or filter items in your store. Instead of simple words or checkboxes, customers can filter with swatches. This makes it much quicker and easier for them to find the product they’re looking for.

Visual learner? Watch our video about WooCommerce Attribute Swatches here:

Another option for adding advanced attribute filters is to install the WooCommerce Product Filters plugin. You can use it to add filters for any type of product data, with a wide choice of filter styles such as sliders, checkboxes, dropdowns, radio buttons, clickable images, and text labels.

It also improves user experience by displaying the filtered products and variations instantly using AJAX, instead of reloading the page every time. WooCommerce Product Filters integrates with Show Single Variations so that you can display individual variations in the results.

Start filtering your products by attribute in WooCommerce

In this guide, you’ve learned why improving your WooCommerce filter is great for improving customer experience. You’ve also had step-by-step instructions for adding WooCommerce filter by attribute functionality into your store using a WooCommerce plugin.

As a bonus, we also included an extra tweak you can make to your product filters to make your customer experience even better and as a result, increase your sales.

When improved, your store’s product filters can be a big game-changer when it comes to making more sales. By simply saving your customers from clicks and confusion, you’re making it easier for them to make a purchase.

Make these changes quickly and easily with the following plugins:

• Show Single Variations – Make product sales easier by displaying product variations on the shop page, and in the filtered and search results.
• WooCommerce Attribute Swatches – Improve your filters even further by adding intuitive color and image swatches.