Marabelia Layered Nav Swatches turns WooCommerce’s native widget into a clean visual filter. Each term shows its image (if you use swatches) or its color; and, if no meta exists, it applies a fallback color by slug so no gaps are left.
What’s included
-
Automatic swatches in the “Filter by attribute” widget: image → HEX color → fallback by slug.
-
Settings panel (WooCommerce → Swatches Sidebar):
-
Columns configurable (1–6) for a compact layout.
-
Bullet type: Auto / Image only / Color only.
-
Shape of the bullet: circle, rounded, or square.
-
Size of the bullet (10–28 px) and font size.
-
Hover color customizable (default
#85D39F). -
Counters: show or hide.
-
Activation by taxonomy: applies to all
pa_*or only the ones you choose.
-
-
Compatibility with common metadata:
wvs_term_image,thumbnail_id,product_attribute_color,yith_wccl_*,image_id, etc. -
Performance: no external JS dependencies, injected and scoped CSS; friendly with Core Web Vitals.
-
Themes: works with popular templates (including Flatsome) and with filter/AJAX plugins.
Benefits
-
Clearer user experience: the customer sees the real color/finish before filtering.
-
Faster navigation: compact interface with 2, 3, 4, 5, or 6 columns.
-
On-site SEO: better interaction signals without touching URLs or archive templates.
How to get started
-
Install and activate the plugin.
-
Go to WooCommerce → Swatches Sidebar, set columns, bullet, and hover.
-
Save, clear cache/minify if needed, and reload.
Helpful note
The native widget may hide terms without products or out of stock according to its settings. If a term “is missing,” review that setting and clear caches.
