Product Filter blocks

Effective product filtering helps provide a seamless shopping experience, so your customers can find what they need and get to checkout smoothly. WooCommerce offers a range of product filtering blocks that allow shoppers to easily find products in your shop’s catalog pages based on various criteria. Here we’ll explore the different product filter blocks available, including Active Filters, Filter by Price, Filter by Attribute, Filter by Stock, and Filter by Rating. Each section will delve into the structure of these blocks and how to customize them.

Active Filters

↑ Back to top

The Active Filters block shows all the product filters that are currently active, and enables customers to disable active filters.

This block works well in tandem with the Filter by Price, Filter by Attribute, Filter by Stock, and Filter by Rating blocks. When users select one or more filters from filter blocks, the Active Filters block will display those filters.

Active Filters – Block Structure

↑ Back to top

The active filters block is made up of 2 inner-blocks:

• A heading – which can be removed 
• The Active Filters Controls block – which is locked.

Customizing the Active Filters Block 

After selecting the “Active Filters Controls” block, in the sidebar block settings there is an option to control how selected filters are displayed.

Filter by Price

↑ Back to top

The Filter by Price block enables customers to filter products by choosing a price range.

Filter by Price – Block Structure

↑ Back to top

The Filter by Price block is made up of 2 inner-blocks:

• A heading – which can be removed 
• The Filter by Price Controls block – which is locked.

Customizing the Filter by Price Block 

The Price Range Selector can have editable text input fields, as well as sliders to adjust the price range, or be limited to the draggable sliders.

When the price range selectors are set to be editable, you can choose whether to make the price input fields inline with the slider, or on their own line.

Filter by Attribute

↑ Back to top

The Filter by Attribute block enables customers to filter products based on selected attributes.

Filter by Attribute – Block Structure

↑ Back to top

The Filter by Attribute block is made up of 2 inner-blocks:

• A heading – which can be removed 
• The Filter by Attribute Controls block – which is locked.

Customizing the Filter by Attribute block

↑ Back to top

Access the block’s settings in the sidebar after selecting the “Filter by Stock Controls” inner-block.

There are settings available to:

• Include or omit the product count.
• Allow selecting a single, or multiple options.
• Select the Filter Conditions – if multiple options are allowed to be selected.
• Set the Display Style to list or dropdown.
• Select the Product attribute to be filtered by.
• Configure the text color.
• Hide or show the Apply filters button.

To use the Filter by Attribute  block, you’ll need to have at least 1 product on your store that has an attribute assigned to it.

Filter by Stock

↑ Back to top

The Filter by Stock block enables customers to filter the product grid by stock status.

Filter by Stock – Block Structure

↑ Back to top

The Filter by Attribute is made up of 2 inner-blocks:

• A heading – which can be removed 
• The Filter by Stock Controls block – which is locked.

Customizing the Filter by Stock block

↑ Back to top

Access the block’s settings in the sidebar after selecting the “Filter by Stock Controls” inner-block.

There are settings available to:

• Display the product count for each stock status.
• Allow selecting a single, or multiple options.
• Set the Display Style to list or dropdown.
• Hide or show the Apply filters button.

Filter by Rating

↑ Back to top

The Filter by Rating block lets customers filter the product catalog by rating. If no products in your store have ratings, this filter option will display when a product receives a review.

Filter by Rating – Block Structure

↑ Back to top

The Filter by Rating block is made up of 2 inner-blocks:

• A heading block – which can be removed
• The Filter by Rating Controls sub-block – which is locked.

Customizing the Filter by Rating block

↑ Back to top

Access the block’s settings in the sidebar after selecting the “Filter by Rating Controls” inner-block.

There are settings available to:

• Display product count next to the rating options.
• Allow selecting multiple ratings in the filter.
• Display the filter as a list, or dropdown.
• Show an “Apply filters” button

Questions and Support

↑ Back to top

Do you still have questions and need assistance? 

• If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the Woo Marketplace.
• Need ongoing advanced support, or a customization built for WooCommerce? Hire a WooExpert agency.
• Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know! 🙏