Woo Product Filter
Found in the Elementor panel under Dotjuice → Woo Product Filter. Requires WooCommerce.
How it works
This widget renders one or more filter groups (category, tag, brand, or attribute) and, by default, refreshes your product grid via AJAX whenever a shopper makes a selection — no full page reload needed. It's designed to sit on your Shop page or a category archive, alongside your product grid.
Building your filter groups
Each filter group is one item in the Filters repeater. Add as many as you need — one per category/attribute you want shoppers to filter by.
| Setting | Default | What it does |
|---|---|---|
| Filter Title | Empty | An optional heading above this group. |
| Filter By | Category | Category, Tag, Brand, or Attribute. |
| Taxonomy Slug | — | Only for Attribute — the technical slug of the attribute (e.g. pa_color). |
| Display Type | List | List (simple clickable list) or Buttons (clickable button/swatch style). |
| Match Logic | Match Any | Whether selecting multiple terms in this group should show products matching any of them, or all of them. |
| Show products without this attribute | Yes | Attribute filters only. When a term is selected, decides whether products that don't have this attribute set at all stay visible (Yes) or are hidden (No). |
| Enable Colour Swatches | Off | Buttons display only. Shows each term's assigned colour as a clickable swatch instead of a text button — colours come from the Product Attribute Colours settings page in the free plugin. Terms sharing the same colour are merged into a single clickable swatch. |
| Show this filter | Always | Always, only when any other filter is selected, or only when a specific other filter type has a selection — see "Dependent filters" below. |
| Hide unavailable terms | Off | When on, terms with zero matching products (given the current selection) are removed entirely rather than just visually faded. |
Dependent filters
To build a filter group that only appears once another one is used — for example, showing a "Size" filter only after a category is chosen — set Show this filter to "When a specific filter is selected" and choose which filter type triggers it. If the triggering selection is cleared, the dependent group's own selections are cleared too.
AJAX & URL settings
| Setting | Default | What it does |
|---|---|---|
| Update products with AJAX | On | Filters refresh the grid in place. Turning this off makes every filter selection a normal page navigation with the filter reflected in the URL instead. |
| Live update | Off | AJAX mode only. When on, the grid refreshes automatically the moment a filter is clicked. When off, shoppers make their selections and click an "Apply Filters" button to refresh. |
| Update browser URL | On | AJAX mode only. Keeps the URL in sync with the current filter selection as shoppers filter, so the page can be bookmarked, shared, or reloaded and show the same results. |
| Products container selector | Empty (auto-detect) | Advanced: the CSS selector of your product grid, if the widget doesn't auto-detect it correctly. Leave empty unless you're troubleshooting a grid that isn't updating. |
| Contextual filtering | Off | When placed on a category archive page, scopes filter options and counts to that category's products only, rather than your whole catalogue. |
Styling
Filter Group headings, Buttons (Normal/Hover/Active states), Swatches (Normal/Selected states), and Faded terms (opacity, greyscale, scale for unavailable options, plus a toggle for whether faded/unavailable terms can still be clicked).
Setting it up
- Add the widget to your Shop page or category archive template, near your product grid.
- Add a filter group for each way you want shoppers to filter — start with Category, then add Attribute groups for things like colour or size.
- For colour attributes, set up your colours first on the Product Attribute Colours page, then enable Enable Colour Swatches on that filter group.
- Leave AJAX and URL settings at their defaults for most stores — instant, bookmarkable filtering.
- Test: apply a filter, copy the URL, and open it in a new tab (or with JavaScript disabled) to confirm it reproduces the same filtered results.
Good to know
- Filtered URLs work even without JavaScript — if a shopper shares a filtered link, or your page is cached, the filter still applies correctly on a plain page load, not just via AJAX. This is deliberate and doesn't need any extra setup.
- Colour swatches only work for Attribute filter groups (not category/tag/brand), and require colours to already be configured on the Product Attribute Colours page — a term with no colour assigned won't show a meaningful swatch.
- If your product grid doesn't refresh correctly after filtering, check the Products container selector field — leaving it empty works for most themes' standard WooCommerce/Elementor product grids, but an unusual custom grid layout may need this set explicitly.