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.
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.
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 -
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 PagesPage Types Shop Page, Product Categories, Search ResultsHide 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 countPrice Slider or ranges list Auto min/maxIn 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 12 products found /shop/?color=black&price=50-100Onyx 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.
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.
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.
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.