Filter Studio for WooCommerce

Build product filter panels from the dashboard. Pick which filters go in, design them with live preview, then drop the panel anywhere with a shortcode.

Completely standalone — it does not touch or depend on any other plugin.

---

Install

1. Plugins → Add New → Upload Plugin → choose filter-studio.zip → Install Now → Activate
2. A new Filter Studio menu appears in the sidebar
3. On activation a starter set called Shop sidebar filters is created with price brackets and sorting already configured

---

Quick start

Step 1 — Create your filters as product attributes.

Go to Products → Attributes. Create the attributes you want to filter by (Brand, Condition, Material, whatever suits your store). Tick Enable archives on each. Add the terms, then assign them to your products on each product's Attributes tab.

Filter Studio reads these automatically — you never edit the plugin to add a new brand.

Step 2 — Build a set.

Filter Studio → Add filter set. Click Add filter for each group you want. For each one pick a label and what it filters by. Price brackets and Sort get their own extra settings when you choose them.

Step 3 — Design it.

Scroll to the Design panel. Pick a preset (Dark, Light, or Inherit theme) then adjust colours. The preview on the right updates as you type.

Step 4 — Place it.

Copy the shortcode from the top of the edit screen and paste it wherever you want the panel.

---

Where to paste the shortcode

Setup	How
Block theme	Appearance → Editor → Product Catalog template → add a Shortcode block to the sidebar
Classic theme	Appearance → Widgets → Shop Sidebar → add the Filter Studio widget (no shortcode needed)
Elementor / Divi / Bricks	Drop in a Shortcode element
Template file	<?php echo do_shortcode( '[filter_studio id="12"]' ); ?>

---

Shortcodes

[filter_studio id="12"]

The filter panel. Attributes are all optional:

Attribute	Values	What it does
id	Set ID	Which set to show. Omit and the first set is used
groups	brand,price	Show only these filters, in this order
layout	vertical / horizontal	Sidebar column or a bar above the grid
style	dark / light / inherit	Override the saved design for this one instance
title	Any text	Small heading above the panel
collapsed	yes / no	Force every group open or closed
container	CSS selector	Override the results container for no-reload mode

[filter_studio_chips id="12"]

Removable pills showing what's currently filtered, plus a clear-all. Put this above your product grid.

[filter_studio_count]

Prints how many products matched, e.g. "24 products".

---

How filtering works

Filters travel in the URL, so results are bookmarkable, shareable, and back-button friendly:

/shop/?f_brand=rolex,omega&f_price=10k-25k&orderby=price-desc

• Two values in the same filter are combined with OR by default — Rolex or Omega. Switch a filter to All selected (AND) if you'd rather require every ticked term.
• Two different filters always combine with AND — a Rolex and between $10k–$25k.
• Two price brackets return the union of both ranges.
• Sorting uses WooCommerce's own orderby, so it plays nicely with the theme's sort dropdown.

---

Filter types

Filter by	Notes
Any product taxonomy	Categories, tags, brands, and every pa_* attribute
Price brackets	Fixed ranges like "Under $500" as a tick list, not a drag slider. Leave Max empty for "and above"
Sort order	Featured, Best selling, Top rated, Newest, Price up, Price down — labels editable
Star rating	4 stars and up, etc.
On sale	Products with an active sale price
Stock status	In stock, on backorder

Display each one as a checkbox list, radio list, dropdown, or pill buttons.

---

Behaviour modes

Reload the page immediately (default) — the most reliable option and the best for SEO. Works with every theme.

Update results without reloading — fetches the filtered page and swaps in the product grid, pagination, and result count. Needs the products container selector to match your theme. ul.products covers most themes; if your grid doesn't update, inspect the page and use the real selector. Falls back to a normal page load automatically if anything fails.

Wait for the Apply button — shoppers tick several boxes, then submit once. Good for large catalogues on slow connections.

---

Design

Six colours, all live-previewed:

Control	CSS variable
Panel background	--fst-bg
Accent (ticks & buttons)	--fst-accent
Heading & active text	--fst-text
Inactive option text	--fst-muted
Divider & border	--fst-line
Tick mark	--fst-tick

Plus corner radius, padding, max width, heading size, option size, and checkbox shape (square, rounded, or circle).

Each set's design is scoped to its own ID, so two sets on the same site can look completely different.

Need to go further? Add CSS to Appearance → Customise → Additional CSS:

.fst-panel--12 {
    --fst-accent: #c9a227;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

---

Customising the markup

Copy templates/filter-panel.php to your-theme/filter-studio/filter-panel.php and edit freely. Plugin updates won't overwrite it.

Hooks

Hook	Type	Use
fst_set_config	filter	Alter a set's resolved config
fst_group_options	filter	Add, remove, or reorder the options in a group
fst_query_clauses	filter	Modify the generated tax_query / meta_query
fst_product_taxonomies	filter	Control which taxonomies are offered as sources
fst_count_query_limit	filter	Cap on products scanned for counts (default 3000)

---

Troubleshooting

A filter list is empty. No published product uses that taxonomy yet. Terms with zero products are hidden on purpose. Check the attribute has Enable archives ticked and is assigned to products.

Filters do nothing. Your theme is running a custom product loop instead of the main query. Filter Studio hooks woocommerce_product_query, which only affects the main query. Switch to the shop page and test there first.

No-reload mode doesn't update the grid. The container selector doesn't match your theme. Right-click your product grid → Inspect → find the wrapper's class, and put that in the Behaviour panel.

Counts look wrong on a big store. Counts scan up to 3000 products by default for speed. Raise it with the fst_count_query_limit filter, or turn counts off.

Panel looks unstyled. Another plugin's CSS is winning. Raise specificity: body .fst-panel { ... }

---

Requirements

WordPress 6.0+, WooCommerce 7.0+, PHP 7.4+. HPOS compatible. No build step, no npm, no external libraries.