How to add product filters in WooCommerce
WooCommerce can add product filters without custom code using the Product Filters block. Add it beside the Product Collection on your shop template, configure the filter types, and use a plugin when you need AJAX controls, custom layouts or filters beyond the built-in options.
- 01Prepare your product data
- 02Open the shop template
- 03Add the filter types
- 04Set mobile and reload behaviour
- 05Test every filter combination
- 06Use a plugin for the fast way
What you need
- A WooCommerce store with products already added
- Administrator access to WordPress
- A block-compatible shop template or theme
Prepare your product data
Decide which choices shoppers actually need, such as price, category, colour, size, brand, rating or stock status. Keep the list short enough to use on a phone.
For attributes such as colour or size, create global attributes under Products > Attributes and assign their terms to the relevant products. The built-in attribute filter uses global attributes, not product-specific custom attributes.
Open the shop template
For a block theme, go to Appearance > Editor > Design > Templates and open the Product Catalog template. Find the product listing, usually a Product Collection block.
Add the Product Filters block near that collection. WooCommerce’s block is context-aware, so it filters the collection or archive it is associated with.
Add the filter types
Select the Product Filters block and add the individual filters you want. Depending on your WooCommerce setup, available filters include price, rating, attributes, availability, categories, brands and tags. Remove filters that do not help shoppers.
For each attribute filter, choose the global attribute to display. If a filter has no useful options, check that its terms are assigned to published products and that the products are visible in the catalogue.
Set mobile and reload behaviour
In the Product Filters block settings, enable Collapse filters on small screens if the sidebar would make the product grid too narrow. Shoppers will then open the filters in a drawer.
Select the surrounding Product Collection block and leave Reload full page disabled for live updates without a full page reload. Enable it only if another block or customisation needs traditional page navigation.
Test every filter combination
View the shop as a customer and test each filter on desktop and mobile. Check that the product count, sorting, pagination, category archives and reset controls still work.
If the grid disappears, first confirm that the filters are attached to the correct Product Collection. Then check that attributes are global and assigned to products. A separate homepage or custom product block can also behave differently from a normal shop or test page, so test the actual page customers use. Support reports have identified cases where filtering failed specifically on a static homepage.
The manual block route is fine for a straightforward catalogue. Its drawbacks are limited layout and filtering control, and possible compatibility problems when your theme, page builder or custom product grid does not use the expected WooCommerce collection.
Use a plugin for the fast way
When you need more filter types, a sidebar layout, customised controls or AJAX filtering across a complex catalogue, install a dedicated product-filter plugin instead of rebuilding the shop template.
Woo Product Filter PRO is a suitable option for price, categories, tags and attributes, with AJAX updates and customisable filter styles. Install its ZIP from Plugins > Add Plugin > Upload Plugin, activate it, then configure the filter set and place it beside the product grid. WordPress supports installing a plugin by uploading its ZIP from the Plugins screen.
Let Woo Product Filter PRO do it
AJAX filters for price, categories, tags, and attributes; choose it when shoppers need fast, customizable catalog filtering.
Sources
- woocommerce.com /document/woocommerce-product-search/blocks/product-filter-a…
- woocommerce.com /document/woocommerce-store-editing/customizing-shop-page-ca…
- wordpress.org /support/topic/how-to-filter-products-after-attribute-on-hom…
- wordpress.org /documentation/article/manage-plugins/?utm_source=openai
Questions
- Does WooCommerce have product filters built in?
- Yes, WooCommerce includes a Product Filters block for filtering a Product Collection or shop archive. It can provide filters such as price, rating, attributes, availability, categories, brands and tags, depending on the available block settings. You do not need a separate plugin for a basic catalogue, although a plugin gives you more layout, AJAX and filtering controls.
- Why is my attribute filter empty?
- An attribute filter is usually empty because the attribute is not global, its terms are not assigned to catalogue products, or the products are not visible. Create the attribute under Products > Attributes, assign its terms in each product’s Attributes section, save the products, and confirm that the attribute filter is set to the correct global attribute.
- Can I add filters to a normal WooCommerce page?
- Yes, but the filters must be associated with the product collection they are meant to control. On a standard page, add a Product Collection block and place the Product Filters block inside or alongside the relevant collection according to the editor structure. A filter placed next to an unrelated product grid may not affect that grid.
- Why do my products disappear after applying a filter?
- Products usually disappear because the filter returns no matching products or the filter is attached to the wrong collection. Check the product terms, global attribute assignments, catalogue visibility and the page template. Also test a separate shop or catalogue page, clear page and object caches, and temporarily disable other catalogue customisations to identify conflicts.