How to Filter WooCommerce Products (Step-by-Step Tutorial)

You can display the filter as a checkbox, dropdown menu, text, color swatches, and more. For this tutorial, we will be choosing the ‘Select’ option to add a dropdown menu.

Choose a filter type from the dropdown menu

After that, click the ‘Add Attribute’ button at the bottom.

For example, if you created an attribute called ‘Filter by Material,’ then you can add the individual materials as terms, such as wool. You can add as many terms as you want to an attribute.

As we are creating a filter for product categories, we will be selecting the ‘Product categories’ option.

Here, you have to start by choosing a ‘Filter mode’ option. You can select if you want to apply filters in real-time using AJAX or if you want to show an ‘Apply Filters’ button on your site.

Finally, click on the ‘Save Filter’ button at the bottom to save your custom attribute filter.

Go ahead and choose the custom attribute from the dropdown list and type the attribute terms into the ‘Choose terms’ box.

Choose the custom attribute filter and add its terms

After you have made your choices, click on the ‘Save Options’ button and switch to the ‘SEO’ tab from the top.

Next, open up your products page in the block editor from the WordPress admin sidebar.

If you want to create a WooCommerce products filter using custom attributes, then this method is for you.

Add the Custom Attribute to a Product

Next, simply select ‘Taxonomy’ from the ‘Filter for’ dropdown menu. If you are using the free version of the plugin, this option will be chosen for you by default.

Choose taxonomy option from the filter for dropdown menu

Once you have done that, choose if you want to show the filter results on the same page using AJAX or if you want to reload the results on a new page.

From here, you can choose your WooCommerce filter’s label style color, textual term color, color swatch size, filter area color, and more.

Once you are there, simply copy the shortcode of the filter preset that you just created.

Copy the shortcode for the filter preset

Now, the custom attribute that you created will already be available in the dropdown menu next to the ‘Choose taxonomy’ option.

They can also increase sales by enabling customers to see all of the available options for the products they are interested in, helping them make more informed purchases.

You will now have to repeat the process for all the products that share the same attribute.

Next, click the ‘Update’ or ‘Publish’ button at the top to save your changes.

Are you looking for a way to filter products by attribute in your WooCommerce store?

Note: There is also a free version of the YITH WooCommerce Ajax Product Filter plugin. However, we will be using the premium version of the plugin for this tutorial.

You can now start creating a filter for your WooCommerce products.

Choose the horizontal preset layout and click on the Add new filter button

Keep in mind that the preset name won’t be displayed in your store and is only there for your reference.

Type a preset name

Configure the General Settings

To learn more about the differences between these options, you can read our guide on how to add tags, attributes, and categories to WooCommerce.

Once you are there, toggle the ‘Enable SEO option’ switch to activate the settings.

For more details, you may want to read our article on WordPress metadata and meta tags.

After that, simply paste the filter preset shortcode that you copied into the block.

Add the filter preset shortcode to the block

Once you are done, click the ‘+ Add a new filter button’ at the bottom to start creating a WooCommerce custom attribute filter.

Create a filter

From here, copy the shortcode of the custom attribute filter.

Copy the shortcode for the filter preset

Adding colors can help your WooCommerce filter look more aesthetically pleasing and match your online store’s branding.

Customize filter colors

For instance, if you created an attribute for material and the product you are editing is made of wool, then you will need to choose ‘Wool’ from the dropdown menu.

Next, simply open up your WooCommerce products page in the block editor from the WordPress admin sidebar.

After making your choices, click the ‘Save options’ button to store your changes and switch to the ‘Customization’ tab at the top.

Next, simply open up the ‘Custom Product Attribute’ dropdown menu and select the custom attribute you just created.

Finally, click on the ‘Publish’ or ‘Update’ button to save your changes.

Next, you can select the parameters for the filter from the ‘Filter for’ dropdown menu. Keep in mind that the free version of the plugin only offers filters for product categories and tags.

You can also toggle the ‘Add “nofollow” to filter anchors’ switch to automatically add the nofollow attribute to all of the filter anchors.

Finally, click the ‘Save Filter’ button at the bottom to save your filter.

Finally, click on the ‘Publish’ or ‘Update’ button to save your changes.

Create a Custom Attribute

If you are creating a filter to sort products by different price ranges, then you must choose the ‘Price Range’ option. Similarly, if you want to sort products by popularity or average rating, then you need to choose the ‘Order by’ option.

