Tutorial

Create your first WooCommerce product filter

Build one working Fuzzy filter set, add common WooCommerce filter blocks, publish it, and verify that the storefront updates without a full page reload.

Updated May 24, 2026 Published Source-backed

When to use this

Use this guide when you want the first visible filter on a WooCommerce shop page. It keeps the path short: create a filter, choose where it appears, add blocks, save, and test the result with real products.

Before you start

WooCommerce is active and the store has published products.
Products have at least one useful category, price range, or attribute.
Fuzzy is installed and you can open the WordPress admin area.
You can view the shop page in another browser tab for testing.

Note

This article intentionally starts from the task. The generated Reference covers every setting later, but the first setup should not require reading the full option map.

Steps

Create a filter set

In WordPress admin, open Fuzzy, create a new filter, set a clear title such as Shop filters, and leave the status as Published.

Filter setup screen

Fuzzy admin Filter Builder

Title Shop filters Status Published Shortcode Use the shortcode copied from this field
Choose where the filter appears

For the first run, show the filter on WooCommerce pages. If your store needs tighter control, switch to custom selection and pick Shop Page, Product Categories, Search Results, or another target.

Display On Pages All WooCommerce Pages

Page Types Shop Page, Product Categories, Search Results

Hide Without Products On
Add core filter blocks

Add the blocks that match your catalog. A practical first set is Category, Price, Attribute, Stock, and Sort. Keep the labels shopper-friendly: Category, Price, Color, Size, In stock.

Filter blocks screen

Color Buttons / color swatches Show count

Price Slider or ranges list Auto min/max

In stock Stock status Hide empty
Save and test the storefront

Save the filter, open the shop page, and select one or two values. Products, selected chips, result count, pagination, available terms, and price range should update together.

Storefront result after filtering

Filters

12 products found /shop/?color=black&price=50-100

Onyx Runner$79

Shadow Flex$89

Urban Hoodie$64

Trail Cap$28

Expected result

The shop page shows a visible filter, shoppers can select values, and the product grid updates in place. The selected values remain visible as chips or active controls, and the URL reflects the chosen filters unless URL updates are disabled for that filter.

Place with shortcode or widget

If the filter should appear in a custom layout, copy the shortcode shown by the filter editor and paste it into the page, widget, or builder area where the filter belongs.

Shortcode example

Paste the shortcode copied from the filter editor.

AJAX selector check

If the products update but another storefront element does not, check the AJAX selectors. Start with the defaults and only change them when the theme uses custom markup.

Selector	Default	When to change it
Products Container Selector	`.products`	The product grid wrapper has a custom class.
Pagination Selector	`.woocommerce-pagination`	Pagination stays stale after filtering.
Result Count Selector	`.woocommerce-result-count`	The count text does not match the filtered result.
OrderBy Selector	`.orderby`	The sort control is not updated or preserved.

SEO URL check

For the first filter, keep URL updates on so the selected state can be shared and restored by the browser Back button. Later, decide whether your SEO strategy uses query, hash, or clean URL behavior.

Limit

Do not publish broad SEO promises for every filtered combination. Use canonical, robots, noindex, and sitemap rules based on the store's real taxonomy and attribute strategy.

Mobile check

For mobile-first stores, review the default mobile breakpoint, collapse behavior, and layout mode. Floating filter pages stay marked needs-verification until the Free/Pro split is confirmed.

Touch-friendly behavior

The mobile layout should keep the product grid readable and open filters only when the shopper asks for them.

Performance check

Large catalogs should use index tables and cache where appropriate. Static or instant count modes are safer defaults than live counts on stores with many products, variations, or heavy theme customization.

Enable Index Tables On

Cache Filter Results Off by default

Count Calculation Mode Static / Instant / Live

Troubleshooting

Symptom	Likely cause	Fix
The filter does not appear on the shop page.	The display rules do not include the current page.	Check Display On Pages and Page Types.
Products update but pagination stays old.	Pagination selector points to the wrong element.	Update the Pagination Selector for the theme.
Counts feel slow on a large catalog.	Live counts are expensive for this store.	Use index tables and consider Static or Instant counts.
The URL does not change after filtering.	URL updates may be disabled for this filter.	Review Apply Params From URL and URL behavior settings.

Related generated Reference entries

Generated Reference pages should expose public labels and practical fields only. The mock below shows the shape without exposing internal option IDs or block keys.

Display On Pages

Location: Filter Editor / Setup / Display Rules
Type: Select
Default: All WooCommerce Pages
When to use: Choose where this filter should appear.

Hide Empty

Location: Filter block / Data and Counting
Type: Toggle
Default: Depends on block
When to use: Prevent shoppers from choosing empty values.

AI summary

Fuzzy creates WooCommerce filter sets with display rules and filter blocks, then updates products, pagination, result count, active filters, available terms, and price range through AJAX when selectors are configured correctly.

When to use this

Before you start

Steps

Create a filter set

Choose where the filter appears

Add core filter blocks

Save and test the storefront

Expected result

Place with shortcode or widget

AJAX selector check

SEO URL check

Mobile check

Touch-friendly behavior

Performance check

Troubleshooting

Related generated Reference entries

Display On Pages

Hide Empty

AI summary

Related articles