How to Use the Active Product Filters WooCommerce Block

Last Updated on September 2, 2022 by 2 Comments

How to Use the Active Product Filters WooCommerce Block
Blog / WordPress / How to Use the Active Product Filters WooCommerce Block

Most modern online stores enable you to look for specific types of products using filters. TheĀ Active Product FiltersĀ WooCommerce block makes that process easier, by helping you check and see what product filters you have active.

In this article, weā€™re going to show you how theĀ Active Product FiltersĀ block works and how to place it. Weā€™ll go over how to configure the filter, and discuss some tips and tricks for using it effectively.

Letā€™s get to it!

How to Add the Active Product Filters WooCommerce Block to Your Post or Page

Before we can talk about the Active Product FiltersĀ block, we need to discuss the other filtering elements that WooCommerce offers. When you add theĀ Active Product FiltersĀ element to a page or a post, it displays the filters youā€™ve chosen via other blocks. This block enables you to disable specific filters to broaden your search, but it doesnā€™t offer the option to add new ones.

To place this element, open the WordPress Editor and select the option to add a new block. Use the search feature to look for Active Product Filters:

Adding the Active Product Filters block in WordPress

Since you havenā€™t indicated any filters yet, the Active Product FiltersĀ block will display two placeholder options within the editor. Hereā€™s what the block looks like once you place it:

The Active Product Filters WooCommerce block

The block separates filters by attributes. You can remove specific active filters to broaden the product search, or use the Clear AllĀ button to do away with all options.

To add new selectors, youā€™ll need to use one of the other filter-related WooCommerce blocks. The Block Editor offers three such options: Filter Products by Price, Filter Products by Attribute, and Filter Products by Stock.

As an example, hereā€™s what it looks like if you pair theĀ Filter Products by AttributeĀ WooCommerce block with theĀ Active Product FiltersĀ element:

Selecting product filters and managing active filters in WordPress

You can pair theĀ Active Product FiltersĀ block with whichever other WooCommerce filtering element you want. Although it shows filter placeholders when youā€™re using the Block Editor, those options wonā€™t appear for visitors. Instead, theyā€™ll only see the filters they select using one of the other blocks.

Active Product Filters WooCommerce Block Settings and Options

TheĀ Active Product FiltersĀ block doesnā€™t offer a broad range of configuration options. If you mouse over the block in the editor to access its formatting menu, youā€™ll only see options to re-arrange its placement or to transform it into a different type of element:

The formatting options for the Active Product Filters block

To access the blockā€™s styling settings, select it and click on the gear icon in the top-right corner of the screen. That will open a menu to the right of the block. This menu includes options for changing the style in which the block displays active filters, and for modifying the heading level for the Active FiltersĀ text:

The settings for the Active Product Filters block

By default, theĀ Active Product FiltersĀ block uses a list style to display active filters. Hereā€™s what the block looks like if you switch the style to ā€œChipsā€:

Switching the style of the Active Product Filters block

Aside from those options, the blockā€™s settings menu offers the option to add CSS classes. You can use those classes to add custom CSS and modify the blockā€™s style further.

Tips and Tricks for Using the Active Product Filters Block Effectively

Itā€™s important to reiterate that you canā€™t use the Active Product FiltersĀ block without also adding one of the other filtering elements that WooCommerce offers. As its name implies, this block enables users to manage active filters. However, it doesnā€™t let users add or select filters.

To do that, youā€™ll need to use one of the following three blocks: Filter Products by Price, Filter Products by Attribute, or Filter Products by Stock.

You can add one or more of those blocks and pair it alongside the Active Product FiltersĀ element. However, the most logical place to add these blocks is within your ShopĀ page.

Itā€™s also worth noting the Active Product FiltersĀ block wonā€™t show up on the front end of your site until you select at least one filter:

Using a product price filter in WooCommerce

From a usability standpoint, it makes sense to place theĀ Active Product FiltersĀ block beneath other elements. That way, the block wonā€™t push the other elements down once it appears on the page.

Frequently Asked Questions About the Active Product Filters WooCommerce Block

TheĀ Active Product FiltersĀ block is very easy to use and to pair alongside other elements. However, if you still have any questions about how to use it, this section aims to answer them.

Can I Use the Active Product Filters Block on Its Own?

You can place theĀ Active Product FiltersĀ block anywhere on your website. However, the block wonā€™t appear on your pages unless you offer users a way to select which filters they want to use. For that, youā€™ll need to use the Filter Products by Price, Filter Products by Attribute, or Filter Products by Stock block.

Why Doesnā€™t the Active Product Filters Block Show Up on My Site?

TheĀ Active Product FiltersĀ block only appears if you select one or more filters. If you have no active filters, the block wonā€™t display on the front end. Additionally, if you use the Clear AllĀ option to remove all active filters, the block will hide itself.

Where Should I Place the Active Product Filters Block?

It makes the most sense to place theĀ Active Product FiltersĀ block on your storeā€™s ShopĀ page. That way, customers will be able to filter products using whichever options you give them, and manage those filters using the Active Product FiltersĀ block.

Conclusion

Product filters enable customers to navigate your storeā€™s product catalog with ease. The more WooCommerce attributes you set up, the easier it becomes for customers to use filters to find the products theyā€™re looking for. By using the Active Product Filters WooCommerce block, you give users more control over what filters they can use.

Itā€™s important to remember that theĀ Active Product FiltersĀ blockĀ onlyĀ shows up after users select one or more filters. To make that possible, youā€™ll need to use one of the following blocks: Filter Products by Price, Filter Products by Attribute, or Filter Products by Stock.

Do you have any questions about how to use theĀ Active Product FiltersĀ WooCommerce block? Letā€™s talk about them in the comments section below!

Featured Image via GoodStudio / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time šŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

7 Best WordPress Website Builders in 2023 (Compared)

7 Best WordPress Website Builders in 2023 (Compared)

Posted on November 16, 2023 in WordPress

When you’re in the market for a new website, there are a lot of factors to consider. Price, features, and platform all come into play. WordPress has a considerable market share and is one of the world’s most customizable content management systems. With over 44% of the internet built on...

View Full Post
4 Best AI WordPress Website Builders in 2023 (Compared)

4 Best AI WordPress Website Builders in 2023 (Compared)

Updated on November 13, 2023 in WordPress

WordPress is one of the world’s most popular content management systems (CMS), with over 44% of the internet built on it. For over a decade, website builders have allowed users to quickly build WordPress sites with drag-and-drop editors and easily load pre-design templates. With the emergence...

View Full Post

2 Comments

  1. Thank you for this post. So much insights into product management in woocommerce. I’ve been working on various ecommerce sites for clients and this is something that could help in making product listing a lot simpler and efficient.

    • You’re welcome, Paul šŸ™‚

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

šŸ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi