WooCommerce Filter Products by Attribute

WooCommerce Tutorials

How to Filter Products by Attribute in WooCommerce

The product filter function on most WooCommerce websites tends to be overlooked. But it’s precisely this section of your site that deserves a little more attention to improve customer experience and increase sales.

In this guide, we’ll provide you with step-by-step instructions for adding WooCommerce filter by attribute to your online store. As a bonus, we’ll outline why upgrading your product filter will benefit your store in terms of sales.

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

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… pages.

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.

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

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 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 store’s filter function 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.

Roundup

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.

Your store's product filters might be functional, but with improvement, they could increase your ecommerce conversion rate by 26%.Click To Tweet

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.

Plugins featured in this guide:

  • 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. 

Interested in getting either of the above and some of our other plugins at Iconic? The plugins mentioned in this guide is available in our All Access Bundle with a huge 91% discount:

Instant Access to All of our WooCommerce Plugins

Save $1000s on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

or learn more

Gina is our in-house content creator and social media manager.

Share

Leave a Reply

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