The filter can be displayed as a checkbox, dropdown menu, text, color swatches, and more.

Choose a filter type from the dropdown menu

We hope this article helped you learn how to filter WooCommerce products by attribute and custom attribute. You may also want to see our article on how to add fuzzy search to your website to improve search results and our top picks for the best WooCommerce themes.

After that, go ahead and toggle the ‘Hide out of stock products’ switch if you don’t want to display out-of-stock products in the results.

Toggle switches to hide empty terms or out of stock products

To add the filters that you have just created to your WooCommerce products page, you need to switch to the ‘Filter presets’ tab from the top.

Filters make it super easy for customers to browse products in your WooCommerce store.

Once the attribute has been created, click on the ‘Configure Terms’ link to add terms to the attribute.

Click the Configure terms link to create terms

This will direct you to a new screen, where you must type a term into the ‘Name’ box.

Now, go ahead and click the ‘Add’ button.

Choose the custom attribute you created from the dropdown menu

After creating an attribute, you will need to add it to individual WooCommerce products.

You can also automatically add the nofollow attribute to all the filtered anchors by toggling on the ‘Add “nofollow” to filter anchors’ switch. This will tell search engines not to use the filter anchors when ranking your page.

Configure the SEO settings for the filter preset

First, you will have to type a name into the ‘Filter Name’ box.

First, you need to install and activate the YITH WooCommerce Ajax Product Filter plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

Now you can add meta tags from the dropdown menu to use on your filtered pages. This will improve the SEO of your site.

Upon activation, head to the YITH » Ajax Product Filter page from the WordPress admin sidebar.

Once you are satisfied, click the ‘Save Options’ button to store the settings.

They allow shoppers to narrow down their search based on different attributes, including color, price range, fabric, size, and more. Rather than scrolling through your entire collection of products, users can simply browse the products they are interested in.

WooCommerce Product filter preview

Once you have done that, choose a default order for the filtered terms from the ‘Order by’ dropdown menu.

From here, go ahead and click on the ‘+ Create a new preset’ button.

Click Create a new preset button

Note: If you are using the free version, then the customization settings won’t be available.

Next, you need to toggle the ‘Show Search Field’ switch if you want to enable a search box within the dropdown menu.

You can add robots meta tags from the dropdown menu to use on your filtered pages. This will improve the SEO of your site.

Configure the SEO settings for the filter preset

After you have done that, you must choose from the taxonomy options for the filter. For instance, if you want to filter products by color, then you will need to choose that option from the dropdown menu.

Once you are happy, click the ‘Save Options’ button to store the settings.

For example, if you are creating a filter that will help customers sort through different material options, then you can name it ‘Filter for Material’.

Now simply paste the filter preset shortcode that you copied into the Shortcode block.

Add the filter preset shortcode to the block

Now, repeat the process to create multiple filters.

If you are looking for a quick and easy way to filter WooCommerce products, then this method is for you. We will show you how to set up a simple WooCommerce filter by attribute settings.

First, you will need to type a filter name next to the ‘Filter Name’ option.

Once you have made your choices, click on the ‘Save Options’ button and switch to the ‘SEO’ tab from the top.

Now that the custom attribute has been added, simply search for the term that matches the product in the ‘Select Terms’ option.

From here, click the ‘+ Create a new preset’ button to start creating a filter preset.

Click Create a new preset button

You can also display the filter you are creating as a toggle by activating the ‘Show as toggle’ switch. Then, customers will be able to toggle the filter on and off.

Toggle the switch for the search field

Create a Custom Attribute Filter Using a Plugin

You can now visit your website to see the WooCommerce filter by attribute feature in action.

WooCommerce Product filter preview

How to Filter WooCommerce Products by Custom Attribute

In this article, we will show you how to use WooCommerce filter by attribute settings in your online store.

Filter WooCommerce products

Why Filter WooCommerce Products by Attribute?

Create a Filter for WooCommerce Products

To create a custom attribute, you will need to visit the Products » Attributes page from the WordPress admin sidebar.

After that, you can choose how you want the filter to display on the front end of your store from the ‘Filter type’ dropdown menu.

Next, you must choose how you want the filter to be displayed on the front end of your store from the ‘Filter type’ dropdown menu.

From here, toggle the ‘Enable SEO option’ switch to activate the settings.

