Running an online store can be challenging. You’ll need to organize your products so that customers can find the items they’re looking for. Fortunately, WooCommerce product filter blocks can group and display user-specified items in seconds.
With product filter blocks, you can organize your WooCommerce shop items according to their characteristics. These might include their prices, categories, attributes, or tags. Then, you’ll simply need to insert the block into a post or page, and your customers can find filtered results.
In this guide, we’ll introduce all the different WooCommerce product filter blocks and discuss why you might consider using them. Then, we’ll explain how to insert and configure these elements on your online store. Let’s get started!
📚 Table of contents:
An introduction to WooCommerce product filter blocks
WooCommerce has a collection of WooCommerce blocks designed to let users search for specific products in your online store. These interactive elements enable consumers to filter their results and find items most suited to their needs.
Here’s a quick overview of the free WooCommerce product filter blocks:
- Filter Products by Price: This block enables customers to choose a price range using a slider and display only items that fit within that range.
- Filter Products by Attribute: It lets customers search items according to their attributes, including sizes, colors, and styles.
- Active Product Filters: It helps customers see which filters they’ve already applied to their search so that they can adjust it.
- Filter Products by Stock: This block shows only items in stock, out of stock, or on backorder.
You can use these blocks on posts, pages, and widget areas. When interacting with the block, customers will be able to choose from predetermined parameters to see the filtered results.
👉 If you want more flexibility for setting up product filters, you can also install a dedicated WooCommerce product filter plugin. We’ll share some quality options later in this article.
Why you might consider using WooCommerce product filter blocks
WooCommerce product filter blocks can significantly improve the user experience (UX) of your online store. If you have an extensive catalog of products, customers might spend hours scrolling through your items while looking for the ones that fit their needs. However, they’ll likely feel frustrated and click away to shop somewhere else.
With product filters, you can enable consumers to search for items according to specific parameters. You’ve probably seen this feature on leading eCommerce store pages:
Depending on the goods you sell, product filters enable customers to browse your store for colors, sizes, ingredients, and brands that fit their needs. Additionally, results will update on the same page. Therefore, consumers won’t need to navigate to category pages and interrupt their shopping experiences.
How to use WooCommerce product filter blocks
In this first section, we’ll show you how to use the default product filter blocks that WooCommerce automatically includes. Again, for more flexibility, you can consider one of the WooCommerce product filter plugins in the next section.
Most of the WooCommerce product filter blocks work the same way. You’ll simply insert the block and then determine which product characteristic is displayed.
You can find all these blocks in WordPress by clicking on the + button to insert a new block and searching for “WooCommerce filter:”
Keep in mind that you’ll first need to add attributes, tags, categories, and other characteristics to your WooCommerce products. Otherwise, you won’t have any data to use in your block.
Now, let’s take a look at how to use WooCommerce product filter blocks. We’ll be using the Filter Products by Attribute element as an example.
Step 1: Add attributes to your WooCommerce products
ℹ️ Note – for other filters (such as price or stock), you won’t need to set up any attributes.
If you haven’t done so already, you’ll want to add categories, tags, and attributes to your WooCommerce products. These taxonomies make it easier for customers to find their desired items. Moreover, WooCommerce product filter blocks won’t work without these classifications.
Start by 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 store:
You’ll need to enter a name and slug for your new attribute. Then, click on Add attribute to save the classification. Note that you can follow the same process for product categories (and subcategories) and tags.
Then, open up your products to add their taxonomies. You can do this by navigating to Products > All Products and clicking on an item.
Now, scroll down to the Product data section and open the Attributes menu:
You can add attributes to your product by selecting them from the dropdown menu and clicking on Add. Then, choose the dropdown arrow next to the attribute to enter your custom information.
For instance, in our example, we’ve added Red as a Color attribute to our product:
When you’ve added all your variables, click on Save attributes. Now customers will be able to find items with these characteristics through your WooCommerce product filter block.
Step 2: Insert your product filter block
Next, you’ll need to open the page or post where you’d like to use your product filter block. You might also consider utilizing the element in a sidebar on your shop pages so that customers can filter their results while they browse.
First, you’ll need to add the All Products block to your page. Otherwise, WooCommerce won’t be able to filter and display specific items.
You can do this by clicking on the + button and searching 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 choose one from your dropdown list. We’ll be using Color in our example:
Your block will now be transformed to display a new title and a list of your chosen product attributes (such as the different item colors):
You could leave the block as is if you like how it looks. Alternatively, in the next step, we’ll discuss how to customize this element’s appearance.
Step 3: Configure the block settings
Next, you can customize your WooCommerce product filter block’s appearance. Simply click on the Filter Products by Attribute block and then select the gears icon to the right:
Here, you can choose whether to display your Product count. This setting could be handy if you have a large catalog of items and want to give your customers an extensive range to choose from.
You can also choose the Heading Level for your product attributes. The default value is H3, but you can select from H2 to H6 to fit your store’s stylistic needs.
If you scroll down, you should see some additional configurations under Block Settings:
Here you can choose your Query Type. If you opt for And, WooCommerce will only display products that contain all of the customer’s specified attributes. Meanwhile, the Or option will show all items that have at least one of the attributes.
Under Display Type, you can choose to display your attributes in list or dropdown format. Both options are relatively user-friendly.
Finally, you can choose to enable the Filter button. If you switch it on, customers will need to click on Go to filter their search results. However, if you leave it off, simply selecting one of the attributes will update the displayed products.
That’s it! Your WooCommerce product filter block is now ready for action:
Simply save and publish your changes. Customers will now be able to filter their product searches with specific attributes.
An overview of WooCommerce product filter plugins
Apart from the free WooCommerce blocks, you can also access third-party plugins to add more flexibility for 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 controlled by other product filter blocks on the same page.
- Search: Creates a filtered search function for your WooCommerce store.
- Categories: Shows products that correspond to particular categories, such as clothing type or gender.
- Attributes: Displays products with specific attributes, such as color, brand, size, shape, make, or particular features.
- Tags: Shows products that correspond to product tags, including “featured,” “logo,” or “trending.”
- Price: Displays products within specified price parameters.
- Rating: Presents products according to their average rating.
- Sale: Displays only products that are on sale.
- Stock: Shows only products that are in stock.
- Reset: Enables customers to reset the product filter parameters. Then, they can see all your available items or enter new settings to customize their searches.
👉 Alternatively, you might consider using the WOOF Products Filter for WooCommerce plugin:
With this plugin, customers can filter items according to their categories, attributes, tags, custom taxonomies, and prices. Plus, the displayed results are typically 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. The premium plugin includes additional features, such as category icons, custom styles, and a hide/show filters button.
Get started with WooCommerce product filters today
WooCommerce product filter blocks enable customers to search for items in your store with particular characteristics. Otherwise, users would have to scroll through your entire catalog and likely feel frustrated. Therefore, using one of these blocks is essential to improving your online shop’s UX.
Fortunately, it’s also very easy to use a WooCommerce product filter block. You’ll simply need to add taxonomies, such as categories, attributes, or tags, to your products. Then, you can use the corresponding WooCommerce block alongside an All Products block on your shop page.
For more flexibility, you can also install a dedicated WooCommerce product filter plugin.
😎 If you want to find even more ways to create a better WooCommerce store, you can also check out our collection of must-have WooCommerce plugins.
Do you have any questions about using WooCommerce product filter blocks? Let us know in the comments section below!