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 on each attribute term, or override it for a single product (see Setting Up Attribute Swatches).

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 Variation Swatches → General → Swatch Shape. To use a different shape for one attribute value (for example Circle for colors, Square for sizes), edit the term and choose Swatch Shape Override. It applies on product pages and archive pages.

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

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

• When a product has more options than fit, a +N badge shows how many are hidden.
• Archive swatches also appear inside the WooCommerce Product Collection and All Products blocks.
• Archive swatches are built from global attributes only.

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 Variation Swatches → General → Out-of-Stock Style. Three options are available:

Notify Me Message

When a shopper picks an option that is not available, a short message appears under the swatches. Configure it under Variation Swatches → General → Out-of-Stock "Notify Me":

When enabled, hovering over any swatch shows a small label with the attribute term name (e.g. "Ocean Blue", "Size M"). By default it appears above the swatch; you can move it to the bottom, left or right.

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

The Smart Variation Finder adds a small search box above the swatches on variable product pages. A shopper can type words such as "dark blue large" and the matching swatches are selected for them.

Step-by-Step: Setting up Color Swatches

Step-by-Step: Setting up Image Swatches

Per-Product Swatch Type

Per-Term Shape Override

Edit an attribute term and use Swatch Shape Override to give that value its own shape. Choose — Use Global Setting — to follow the global shape.

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

Access at Variation Swatches → Advanced → Custom CSS. Enable the toggle and paste your CSS. All swatch elements use the .svsw-* class prefix. Only administrators can edit custom CSS; HTML tags and @import rules are removed when you save.

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;
}

Find these options at Variation Swatches → Advanced. Export and import are available to administrators.

Export and import settings

Delete data on uninstall

Turn on Delete Data on Uninstall (Advanced → Data) if you want the plugin's settings and the swatch values saved on terms and products removed when you delete the plugin. It is off by default, so your swatches survive a reinstall.

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

The free plugin is complete and fully functional on its own. Nothing in it is locked or time-limited. A separate Pro plugin adds extra features for stores that want them.

Pro is a separate plugin and is not installed from inside the free plugin. More at webtend.net.

My swatches are not showing. What should I check?

Ensure: (1) Enable Swatches is toggled ON in Variation Swatches → General. (2) Each attribute term has a Swatch Type set — go to Products → Attributes → edit any attribute term. (3) The product uses a global attribute (custom attributes only support Label and Radio swatches). (4) WooCommerce is active and up to date. (5) If you use a caching plugin, clear the cache.

Can I set different swatch types for different products?

Yes. In the product editor, go to Product data → Attributes, save the attributes, then use Swatch type for this product below the attribute list. The override applies to that product only and takes precedence over the term settings.

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?

Turn on Variation Swatches → Advanced → Delete Data on Uninstall and save. When you then delete the plugin (not just deactivate it), its settings, term meta and post meta are removed. With the option off, your data is kept.

Is there a Pro version?

Yes, as a separate plugin. It adds a sticky add-to-cart bar, per-swatch badges, per-variation galleries, a bulk swatch generator and a live stock badge. The free plugin stays fully functional on its own. See Free vs Pro.

Can I change the tooltip direction?

Yes. Go to Variation Swatches → Design & Style → Tooltip Position and choose Top, Bottom, Left or Right.

What is the Smart Variation Finder and how do I turn it on?

It is a search box on product pages that selects matching swatches from typed words. Enable it under Variation Swatches → General → Smart Variation Finder. See Smart Variation Finder.

Does it support custom (local) attributes?

Partly. Color and Image swatches need global attributes because the colors and images are stored on attribute terms. A custom attribute on a single product can be shown as Label or Radio swatches.

Will it slow my store?

The plugin's CSS and JavaScript load on product, shop and archive pages and wherever a swatch is rendered, not on every page. It makes no external requests.

Does the plugin collect data or contact external servers?

No. It does not collect personal data and makes no external requests.

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;
}

This page mirrors the changelog in the plugin's readme.txt.

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0