Next, you need to scroll down to the ‘Hide empty terms’ option and toggle the switch on if you don’t want to display filter terms that are empty.

Adding filters can help enhance user experience, improve search functionality, and reduce bounce rates in your online store.

Once you are done, click the ‘Save attributes’ button.

Add an attribute term for the product

Next, simply choose ‘Horizontal’ as the preset layout and then click on the ‘+ Add a new filter button’ at the bottom.

Note: You can use the free or premium version of the plugin to create a custom attribute filter for WooCommerce.

For instance, if you have added a ‘Mugs’ category in your WooCommerce store, but it currently has no items in it, then it won’t be displayed in the ‘Filter by Category’ list.

Once you are there, click the Add Block ‘(+)’ button in the top left corner to find the Shortcode block.

Next, you have to type a name for the preset that you are creating into the ‘Preset name’ box.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



For instance, you can choose the label style color, textual term color, color swatch size, filter area color, and more.

Customize filter colors

For instance, if you want to create a filter for a specific product material, then you can name the attribute ‘Filter by Material’.

Upon activation, head to the YITH » Ajax Product Filter page from the WordPress admin sidebar.

After you have done that, go back to the top and switch to the ‘General Settings’ tab to configure some settings.

Once you are done, click on the ‘Add new filter by Material’ button to save the term.

Add an attribute term

For instance, if you are creating a filter that will help customers sort through product categories, then you can name it ‘Filter by Category’.

You can leave the other settings as default or configure them to your own liking.

Next, you need to switch to the ‘General Settings’ tab from the top. From here, you can choose a filter mode, hide empty terms, and configure other settings according to your needs.

Choose a filter mode

Configure the Customization Settings (Premium Plugin Only)

For this, you will have to open the product page that you want to edit. From here, scroll down to the ‘Product data’ section and switch to the ‘Attributes’ tab.

Next, you must check the ‘Enable Archives’ box if you want to display all the items that share that attribute on a single page. 

Create an attribute

From here, you can customize how your filter preset will look on the front end of your website.

Here, click the Add Block ‘(+)’ button in the top left corner to find and add the Shortcode block.

You can now visit your website to see the WooCommerce custom attribute filter in action.

Preview for the custom attribute filter

Next, you must type all the product categories on your website in the ‘Choose Terms’ section.

Choose a taxonomy option from the dropdown menu and then write terms for the categories

Once you are there, you can start by typing a name for the filter into the ‘Preset name’ box.

To add the custom attribute filter to a WooCommerce products page, you will need to switch to the ‘Filter presets’ tab at the top.

Once you have done that, just choose a default order for the filtered terms from the ‘Order by’ dropdown menu. The filter categories will be displayed in the order that you choose.

You can sort the filter categories using the name, term count, or slug. You can also select the ‘Order type’ for the filtered terms in ascending (ASC) or descending (DESC) order.

Choose order type as ascending or descending

Next, you must also make a choice between showing a save button or displaying filter results immediately.

Choose a filter mode

You can also choose the ‘Taxonomy’ option if you want to filter product tags, categories, colors, sizes, materials, styles, and more. For this tutorial, we will be going with this option.

Type a filter name and choose a filter for option from the dropdown menu

Filtering your WooCommerce products by attribute makes it easier for customers to locate the item they want to purchase. It helps save customers’ time and makes the shopping experience more seamless.

That being said, let’s see how you can easily filter the products on your WooCommerce store. We will show you how to filter WooCommerce products by attribute and custom attribute.

How to Filter WooCommerce Products by Attribute

Once you are there, start by entering a name and slug for the attribute.

You can sort the filter categories using the name, term count, or slug. You can also choose the ‘Order type’ for the filtered terms in ascending (ASC) or descending (DESC) order.

Choose order type as ascending or descending

Once you are done, click the ‘Save options’ button to store your changes and switch to the ‘Customization’ tab at the top.

Add the Custom Attribute Filter to a WooCommerce Products Page

Add the WooCommerce Filter to the Products Page

Next, you will need to install and activate the YITH WooCommerce Ajax Product Filter plugin. For more instructions, please see our guide on how to install a WordPress plugin.

Note: The ‘Customization’ tab won’t be available if you are using the free version of the plugin.

Configure the SEO Settings

If you are using the free version of the plugin, then this option won’t be available for you. Instead, you will have the ‘Default’ preset layout.