Shop Filters

Shop Filters displays classic WooCommerce filter widgets for a shop/archive listing. Its filters use the product archive context. WooCommerce must be installed and active.

Add and configure Shop Filters

1. Click Add, choose Shop Filters, and place it in the container.
2. Under Content > Filters > Widgets, use Add Filter.
3. Choose Widget: Active Filters, Price Filter, Rating Filter, or Filter By Attribute.
4. Configure the chosen widget's options. Attribute filters include Attribute, Display Type, and Query Type.
5. Style Chips, Typography, Price Filter, Rating Filter, Attribute Filter, and Spacing.
6. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Filters

Setting	Purpose and options	Behavior
Widgets	Add, edit, remove, and reorder widgets.	Shared
Widgets > Widget	Active Filters, Price Filter, Rating Filter, Filter By Attribute.	Shared
Widgets > Active Filters Options > Title	Item title. When: Widget = Active Filters.	Shared
Widgets > Price Filter Options > Title	Item title. When: Widget = Price Filter.	Shared
Widgets > Rating Filter Options > Title	Item title. When: Widget = Rating Filter.	Shared

Shown when Widget = Filter By Attribute.

Setting	Purpose and options	Behavior
Widgets > Filter By Attribute Options > Title	Item title.	Shared
Widgets > Filter By Attribute Options > Attribute	Choose an available attribute from the list.	Shared
Widgets > Filter By Attribute Options > Display Type	list, dropdown.	Shared
Widgets > Filter By Attribute Options > Query Type	and, or.	Shared

Design > Chips

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Hover
Padding	spacing controls.	See linked controls
Typography	typography controls.	See linked controls
Borders	borders controls.	See linked controls
Hover Border	Color or supported fill.	Shared
Hover Shadow	Shadow offset, blur, spread, color.	Shared
Space Between	Space between and unit.	Responsive

Design > Typography

Setting	Purpose and options	Behavior
Titles	typography controls.	See linked controls

Design > Price Filter

Setting	Purpose and options	Behavior
Bar > Background	Color or supported fill.	Shared
Bar > Selection	Color or supported fill.	Shared
Bar > Height	Height.	Responsive
Bar > Handle > Size	Size and unit.	Responsive
Bar > Handle > Background	Color or supported fill.	Shared
Bar > Handle > Borders	borders controls.	See linked controls
Bar > Handle > Hover Border	Color or supported fill.	Shared
Bar > Handle > Hover Shadow	Shadow offset, blur, spread, color.	Shared
Button > Size > Size	Custom, Small, Default, Large.	Responsive
Button > Size > Padding	Padding. When: Size = Custom.	Responsive
Button > Size > Override Width	Override width and unit.	Shared
Button > Size > Full Width At	Breakpoint.	Shared
Button > Background	Color or supported fill.	Hover
Button > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Button > Color	Color or supported fill.	Hover
Button > Width	Width.	Shared
Button > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Button > Typography	typography controls.	See linked controls
Button > Corners	Square, Round, Custom.	Shared
Button > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Button > Effects > Transition Duration	Transition duration.	Responsive
Button > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Button > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Button > Icon > Icon	Icon.	Shared
Button > Icon > Position	Before, After.	Shared
Button > Icon > Size	Size and unit.	Responsive
Button > Icon > Color	Color or supported fill.	Hover
Button > Icon > Space Before	Space before and unit.	Responsive
Button > Icon > Space After	Space after and unit.	Responsive
Button > Icon > Hover Transform	Hover transform and unit.	Shared
Label	typography controls.	See linked controls
Value	typography controls.	See linked controls

Design > Rating Filter

Setting	Purpose and options	Behavior
Star Color	Color or supported fill.	Shared
Star Size	Star size and unit.	Responsive
Between Stars	Between stars and unit.	Responsive

Design > Attribute Filter

Setting	Purpose and options	Behavior
Button > Size > Size	Custom, Small, Default, Large.	Responsive
Button > Size > Padding	Padding. When: Size = Custom.	Responsive
Button > Size > Override Width	Override width and unit.	Shared
Button > Size > Full Width At	Breakpoint.	Shared
Button > Background	Color or supported fill.	Hover
Button > Outline	On/off.	Shared

Shown when Outline is set.

Setting	Purpose and options	Behavior
Button > Color	Color or supported fill.	Hover
Button > Width	Width.	Shared
Button > No Fill On Hover	On/off.	Shared

Setting	Purpose and options	Behavior
Button > Typography	typography controls.	See linked controls
Button > Corners	Square, Round, Custom.	Shared
Button > Corner Radius	Corner radius and unit. When: Corners = Custom.	Responsive
Button > Effects > Transition Duration	Transition duration.	Responsive
Button > Effects > Scale On Hover	Set scale on hover. Range: 0–3.	Responsive
Button > Effects > Shadow	Shadow offset, blur, spread, color.	Responsive, Hover
Button > Icon > Icon	Icon.	Shared
Button > Icon > Position	Before, After.	Shared
Button > Icon > Size	Size and unit.	Responsive
Button > Icon > Color	Color or supported fill.	Hover
Button > Icon > Space Before	Space before and unit.	Responsive
Button > Icon > Space After	Space after and unit.	Responsive
Button > Icon > Hover Transform	Hover transform and unit.	Shared

Design > Spacing

Setting	Purpose and options	Behavior
After Titles	After titles and unit.	Responsive
Between Filters	Between filters and unit.	Responsive
Container	spacing controls.	See linked controls

Design > Advanced

Setting	Purpose and options	Behavior
Override Global Styles	woocommerce global styles.	See linked controls

Troubleshooting