Filter swatches
Overview
Swatches replace plain radio buttons or checkboxes with visual chips—colors, images, or icons—ideal for WooCommerce attributes like Color or Material.
Swatches are configured on individual Filter Posts Item blocks in the block editor.
When to use swatches
| Scenario | Swatch type |
|---|---|
| WooCommerce color attribute | Color swatches |
| Pattern / material | Image swatches |
| Brand logos | Image swatches |
| Non-visual attributes (size) | Text labels on swatches or standard radio buttons |
Setup steps
- Add a Filter Posts Item for a Product attribute or taxonomy.
- Set Control type to Radio or Checkbox (multi-select swatches).
- Open Design or Appearance settings for the filter item.
- Enable Swatches.
- Configure:
- Swatch style — Color, image, or mixed
- Size — Width and height
- Show label — Term name above or below swatch
- Alignment — Left, center, or right in the row
- Active state — Border or background for selected swatch
Mapping colors and images
For WooCommerce attributes:
- Use Swatch source settings to pull from WooCommerce term meta or plugin-defined mappings when available.
- For custom taxonomies, assign colors or images per term in the swatch configuration JSON / repeater in block settings.
After changing swatch mappings, save the page and test on the front end—cached pages may show old styles until cache clears.
Accessibility
- Enable Show label so screen reader users get term names, not only color.
- Ensure sufficient contrast on active swatch borders.
- Do not rely on color alone—combine with labels or tooltips for colorblind users.
Common issues
| Issue | Fix |
|---|---|
| Swatches show as empty circles | Assign color hex or image URL per term |
| Wrong image | Check swatch source (Woo vs custom) |
| Layout breaks on mobile | Reduce swatch size; enable wrap in block layout |
What's next
- WooCommerce integration — Attribute filters
- Filter Posts Item block — All filter item settings
- Filter appearances and mobile (Pro) — Advanced mobile layouts