The Product Filters block helps shoppers narrow the products shown in a Product Collection by price, rating, attribute, availability, category, brand, or tag.
Filters update the product list without reloading the page by default. If the surrounding Product Collection block has Reload full page enabled, applying or removing a filter reloads the storefront page instead.
Add the Product Filters block
↑ Back to topAdd the Product Filters block to a page or template that contains a Product Collection block. For a store catalog, open Appearance > Editor > Design > Templates, select the Product Catalog template, and add Product Filters near the Product Collection.
The block is context-aware. It filters the products in the relevant collection or archive, including product catalog and product taxonomy templates.
Choose how filters update the page
↑ Back to topSelect the surrounding Product Collection block, open its Advanced settings, and use Reload full page to choose the storefront behavior:
- Leave the setting disabled to update filtered products without a full page reload.
- Enable the setting to reload the storefront page whenever a shopper applies or removes a filter. This can help when another block or customization inside the collection requires traditional page navigation.
Choose the small-screen behavior
↑ Back to topSelect the Product Filters block to find Collapse filters on small screens in the block settings sidebar:
- When enabled, shoppers select Filter products to open the filters in a drawer.
- When disabled, the filters remain visible directly on the page at small screen sizes.
Add and configure filters
↑ Back to topAdd individual filters inside the Product Filters block. The filters available for a store include:
| Filter | What shoppers can filter | Key settings |
|---|---|---|
| Active Filters | Displays the filters currently applied and lets shoppers remove them. | Includes removable chips and a clear filters control. |
| Price Filter | Products within a price range. | Show or hide price inputs and place them inline with the slider or on a separate line. |
| Rating Filter | Products by customer rating. | Show product counts. The filter appears on the storefront only when rated products are available. |
| Attribute Filter | Products by an attribute such as color or size. | Choose List or Chips and show or hide product counts. |
| Availability Filter | Products by availability, such as in stock. | Choose List or Chips and show or hide product counts. |
| Category Filter | Products by category. | Choose List or Chips and show or hide product counts. |
| Brand Filter | Products by brand. | Choose List or Chips and show or hide product counts. |
| Tag Filter | Products by tag. | Choose List or Chips and show or hide product counts. |
If you add more than one instance of the same filter to a page, their selected and active states stay synchronized. This supports layouts such as active filters above a collection and selectable filters in a sidebar.
Active Filters
↑ Back to topThe Active Filters block displays the filters a shopper has applied. Each active filter appears as a removable chip. Shoppers can remove one selection or clear all filters.
Active labels identify both the filter and selection. For example, selecting the in-stock option displays Availability: In stock.
Price Filter
↑ Back to topThe Price Filter lets shoppers choose a minimum and maximum product price with a slider.
- Use Input fields to show or hide editable minimum and maximum price fields.
- When input fields are shown, choose whether they appear inline with the slider or on a separate line.
Attribute Filter
↑ Back to topThe Attribute Filter lets shoppers filter products by a product attribute, such as color or size. Choose the attribute when adding the block.
In the block settings sidebar, choose List or Chips and decide whether to show the product count for each option. When the selected attribute uses the Color / image type, the List style can show each term’s color or image swatch with its label.
The store needs at least one product with the selected attribute before that filter can show meaningful options.
Availability Filter
↑ Back to topThe Availability Filter lets shoppers filter products by availability. Depending on the store’s products, options can include In stock, Out of stock, and On backorder.
Use the block settings sidebar to display the options as a List or Chips. You can also show the product count for each option.
Rating Filter
↑ Back to topThe Rating Filter lets shoppers filter products by customer rating. You can show a product count next to each rating option.
The filter does not appear on the storefront until at least one product has a customer rating.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- 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.