Sayan Variation Swatches
for WooCommerce

Sayan Variation Swatches for WooCommerce is a lightweight WooCommerce plugin that replaces the default variation dropdown selects with visually rich swatches — color pickers, image tiles, label buttons, and radio selectors.

Live Swatch Preview

Below is a preview of how each swatch type renders on your product page:

Method 1 — WordPress Admin (Recommended)

Method 2 — Manual FTP

# Unzip and upload to your plugins directory
unzip sayan-variation-swatches.zip
# Upload the folder via FTP to:
/wp-content/plugins/sayan-variation-swatches/

Then activate from Plugins → Installed Plugins.

The plugin supports 4 swatch types plus the default dropdown. Set the type globally per attribute term, or override it per product.

Admin Screenshot — Attribute Term Edit

Dual / Split Color

When you fill in both the Swatch Color and Second Color fields, the swatch renders as a diagonal split — useful for multicolor or two-tone fabric options.

Three shape options are available globally from Settings → General → Swatch Shape.

Enable compact swatches on your shop, category, and archive pages so customers can preview color options without clicking into each product.

Enable this from Settings → Shop / Archive → Show Swatches on Archive. You can also set a smaller swatch size specifically for archive pages.

When a customer clicks a swatch, the main product gallery image automatically updates to show the matching variation image — with no page reload, no AJAX request, and no configuration required.

How it works

Configure from Settings → General → Out-of-Stock Style. Three options are available:

When enabled, hovering over any swatch shows a small label above it with the attribute term name (e.g. "Ocean Blue", "Size M").

Customize tooltip colors and font size from Settings → Design & Style → Colors.

Step-by-Step: Setting up Color Swatches

Step-by-Step: Setting up Image Swatches

Access settings at Sayan Variation Swatches → General in the WordPress admin.

Access at Sayan Variation Swatches → Advanced → Custom CSS. Enable the toggle and paste your CSS. All swatch elements use the .svsw-* class prefix.

Useful CSS Classes

CSS Custom Properties

The plugin injects these CSS variables dynamically based on your settings. You can override them in your custom CSS:

:root {
  --svsw-width: 36px;               /* Product page swatch width */
  --svsw-height: 36px;              /* Product page swatch height */
  --svsw-archive-width: 28px;       /* Archive swatch width */
  --svsw-archive-height: 28px;      /* Archive swatch height */
  --svsw-border-color: #dddddd;     /* Default border */
  --svsw-selected-border-color: #333333; /* Selected border */
  --svsw-checkmark-color: #ffffff;  /* Checkmark color */
  --svsw-tooltip-bg: #333333;       /* Tooltip background */
  --svsw-tooltip-color: #ffffff;    /* Tooltip text */
  --svsw-tooltip-font-size: 13px;   /* Tooltip font size */
}

Example: Make label swatches pill-shaped

.svsw-type-label .svsw-swatch {
  border-radius: 50px !important;
  padding: 0 16px;
  min-width: auto;
}

Example: Larger color swatches only

.svsw-type-color .svsw-swatch {
  width: 48px !important;
  height: 48px !important;
}

Example: Custom selected state highlight

.svsw-swatch.selected {
  box-shadow: 0 0 0 3px #ff6b35 !important;
}

All swatches are fully keyboard-navigable and screen-reader friendly. They use role="radio", aria-checked, aria-label, and tabindex="0".

My swatches are not showing. What should I check?

Ensure: (1) Enable Swatches is toggled ON in Settings → General. (2) Each attribute term has a Swatch Type set — go to Products → Attributes → edit any attribute term. (3) WooCommerce is active and up to date.

Can I set different swatch types for different products?

Yes. In the product editor, go to the Attributes tab. Per-product overrides are stored separately and take precedence over the global term meta.

The variation image is not swapping when I click a swatch.

Ensure the variation has a dedicated image set in the product editor (Variations tab → each variation row → the small camera icon). If a variation uses the parent product image, no swap occurs. Only variations with unique images trigger the swap.

My theme has a custom gallery. Will image swap still work?

The plugin updates the standard WooCommerce gallery img element, the wrapping a href (for lightboxes), and fires the woocommerce_gallery_reset_slide_position event. Most themes built on WooCommerce standards will work. If your theme uses a completely custom gallery, you may need a small CSS/JS integration.

How do I remove all plugin data when uninstalling?

Deleting the plugin (not just deactivating) triggers the uninstall.php file which removes all plugin options, term meta, and post meta from the database automatically.

Is there a Pro version?

Pro features are planned and will include: Quick View popup swatch support, Layered navigation filter swatches, Shareable variation URLs, Stock left badge ("Only 3 left!"), and more. Visit WordPress.org Profile for updates.

Can I use custom CSS to style swatches differently per attribute?

Yes. Use the attribute name in the selector via the data-attribute attribute on the wrapper:

/* Style only the color attribute swatches */
.svsw-swatches-wrap[data-attribute="pa_color"] .svsw-swatch {
  border-radius: 50%;
}

/* Style only the size attribute swatches */
.svsw-swatches-wrap[data-attribute="pa_size"] .svsw-swatch {
  min-width: 48px;
  font-size: 13px;
}