Catalogue filters Pro

Where to put the panel

Anywhere. There are two ways it behaves, and both are useful.

On your shop page or a category page, the panel narrows the list it is standing on. Tick something and the products below it change.

Anywhere else — a landing page, a sidebar, a footer — the panel sends the shopper into your shop with that filter already applied. This is the easier setup, and it is often what you actually want: a "Shop by finish" panel on the front page is a way into the catalogue.

The second needs no template editing at all, so if you are not sure, start there. The sections below are about putting a panel on the shop itself, which depends on your theme.

A block theme — anything with Appearance → Editor, which includes every theme WordPress has shipped since Twenty Twenty-Two. Your shop is a template rather than a page, so a shortcode typed into the Shop page’s content never runs. Open Appearance → Editor → Templates → Product Catalog, and add either:

• a Shortcode block holding the shortcode below — the one to reach for, because it takes every option on this page, including the styles; or
• the StoreMaster block, with Product filters chosen. Quicker, and it asks you which facets you want, but it offers only the facets and a heading — not the styles.

Do the same on the Product Category template for category pages.

A classic theme — one with Appearance → Customize and no Editor. The shortcode works in the Shop page’s content, and in a category’s own description under Products → Categories.

Either way, the shortcode looks like this:

[storemaster_filters facets="cat,attr:colour,price,stock,sale"]

What can be filtered

Category, tag, any product attribute, price, stock status, sale status, product type and rating. Attribute facets are named attr: followed by the attribute slug.

Filters are a URL

Every selection lives in the query string. That means a filtered view can be bookmarked, shared, linked to from a campaign, and walked backwards and forwards with the browser buttons — with no JavaScript involved at all.

It also means the back button does what a shopper expects, which is the part scripted filters most often get wrong.

Counts tell the truth

The number beside each option answers "how many if I also tick this", given everything else currently selected — not "how many exist". A global count cheerfully offers you a filter that leads to an empty page.

If a shopper cannot see certain products, those products are not in the counts either. A count computed over things you are not allowed to open is both wrong and a disclosure.

Ticking two things

Two values of the same filter are OR — ticking blue and red shows both. Values across different filters are AND — blue and large. That is what ticking two colours means to a shopper, and the other way round returns nothing and looks broken.

The index

Filters read the catalogue index, which is what keeps a large shop fast. Build it under StoreMaster → Catalogue index.

Rebuilds happen in the background, into a new version, and swap in atomically when they finish. Shoppers see the previous index until the moment the new one is complete — never a half-built one, and never an empty shop because a rebuild was running.

If no index has been built, the filter list renders nothing rather than guessing, and a health check tells you why. Product search and tables keep working from ordinary WooCommerce queries: an unavailable index means fewer features, never wrong results.

How a filter looks

Six styles, set for the whole panel or one facet at a time:

[storemaster_filters facets="cat,stock,price" style="checkbox"]
[storemaster_filters facets="cat,stock,price" styles="cat:image,stock:dropdown"]

• label — a list of links, the default. Each one applies as soon as it is clicked.
• checkbox — several values at once, applied together with one button.
• radio — one value, with an Any option to clear it.
• dropdown — the same as radio, in a select. Useful when a facet has many values and the panel is short.
• image — the category’s own picture beside its name, taken from the image you set on the category in WooCommerce. A category with no picture shows its name as usual, so the list never has a hole in it.
• range — two number boxes. This is what price always uses, and price cannot be anything else.

Use styles for per-facet control. It splits on the last colon, so an attribute facet keeps its own: styles="attr:pa_size:dropdown".

Applying

With label and image, each click applies straight away. As soon as any facet uses checkbox, radio or dropdown, the whole panel gets a single Apply filters button and one submission — including the price boxes, which join the same form rather than keeping their own.

A style this plugin does not have falls back to label. A typo in a shortcode costs you the style you asked for, not the filter.

There is no colour-swatch style. WooCommerce does not store a colour against an attribute term, so one could only be invented or borrowed from another plugin’s settings — and a swatch showing the same grey square for every value is worse than a style that is not offered.