Catalog Filters

The whole filters column in one component: price, colour swatches, attributes, rating and categories, in that order. Each group can also be placed on its own — see Filters.

Using both?

If you place a group on its own and Catalog Filters, turn that group off here, or it shows up twice.

Its options

Each group can be switched off here — which is what you do when you place that group on its own.

Props

Prop	Type	Default	What it does
Heading	text	Filters	Write «none» to drop it and place your own heading above — the «clear all» goes with it, and each group keeps its own «Clear». Empty is not the same thing: empty is also what arrives when nobody touched this, so it means «leave the heading alone».
Groups → Price range	on / off	on
Groups → Rating	on / off	on
Groups → Categories	on / off	on
Groups → Attributes	text	all	«all», or the attribute names separated by commas — colour,size. An attribute with no terms in use never shows.
Colour attributes	choice: all, except	all
Several chosen at once	choice: or, and	or	«Any» is what most people mean when they tick two. WooCommerce's own widget defaults to «all».
Counts	choice: yes, brackets, no	yes
Folding → Fold the group	on / off	off	Turns the title into a disclosure, so a long column reads as a list of headings. A group that is filtering something always opens, whatever the state below says.
Folding → It starts	choice: open, closed, first	open
Show more → Choices before it	text	0	How many choices a group shows before the rest go behind the button. 0 shows every one. Every choice is in the page either way, so nothing is lost without JavaScript.
Show more → Its wording	text	—	Empty is «Show 12 more», translated. Write your own with {count} where the figure goes.
Show more → And once open	text	—	Empty is «Show less», translated.
Pill size → Text size	text	0.88rem
Pill size → Padding	text	0.31rem 0.63rem	Vertical and horizontal, as CSS writes it: «0.31rem 0.63rem».
Count text → Size	text	0.88em
Count text → Colour	text	var(--fe-woo-muted, #6b7280)
Colours → Field background	text	var(--fe-woo-surface, #ffffff)
Colours → Chosen background	text	var(--fe-woo-panel, #f6f7f9)
Colours → Borders	text	var(--fe-woo-border, #e8ebef)
Colours → Chosen	text	var(--fe-woo-accent, #111827)	Everything picked: ticked boxes, swatch outlines and the price range.
Colours → Text on the chosen one	text	var(--fe-woo-accent-color, #ffffff)	The tick inside a box and the label of a chosen filter.
Colours → Stars	text	#b45309	The filled part of each rating row.
Colours → Empty stars	text	#d1d5db	The rest of the five, so the row reads as a score and not as a word.

Variables of its own

Variable	Default	What it controls
--fe-woo-filters-count-color	var(--fe-woo-filters-muted, #6b7280)	The «(12)» after each value.
--fe-woo-filters-count-size	0.88em	Its size, relative to the label beside it.
--fe-woo-filters-title-size	var(--fe-woo-text-xl, 1.13rem)	The size of each group's heading — «Price», «Colour».
--fe-woo-filters-title-color	var(--fe-woo-filters-color, #111827)	And its colour.
--fe-woo-filters-label-size	1em	The text of each choice. In the price filter, where there are no choices to label, it is the two amounts under the slider and the «Min» and «Max» fields.
--fe-woo-filters-label-color	var(--fe-woo-filters-color, #111827)	And its colour. What is chosen keeps its own — the tint and the tick say more than a shade.
--fe-woo-filters-star	#b45309	A filled star in the rating filter.
--fe-woo-filters-star-empty	#d1d5db	The rest of the five, so the row reads as a score.
--fe-woo-filters-swatch-size	2.25rem	How big each colour swatch is.
--fe-woo-filters-pill-size	var(--fe-woo-text-m, 0.88rem)	The text of a pill — how an attribute with no swatches is drawn.
--fe-woo-filters-pill-padding	0.31rem 0.63rem	Its padding: vertical then horizontal, as CSS writes it.
--fe-woo-filters-chosen-bg	color-mix(in srgb, var(--fe-woo-filters-accent, #111827) 10%, transparent)	The tint behind whatever is picked.