1. Add the Product Filters block
According to WooCommerce, the Product Filters block helps shoppers narrow the products shown in a Product Collection. That is the prerequisite: a Product Collection block on the same page or template, whose products the filters use as their result. The documentation belongs to the free, core WooCommerce plugin, so no extra filter plugin is needed for this block.
By default, filters update the product list without a full page reload. If the surrounding Product Collection block has Reload full page enabled, applying or removing a filter reloads the page instead. WooCommerce may enable and lock this setting when the collection contains blocks that do not support client-side navigation.
- Open Appearance > Editor > Design > Templates and select the Product Catalog template.
- Add Product Filters near the Product Collection block. If the template uses a pattern with restricted layout controls, select Edit pattern first.
- Add the individual filters inside the Product Filters block.
- Open the page, apply a filter and check that the list changes. Then remove it and check that the original results return.
2. Which filters are available
The block offers Active Filters (shows the applied filters and lets shoppers remove them), Price Filter, Rating Filter, Attribute Filter, Availability Filter, Category Filter, Brand Filter and Tag Filter. Attribute, availability, category, brand and tag can be shown as a List or as Chips, with or without product counts.
To filter by attribute, such as colour or size, you choose the attribute in the Attribute Filter. If the attribute uses the Color / image type, the List style can show each term's swatch next to its label. The Rating Filter only appears once at least one product has a customer rating. Availability options can include In stock, Out of stock and On backorder, depending on your products.
- Decide which properties customers narrow by most often, usually category, price, brand and one or two attributes.
- Use a global attribute or taxonomy for each of them instead of free text in the description.
- Keep spellings consistent so that “Blue” and “blue” do not show up as two values.
3. Filters on mobile: the overlay
The Overlay setting decides how filters appear: Off keeps them in the page content, Mobile shows them in an overlay at or below the breakpoint and inline above it, and Always uses the overlay at every width. Mobile is the default. With Mobile or Always you also choose whether the overlay opens on the left or right.
The breakpoint uses the configured Tablet viewport, otherwise the Mobile viewport. If neither is set, WooCommerce uses 782px. In the Styles tab, Position Sticky keeps the filters visible while shoppers scroll.
4. When a filter value is missing
WooCommerce says the filter options depend on the attribute terms assigned to products in the current collection. If an option is missing, check those products and their attribute terms. A filter only shows what is maintained cleanly in your product data.
Example
A colour filter doesn't show “Red” although the store sells red shirts. If the colour is only in the product title and not assigned as an attribute term, the filter doesn't know it. Assign the attribute and the value appears.
5. Filters in the search, not only in product lists
Product Filters works on Product Collection lists such as the catalog and category pages. If you want filters right in the search window, plus typo tolerance and matches for word parts, a separate search can help.
Grumeria builds a feed from your store's public product data at https://grumeria.com/api/woocommerce-feed?shop=your-shop.com, without a feed plugin. Categories and brand come along and can be used as filters. Attributes such as colour or size are not in this feed; if you need them as filters, use a feed from a feed plugin (CSV, XML or Google Shopping) that contains these fields. You choose which filters the search window shows in Grumeria.