Complete Guide to setting up filter by attribute in WooCommerce

May 29, 2022

With online shopping the most convenient it's ever been, a WooCommerce store should be as organized and user-friendly as possible. Keep reading to learn how to make it easy for your customers to find what they want and increase your revenue! All you need is WooCommerce plus the best WooCommerce product filter plugin to allow customers to filter by attribute and other criteria.

If you sell multiple types of products, you'll know that it's ideal to let shoppers search for what they want — it should be fast and easy for them to find things to buy.

However, there are plenty of products a customer might like, but they might not know how to find it or won't even know it exists yet. This is where product filters and attributes come in!

What is an attribute filter and why do customers love them?

A product filter (also known as faceted search) is a tool placed on a shop page to help customers discover new products by searching by any criteria. This means that if a customer is looking for a blue T-shirt, they can apply "T-shirt" and "Blue" on a product filter to find every blue T-shirt in the store.

Product filters benefit stores in a variety of ways:

  • Increase time spent in the shop.
  • Add to discoverability of all products (it's easier for any product to be seen by a customer).
  • Increase conversion rate.
  • A user-friendly store creates more customer loyalty.

Applying a filter on your shop page allows customers to find items that match their personal preferences faster. This is how they can find all kinds of great new products. However, this can get tricky if you have a huge catalog of product variations and are using product attributes.

If you use the default WooCommerce product filter to offer filtering by attribute, here’s what would happen: When a customer tries to filter based on an attribute, it will show all variable products having that attribute. This is a terrible customer experience!

In this article, you'll learn how to add WooCommerce product filters that:

  • Can be placed anywhere on your site, including as a widget or shortcode.
  • Filter by product attributes like price, color, custom taxonomy, and more - in a better way!
  • Have a visually engaging and intuitive design.
  • Work with Elementor, mobile, and any WordPress themes.
  • Don't need any technical experience!

Custom product filters can be easy to set up and manage even without any technical experience. We'll show you how to set up product filters for any WooCommerce store in just 5 minutes, and how to filter by product attributes in a cleaner, user-friendly manner.

Grow your sales by helping customers to find exactly what they need - quickly and easily.

Start with your basic WooCommerce store

Before we add filters, you'll need to have your WooCommerce store. Simply install the WooCommerce plugin on any WordPress website, then add some products to start. At this point your customers will see all the items you have available in the WooCommerce default product sorting.

However, having a single type of filter or filter group doesn't work for every store. With so much variety in the world of e-commerce, displaying WooCommerce products by category only covers the very beginning.

How to add your own WooCommerce product filters

You can put WooCommerce product filters on any shop page by using beginner-friendly plugins on WordPress. The best all-in-one product filter plugin on WordPress is WooCommerce Product Filter Pro. This plugin is the perfect mix of full customization power plus an easy-to-manage back end with drag-and-drop options and straightforward settings.

The filters are also 100% mobile friendly and you can also allow customers to filter by attribute easily! Let’s take a look at how you can enable this plugin and apply custom filters in your website in minutes with or without any experience. We’ll explore:

  1. How to install a product filter system.
  2. Check filter settings.
  3. Create filters and filter by attribute.
  4. Place product filters anywhere on your site.

1. Install the best WooCommerce product filter plugin

First, buy the WooCommerce Product Filter Pro plugin. Download the plugin from your Order Confirmation page or confirmation email, then install and activate it on WordPress.

You can also follow a step-by-step installation guide here.

Once you enter your license key from the email into WooCommerce → Settings → Filters, you're just a few minutes away from having live product filters on your store!

WooCommerce custom product filter installation guide

2. Create attribute filters

It's time to check out the filter settings. Here's where you can change the way your filters work on your store.

Want to leave it as is? No problem — this WooCommerce plugin is already ready to go with its default settings if you want to create your first filter now.

If you do want to change your settings, you can do it all with one page that's designed for ease of use.

This page of settings shows the way your filters work in general. Let's break down each option:

Configure filter behavior and content

Filter mode

  • Button - You can choose to let users manually apply their filter options by clicking a button with your custom text. When "Button" under Filter Mode is selected, a text box will appear where you can input your own button text.
  • Instant / AJAX - To add an automatic product filter to WooCommerce, select "Instant" under Filter Mode. 
    • What is an AJAX product filter? - An AJAX product filter is a filter that will apply each selection immediately — no other clicking required.
    • Should you use an instant filter or button? - A WooCommerce AJAX product filter can be beneficial to your store because it decreases the amount of clicks for a customer as well as the time it takes to see the products they want. When a selection is made, items will be filtered automatically with no extra refresh time, making this option generally more user-friendly.
      However, in some cases, it's best to have the manual button available — for example, when there are a lot of filters on one page, and it could take a while for a shopper to select all the product attributes and filters they want to apply before they are ready to browse products.
  • Product count - Display the number of products within each filter and choose where the numbers will appear: above the filter or beside each option. Knowing how many items are in each option can be helpful for the customer. Or you can hide the product count by un-checking both boxes.
  • Storewide filtering - When storewide filtering is enabled, applying a filter will find and show results from the whole store. Disable this option to only show products from the user's current page.

Filter visibility

  • Display on shop pages or archive - All of your filter groups are automatically available in this dropdown. Simply pick one to display above the product area on your shop pages, or leave this blank if you'd rather manually place filters in other places in your shop.
  • Hide filters by default - As a 100% mobile-friendly product filter, WooCommerce Product Filter Pro offers this option that allows filters to be minimized right when the page loads. This means that a customer will need to click on a button to view them. By default, this will be enabled on mobile and disabled on desktop, but you can choose whether to hide your filters on both or neither.
  • 'Show filters' button text - What you write here becomes the button that will display if your filters are hidden by default. Customers will click this in order to see the filters.
  • Toggle filters - If this option is enabled, customers can click to manually open or close each option in your filters. A plus (+) icon will appear on the right side of each filter option.
  • Default status - You'll see this option if Toggle filters are enabled. 'Open' will show all filter options when a page first loads. When 'Closed' is selected, customers will need to click on filter headings to see what options are available.

Here's a great example of what hidden filters can look like on mobile:

 

Play around with these options until you're happy, and then click 'Save changes.'

You can find everything else you need to know about these settings on the plugin's full guide here.

3. Create filters and convenient filter groups

Now that the WooCommerce product filter plugin is active and the settings are right for you, it's time to make your first filter! This straightforward interface is equally perfect for creating a few simple filters or tons of totally unique filters. Whatever the needs of your store are — it can be done right here.

Add a new filter

  1. Start at WooCommerce → Settings → Filters, then click the 'Filters' tab.
  2. Use the 'Add new filter' form on the left side of the page to enter your filter's information:
    • Filter name - Add any name for customers to identify this filter. For example: "Drinks" or "Filter by color."
    • Filter by - Let shoppers filter your products by one or more of the following filter options:
      • Categories
      • Product Attributes
      • Colors
      • Tags
      • Custom taxonomy
      • Price
      • Ratings
      • In stock
      • On sale
      • Sort by
    • Filter type - You'll see this field if you've selected to filter by categories, attributes, taxonomies, or tags. These types of filters can be displayed as:
      • Dropdown
      • Checkboxes
      • Radio buttons
      • Labels
      • Images (available for categories, attributes, or custom taxonomies)
    • When you create WooCommerce attribute filters, some additional options will appear. These let you choose whether to automatically display filters based on the attributes of the current page, or whether to select a specific attribute (e.g. color or size). If different products have different attributes then I recommend the automatic option.
    • Assign to groups - Quickly add your new filter to existing groups or create a new filter group. To create a new filter group from here, simply click 'Add new filter group' and enter a name for the group when prompted. Remember that filter group names are only used internally and are always hidden from customers.
    • Finally, click the 'Add new filter' button.
  3. Repeat step 2 to make as many filters as you want!

Filter Groups

This tab is for structuring filters that work well together into easy-to-manage groups. For example, for variable products, you can create a group of attribute filters, pricing and delivery options. You can manage and display filters most efficiently as a group (like a template) placing them together anywhere on your site using a single shortcode! Any new filter you've added can be put into one group or into as many groups as you want.

Find your filter groups and make new groups at WooCommerce → Settings → Filters, then the 'Filter Groups' tab:

Create a new group under "Add filter group" on the left. The dropdowns here allow you to add any existing filters to your new group.

You can add and remove as many filters as you want by clicking the + and - icons. Rearrange the order of your filters in any group with an intuitive drag-and-drop method — just click and drag them up or down.

All of your current filter groups are displayed on the right side of the page, where you'll see a box with the name of every filter group.

You can also make changes to your filter groups. For example, if you want to remove any product attributes from the “All Available Attributes” group, simply hover over it and you’ll get the option to Edit or Delete the group. Editing allows you to change the order of filters in that group plus add or remove filters from that group any time you want.

4. Place product filters anywhere on your site

Every store layout has different places where a product filter will look and perform best. Of course, you should be able to put your filters anywhere you want to, and you absolutely can!

Once you have your groups and individual filters, easily put them anywhere on your site as a shortcode or in a sidebar as a widget.

Filter widget placement

You can add WooCommerce Product Filter Pro's widget to any sidebar. Similar to other widgets, find it in Appearance → Widgets in WordPress and drag the product filter widget to where you want it.

The vertical layout is usually recommended for sidebars, but vertical and horizontal layouts are both available.

Shortcode placement — anywhere!

Display your default filter group anywhere using this shortcode:

[wpf-filters id=1]

Or display the filter group of your choice by following these steps:

  1. Go to WooCommerce → Settings → Filters, then the 'Filter Groups' tab.
  2. Find the group you want on the right side of the page. Click the 'Copy' option next to that group.
  3. Finally, paste its shortcode anywhere you want your group to show up!

Time to test the filters in your store

Now that the filters are set up, it's important to test them out on your website. Click around your shop to make sure that:

  1. The filters are in the perfect locations.
  2. Types of filters and filter behaviors are to your liking. For example, if you’ve created an attribute filter, make sure all your product attributes are correctly named and added and are being displayed accurately.
  3. Your products are organized by the correct filters.

WooCommerce product filters that work with Elementor

Page builders like Elementor make it possible to construct a website completely visually, with or without any coding experience. Tools like these create an accessible space for pros and total beginners alike to design the websites of their dreams. While Elementor is one of the most popular WordPress page builders, there's a surprising number of WooCommerce plugins that are not compatible with Elementor.

With the option to display any filter group as a shortcode, WooCommerce Product Filter Pro is the best and most flexible WooCommerce product filter for Elementor. These two plugins combined create a space where you can fully design a WooCommerce store with custom product attribute filters by using mostly visual and drag-and-drop methods.

Bonus: Display product attributes in a table for faster orders — perfect for wholesale and more

In some cases, it's more convenient for certain customers to see a list-style catalog instead of viewing each product individually. Showing filtered results in a table streamlines the purchasing process even further, saving time for buyers. The efficient WooCommerce Product Table is ideal for situations like wholesale transactions, order forms, and restaurant ordering.

Grocery convenience store

Choose to show users any product data you want including product attributes, custom fields, taxonomies, SKU, videos, and more. Showing the same information on both the product attribute filter and product table brings a feeling of consistency to your whole shop.

This product table also allows shoppers to make multiple selections at once, eliminating wasted time for them while also automating the ordering process for you. It's a win-win!

You can choose to display product attributes as product details or as product variations - depending on your business and audience. Use our comprehensive guide to understand the top 2 ways to display product attributes in table format.

The easiest and most flexible way to list products and create quick order forms.

Here's what one happy WooCommerce Product Table user has to say:

Great Plugin!
By John
I needed a simple table to display thousands of products in table form and this plugin did the trick. Plus, it is super simple for the customer to select many items at one time. Before I installed I was lucky to get orders with three items, now I AVERAGE ten products per order. Support is also really good too. I highly recommend this plugin.

Set up your custom product filters to filter by attribute for WooCommerce in just 5 minutes

WooCommerce is a truly flexible e-commerce platform with a wide variety of custom options and plugins for any store. Overall, WooCommerce Product Filter Pro is the best plug-and-play answer for store owners with a variety of products to show off. Enjoy increased revenue and loyalty from customers who know how to navigate your shop every time.

It's fast, easy, and totally customizable for beginners and pros alike. Your WooCommerce store is now more user-friendly than ever!

Conclusion

In this article, we explored the most important aspects of custom filters:

  • How to add a WooCommerce AJAX product filter on top, on the side, or anywhere on your site as a widget or shortcode.
  • Allow filtering by product attributes, price, product category, color, tags, custom taxonomies, stock, sales, ratings, sorting, and more.
  • Choosing the right look for your filters: dropdowns, checkboxes, radio buttons, labels, color swatches, or images.
  • Adding a clickable button or using instant filtering.
  • Creating filter groups and how to change any setting in seconds.

If you’re looking for a WooCommerce product filter with 100% custom options, that allows you to add filtering by attributes and more anywhere on your website, with collapsible product filters for mobile friendliness - WooCommerce Product Filter Pro is perfect for you!

Your customers will love it as much as you do. Get your store the best WooCommerce store filter available →

Grow your sales by helping customers to find exactly what they need - quickly and easily.

Please share your thoughts...

Your email address will not be published.