Blocksify Pro lets each Loop Filter facet appear as a list, buttons, a dropdown, or visual swatches.
Start with the Loop Filter overview for how facets narrow results, then choose a display for the number of choices, available space, and selection behavior.
Where to find Display and Control
- Select the Loop Filter block and open Settings.
- Under Facets, click the facet you want to change. Its settings popover opens.
- Open Display, then choose values in Control and Display. The facet preview updates on the canvas.
Control decides selection behavior; Display decides how choices look. Number and date facets use separate controls. The filter shells and responsive layout guide covers how the complete facet group opens and flows around the results.
Shared display options
The four displays share settings for labels, counts, ordering, long choice sets, and collapsible sections. Some rows appear only where they apply.
| Setting | Description |
| Label | Places the label Above, Inside field for a Dropdown, or Hidden. |
| Control | Checkboxes allow several choices; Radio (single) allows one. |
| Match | For Checkboxes, Any matches at least one selection; All requires all selections. |
| Display | Chooses List, Buttons, Dropdown, or Swatches when the field supports it. |
| Show counts | Shows current totals when count information is available. |
| Hide empty | Removes unselected choices with zero results. |
| Order by | Uses Natural, Label, or Count. |
| Limit | Sets the initial number of choices. A value of 0 is unlimited. |
| Show more | Reveals choices beyond the Limit; Dropdown does not use it. |
| Collapsible | Lets visitors open and close the facet. Collapsed by default starts it closed. |
| All label | Replaces Any for Radio (single) and Dropdown. |
| Search box | Adds a field for narrowing Dropdown choices. |
List
List shows choices vertically with checkboxes or radio controls. Use it when visitors should scan names and counts together.
| Setting | Description |
| Checkboxes | Combines choices such as Apartment and House. |
| Radio (single) | Keeps one choice active. |
| Limit and Show more | Keeps a long list compact. |
Buttons
Buttons presents compact text choices that wrap. It suits Property type choices such as Apartment, House, or Villa.
| Setting | Description |
| Control | Checkboxes allow several choices; Radio (single) keeps one. |
| Show counts | Adds a compact badge inside each button. |
| Choice length | Short labels fit best in a wrapping group. |
Dropdown
Dropdown keeps choices behind one field. Use it when space is limited or a facet contains many terms.
| Setting | Description |
| Control | Radio (single) keeps one value. Checkboxes allow several in a non-hierarchical set. |
| All label | Sets the text shown with no active choice. |
| Search box | Filters choices inside the open dropdown; it starts on. |
| Label | Inside field places the facet label in the field. |
Swatches
Swatches shows a WooCommerce attribute as colour or image chips. Out of the box, it appears only for a visual product attribute configured by WooCommerce, a compatible colour-and-image swatch plugin, or YaySwatches.
A two-colour term renders as an evenly split chip. An image term uses its assigned image; a missing visual falls back to a text initial.
A zero-result chip is dimmed, disabled, and crossed by a diagonal line. Hide empty removes unselected zero-result choices.
In the Northstar Shop example, six solid colours (Natural, Sage, Terracotta, Charcoal, Ochre, Sea Glass) are configured on the product terms.
| Setting | Description |
| Control | Checkboxes allow several swatches; Radio (single) keeps one. |
| Term names | Shows the term beside each chip. When off, the name remains available to assistive technology and on hover. |
| Show counts | Shows counts beside names and keeps them available in chip-only rows. |
| Colour source | Uses the product attribute term, not a Blocksify color palette. |
Note: If the product attribute no longer has a supported colour or image setup, Swatches falls back to Buttons on the published page.
For the complete shop setup, see Filter WooCommerce products. Developers can connect another taxonomy to Swatches with Add a custom swatch source.