WooCommerce product filter blocks: what are they and how to use them?

Running an online store can be challenging. You need to organize your products so customers can find the items they are looking for. Happily, WooCommerce product filter blocks can group and display custom items in seconds.

Product filter blocks allow you to organize your WooCommerce store items by their properties. This can include their prices, categories, attributes or tags. Then you just have to paste the block into a post or page and your customers can find filtered results.

In this guide, we’ll introduce the different WooCommerce product filter blocks and why you should use them. We then explain how to insert and configure these elements in your online store. Let’s begin!

📚 Table of contents:

An introduction to WooCommerce’s product filter blocks

WooCommerce has a collection of WooCommerce Blocks that allow users to search for specific products in your online store. These interactive elements allow consumers to filter their results and find items that best suit their needs.

Here is a quick overview of the free WooCommerce product filter blocks:

• Filter products by price: This block allows customers to select a price range using a slider and only display items that fit within that range.
• Filter products by attribute: Customers can search for items by their attributes, including sizes, colors, and styles.
• Active product filters: It helps customers see what filters they’ve already applied to their search so they can customize it.
• Filter products by inventory: This block only shows items that are in stock, not in stock or on backorder.

You can use these blocks on posts, pages and widget areas. When interacting with the block, customers can choose from predefined parameters to view the filtered results.

👉 If you want more flexibility when setting up product filters, you can also install a special WooCommerce product filter plugin. We will introduce some quality options later in this article.

Why you might consider using WooCommerce product filter blocks

WooCommerce product filter blocks can greatly improve the user experience (UX) of your online store. If you have an extensive product catalog, customers may spend hours scrolling through your items while searching for the ones that fit their needs. However, you will likely get frustrated and click away to shop elsewhere.

Depending on the goods you sell, product filters allow customers to search your store for colors, sizes, ingredients, and brands that suit their needs. Also, the results are updated on the same page. Therefore, consumers don’t have to navigate to category pages and interrupt their shopping experience.

How to use WooCommerce product filter blocks

In this first section, we will show you how to use the default product filter blocks that WooCommerce includes automatically. Again, for more flexibility, you can consider one of the WooCommerce product filter plugins in the next section.

Most WooCommerce product filter blocks work the same way. You simply insert the block and then determine which product properties are displayed.

You can find all of these blocks in WordPress by clicking on the + Button to insert a new block and search for “WooCommerce Filter:”

Remember that you must first add attributes, tags, categories and other features to your WooCommerce products. Otherwise you have no data to use in your block.

Now let’s look at how to use WooCommerce product filter blocks. We’ll use those Filter products by attributes item as an example.

Step 1: Add attributes to your WooCommerce products

ℹ️ note – For other filters (e.g. price or inventory) you do not need to set up attributes.

If you haven’t already done so, consider adding categories, tags, and attributes to your WooCommerce products. These taxonomies make it easier for customers to find the items they want. Additionally, WooCommerce product filter blocks will not work without these classifications.

Start navigating to Products > attributes in your WordPress dashboard. Here you can create new classifications for your products. As you can see, we already have Color and size in our online shop:

You must enter a name and slug for your new attribute. Then click Add Attributes to save the classification. Note that you can use the same process for product categories (and subcategories) and tags.

Then open your products to add their taxonomies. You can do this by navigating to Products > All products and click on an item.

Now scroll down to product data section and open the attributes Menu:

You can add attributes to your product by selecting them from the drop down menu and clicking Add. Then select the drop-down arrow next to the attribute to enter your custom information.

For example, in our example, we added Red As a Color Attribute to our product:

When you have added all your variables, click save attributes. Now customers can find items with these properties through your WooCommerce product filter block.

Step 2: Insert your product filter block

Next, you need to open the page or post where you want to use your product filter block. You can also use the element in a sidebar on your shop pages so customers can filter their results while browsing.

First you need to add the all products block your site. Otherwise, WooCommerce will not be able to filter and display specific items.

You can do this by clicking + Click and search for “All Products”. Select the block and add it to your page:

Next, search for “WooCommerce Filter Attribute:”

Click on the block and it will be inserted into your page. Now you can search for a product attribute or select one from your dropdown list. We will use Color in our example:

Your block will now be transformed to show a new title and a list of your selected product attributes (e.g. the different item colors):

You can leave the block as is if you like how it looks. Alternatively, we’ll discuss how to customize the look of this element in the next step.

Step 3: Configure the block settings

Next, you can customize the look of your WooCommerce product filter block. Just click the Filter products by attributes Block and then select the gear icon on the right:

Here you can choose whether to display yours product count. This setting can be useful if you have a large catalog of items and want to offer your customers a wide selection.

You can also choose the heading level for your product attributes. The default is H3but you can choose H2 to H6 to meet the stylistic needs of your store.

If you scroll down you should see some additional configurations below block settings:

Here you can choose yours query type. If you choose to and, WooCommerce will only display products that contain all the attributes specified by the customer. Meanwhile the or Option shows all items that have at least one of the attributes.

Among display type, you can view your attributes in list or drop-down format. Both options are relatively user-friendly.

Finally, you can choose whether you want to activate the filter Button. When you turn it on, customers need to click walk to filter your search results. However, if you omit it, simply selecting one of the attributes will update the products displayed.

That’s it! Your WooCommerce product filter block is now ready to use:

Just save and publish your changes. Customers can now filter their product search with certain attributes.

An overview of WooCommerce product filter plugins

Aside from the free WooCommerce blocks, you can also access third-party plugins for more flexibility when setting up your filters. For example the WooCommerce product search plugin contains the following filter options:

• Products: Displays a collection of filtered products. This block can replicate your shop page and render items driven by other product filter blocks on the same page.
• Seek: Creates a filtered search function for your WooCommerce store.
• Categories: Displays products that match specific categories such as clothing type or gender.
• Attributes: Displays products with specific attributes such as color, brand, size, shape, make, or special features.
• tags: Displays products that match product tags, including “Featured”, “Logo”, or “Trending”.
• Price: Shows products within certain price parameters.
• Valuation: Presents products according to their average rating.
• Sale: Shows only products that are on sale.
• Share: Shows only products that are in stock.
• Reset to default: Allows customers to reset product filter parameters. Then they can see all your available items or make new settings to customize their search.

👉 Alternatively, you can also use the WOOF Products Filter for WooCommerce plugin:

This plugin allows customers to filter items by their categories, attributes, tags, custom taxonomies, and prices. Also, the results shown are usually more attractive and customizable than the default WooCommerce blocks.

WooCommerce Product Filter by WooBeWoo is another excellent freemium option:

You can use it alone or with Elementor to design your own product filters and layout conditions. That Premium plugin Includes additional features such as category icons, custom styles, and a button to show and hide filters.

Get started with WooCommerce product filters today

Luckily, it’s also very easy to use a WooCommerce product filter block. All you have to do is add taxonomies such as categories, attributes or tags to your products. Then you can use the appropriate WooCommerce block alongside one all products block on your shop page.

You can also install a special WooCommerce product filter plugin for more flexibility.

😎 If you want to find even more ways to build a better WooCommerce store, you can also check out our collection of must-have WooCommerce plugins.