WooCommerce Product Filters block helps shoppers narrow a catalog without searching through every product. Its role is connected to the Product Collection block: filters act on the products displayed by the relevant collection or archive. This makes the block useful for stores where customers need to choose by price, product characteristics, category, stock status or other catalog terms.
This guide covers the documented core WooCommerce block functionality. It explains how to place the block in a catalog template, configure the available filter types, choose the interaction on desktop and mobile, and investigate options that do not appear. Filter visibility depends partly on the store’s product data and the context of the collection, so adding every possible control is not automatically the right approach.
What the WooCommerce Product Filters Block Does
Product Filters and Product Collection
The Product Filters block narrows the products displayed in a related Product Collection block. It is context-aware, which means that its result depends on the collection or archive in which it is placed. The documented contexts include the product catalog and product taxonomy templates. The Product Collection block is used by default in templates such as the Product Catalog, Products by Category, Products by Tag, Products by Attribute, Products by Brand and Product Search Results.
The documented filter types are Active Filters, Price, Rating, Attribute, Availability, Category, Brand and Tag. Active Filters can help shoppers understand which conditions are currently applied. The other controls address specific product data. Their usefulness depends on whether the catalog actually contains matching prices, ratings, attributes, taxonomy terms or stock states.
Before Configuring Filters: Check the Catalog Structure
Catalog Context and Product Data
Before editing the layout, confirm that the target page or template contains a Product Collection block. Product Filters should be placed in the same relevant catalog or archive context so that the intended collection receives the filtering conditions. Adding a filter to an unrelated page does not establish the correct relationship with the products shoppers are viewing.
Next, review the data that the storefront is expected to expose. Categories, tags and attributes organize products and support catalog filtering. Ratings and stock information affect whether rating and availability choices can appear. The catalog should also contain products assigned to the relevant category, brand, tag or attribute. This data-first check is important because a missing choice may reflect the catalog rather than a problem with the block.
Keep this documented core behavior separate from behavior introduced by a third-party theme, page builder, caching layer, multilingual plugin or product-filter extension. Test the actual store configuration instead of assuming that every integration will behave identically.
How to Add Product Filters to the Catalog Template
Standard Product Catalog Setup
For the standard WooCommerce catalog setup, edit the Product Catalog template in the Site Editor:
- Open Appearance > Editor > Design > Templates.
- Select the Product Catalog template.
- Locate the layout containing the Product Collection block.
- Add the Product Filters block near that collection in the relevant catalog context.
- Add the individual filter blocks required for the catalog and configure their settings.
The key relationship is not simply the visual position of the controls. The Product Filters block must work with the relevant Product Collection or archive. The same context-aware principle applies when editing another documented catalog or taxonomy template. Exact editor labels can vary with the site’s configuration, so verify the result in the actual storefront.
Use only the controls that match the way products are organized. For example, an attribute filter is meaningful when products use the selected attribute, while an availability filter depends on stock data. A concise set of maintained filters can be easier to understand than a long list of overlapping or poorly maintained terms.
Configuring Price, Attribute, Category, Brand, Tag, Rating and Availability Filters
Price and Attribute Controls
The Price Filter lets shoppers select a minimum and maximum price with a range slider. Editable input fields can also be displayed. They may appear inline with the slider or on a separate line, depending on the selected configuration. This gives the catalog a direct price-based navigation control without requiring shoppers to inspect products one by one.
The Attribute Filter is intended for characteristics such as color or size. Its presentation can use List or Chips, and optional product counts can be displayed. When the selected attribute uses the Color / image type, color or image swatches can be used as documented for that attribute. These choices should reflect the store’s actual product data rather than a desired layout alone.
Before publishing an attribute filter, check that products use the selected attribute and that its terms are understandable to shoppers. Empty or inconsistent attributes can make the control less useful, even when the block itself is configured correctly.
Taxonomy, Rating and Stock Filters
Category, Brand and Tag filters use catalog taxonomy terms to help shoppers narrow the collection. These filters can use List or Chips presentation and may show product counts. Their available choices depend on the terms used by products in the relevant catalog context.
The Availability Filter can expose options such as In stock, Out of stock and On backorder, depending on the store’s products and stock data. It also supports List or Chips presentation and optional product counts. Do not assume that all three choices will appear in every store.
The Rating Filter requires at least one product with a customer rating before it appears on the storefront. This means that its absence can be explained by the current catalog data. More filters are not automatically better: excessive categories, brands, tags or attributes can make navigation harder to understand.
Choosing No-Reload or Full-Page Filter Updates
By default, applying or removing a filter updates the product list without a full-page reload. This creates a filtering interaction in which the relevant collection changes while the shopper remains in the catalog context.
The surrounding Product Collection block includes a Reload full page setting. When it is enabled, filtering instead reloads the storefront page. This is an interaction choice, not a documented guarantee of better performance, usability or conversion. Test the selected behavior with the actual catalog template, product data and site customizations before treating it as final.
Mobile Filter Layout: Drawer or Visible Controls
Configuring Collapse Filters on Small Screens
On small screens, the Product Filters block can either remain visible or be collapsed behind a control. Enable Collapse filters on small screens when shoppers should use Filter products to open the filters in a drawer. Disable that setting when the filters should remain directly visible on the page.
The drawer option changes the layout and visibility of the controls; it does not establish a guaranteed mobile performance or conversion result. Choose the arrangement that fits the actual catalog design, then test it at the site’s responsive breakpoints. Check that shoppers can open the controls, understand the active conditions and return to the product collection after applying or removing a filter.
Troubleshooting Missing or Empty Filter Options
A Data-First Troubleshooting Checklist
When a filter or one of its options is missing, start with the product data and block context rather than assuming that the feature is malfunctioning. Use the following checklist:
- Rating: confirm that at least one product has a customer rating. The Rating Filter does not appear on the storefront before that condition is met.
- Attributes: verify that products use the selected attribute. Without matching products, the Attribute Filter cannot show meaningful choices.
- Availability: review the stock data for the catalog. In stock, Out of stock and On backorder choices depend on the store’s products.
- Categories, brands and tags: confirm that products use the relevant terms and that the catalog contains matching products.
- Collection context: check that the Product Filters block is placed with the relevant Product Collection in the intended catalog or archive template.
- Actual storefront: test the configured template, responsive layout and product data rather than relying only on the editor view.
These checks describe the documented core WooCommerce block relationship and product-data conditions. They do not establish a diagnosis for every third-party integration or extension. If the data and context appear correct, compare the behavior in the actual store configuration before changing additional components.
To configure the WooCommerce Product Filters block, begin with the relevant Product Collection and catalog template. Add only filters supported by meaningful product data, then select the documented price, attribute, taxonomy, rating and availability settings that match the store. Decide whether filtering should update the collection without a full-page reload, and choose whether small-screen controls remain visible or open in a drawer. Finally, test the storefront with real products, stock states, ratings and responsive layouts. The documentation does not establish universal compatibility, guaranteed performance improvements or one filter configuration for every store. Explore our WordPress plugins, WooCommerce extensions, themes and membership plans to find the right tools for your website.