WooCommerce Filter Products by Attribute

WooCommerce Tutorials

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.

woocommerce filter by attribute

The plugin mentioned in this guide:

  • Show Single Variations – Make product sales easier by displaying product variations on the shop page, filtered and search results.

Start your 14-day free trial of Show Single Variations

You can start your free trial right now and instantly make sales easier with better filtering.

or learn more

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.

woocommerce filter

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. The way your filters behave in this situation will either aid in 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.

woocommerce filter attribute

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. 

woocommerce filter by attributes

Set up your filter widgets

Before you can set up filtering by attribute properly, you’ll need to enable the filtering widgets on your online store. These widgets appear in the sidebar of the shop, 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 setup, 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

Or start your free trial below:

Start your 14-day free trial of Show Single Variations

You can start your free trial right now and instantly make sales easier with better filtering.

or learn more

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 licence key

Now that we have Show Single Variations installed, we can move onto 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.
edit variable product
  1. 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”.
  2. Click Show in Filtered Results
show in filtered results
  1. Then click Save Changes.

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

woocommerce filter by attribute

How to upgrade your WooCommerce product filter even further

The customisation 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.

woocommerce filter swatches

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 will be able to filter with swatches. This makes it much quicker and easier for them to find the product they’re looking for.

Start your 14-day free trial of WooCommerce Attribute Swatches

Start your free trial now and instantly add color and image swatches to your WooCommerce store.

or learn more

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

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. 

Gina is our in-house content creator, affiliate, and partnership manager. She’s passionate about working with plugin companies with copywriting/storytelling, content creation & marketing.

She can typically be found tending to her vegetable garden, writing, and travelling to mainland Europe.

4 Responses

Muhammad Usman Akram 1 week ago

Can you tell how to make custom filter of woocomerce attributes. Like Filter Products by Color, Filter Products by Size, Filter Products by Brands. Please help.

Kenneth admin 1 week ago

Hi Muhammad,

This can be achieved with the default WooCommerce filter widget - Filter Products by Attribute.
If you want to filter by color, for example, you would need to make sure that you have created your 'Color' attribute and then select it on the widget afterwards.
Screenshot: https://share.getcloudapp.com/d5u12zd4

Hope that helps!

Kostas Papas 7 days ago

Hi, my product attributes are color and size which are custom(declared in each product individually). What should i do in order to filter products by color and size?


Hi Kostas,

You can also use the filter widget from WooCommerce and add it to your shop sidebar. See this for a quick tutorial:- https://iconicwp.com/blog/how-to-filter-products-by-attribute-in-woocommerce

I hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *