Skip to content
My Account
1.9.14 What’s new, Nov 5

Variation Swatches for WooCommerce

A WooCommerce extension that transforms variation dropdowns to nice looking swatches.

Purchase Live demo
North&Co ShopJournalAbout 0

Shop / Tops / Heavyweight Tee

Heavyweight Tee

(38 customer reviews)

$32.00 – $36.00

A boxy crewneck in 240gsm cotton that keeps its shape wash after wash, with a ribbed collar and dropped shoulders.

SKU: NC-TEE-240 · Category: Tops

Color

Size

1

Variation Swatches, taken apart. Hover a part to see what it does.

Dropdowns hide what you sell. Swatches put every option on show.

Variation Swatches turns WooCommerce’s variation dropdowns into color, image and label swatches, on product pages, in the shop and inside quick views.

Every option, shown as it really is.

Color, image or label

Three swatch types, each square, circle or rounded. Mix them on the same product.

Dropdowns, converted

Attributes without a swatch type become label swatches automatically.

Photos as swatches

When a variation has its own image, its color swatch shows that photo.

Tooltips, text or image

Hover a swatch for its name, or a picture of the variation.

Captions

Print each option’s name under its color or image swatch.

Swatches in the shop, too.

Turn on Catalog Mode and every variable product shows its swatches right on its card. Pick a color and the card’s photo changes to match.

  • Swatches on shop and category pages
  • Switch the card’s image on click, or on hover
  • Quantity field and Ajax Add to cart on the card
  • Separate sizes and styles for the shop and product pages

Or keep them behind a button.

In the shop, swatches can wait behind Select options: over the card, in a modal, or in a drawer, with the chosen variation’s photo as a preview.

  • Inline, always visible or shown on hover or click
  • Modal or drawer, with an image preview
  • Drawer from the bottom, top, left or right
  • Closes itself after Add to cart, or when Quick View opens
Bottom

Fewer dead ends, faster choices.

Out of stock, handled

Options that can’t be bought with the current choice hide, blur, or blur and cross out. Out-of-stock variations can be hidden altogether.

Preselected

Pick the first option on load, fill the rest after one choice, or preselect from the link.

Change of mind

Click a chosen swatch to deselect it, or clear them all. The Clear link can be hidden.

Featured attribute

Make one attribute stand out by enlarging its swatches.

Labels your way

The attribute’s name beside its swatches, above them, or hidden, with the chosen value after it.

Every detail in the Customizer.

Style, size, colors and spacing for each swatch type, set separately for product pages and the shop, with a live preview of your own store.

  • Square, circle or rounded, per swatch type
  • Width, height, padding, font size and colors
  • Gaps, container spacing and alignment
  • Tooltip image size, colors, border and radius

Customizing · Variation Swatches

Swatch style

Swatch size

Selected border color

Swatches alignment

Set per attribute, or per product.

Give each attribute term its color, image or label, and a tooltip. Any product can override the global settings and mix swatch types.

  • Color picker, image or label for each term
  • Text or image tooltip for each term
  • Product-level overrides of the global settings
  • Global attributes and quick attributes alike

Add to cart, your way.

Ajax Add to cart works on product pages and in the shop, with your choice of loading spinner and checkmark. The settings are shared with Quick View and Floating Cart.

  • Ajax Add to cart on product and shop pages
  • Redirect to the cart, the checkout or any page
  • Scroll up to the success notice, or hide View cart
  • Works inside Quick View, and with bundle and composite products

Everything it does

  • Live Preview Customizer
  • Attribute types: (Dropdown, Label, Color, Image)
  • Swatch Styles: (Square, Circle, Rounded)
  • Adjust Swatch (Width, Height, Alignment)
  • Customize options for single product / archives independently
  • Attribute Quick Edit Supported
  • Automatically convert Dropdowns to Label Swatch by default
  • Automatically convert Color Dropdowns to Image Swatch
  • Attribute Label Position (Above / Before Swatches)
  • Hide Attribute Label
  • Hide Variation Reset Link
  • Adjust Swatches Container Spacing
  • Adjust Swatch Vertical & Horizontal Gap
  • Adjust Swatch (Width, Height, Font Size, Colors)
  • Enable Tooltip (Text or Image)
  • Adjust Tooltip Background & Text Color
  • Adjust Tooltip Image Size
  • Adjust Tooltip Border Size & Radius
  • Override global swatch settings within product page
  • Mix swatch types for the same product. ex. Image / Color
  • Enable Catalog Mode
  • Support display in Quick Views
  • Compatible with XT Woo Floating Cart
  • Compatible with XT Woo Quick View

Kept current, release after release.

Every number here is read live from the release feed, so this sheet is never older than the plugin.

Version
1.9.14
Last updated
Nov 5, 2026
Tested up to
WordPress 7.1
Requires
WordPress 4.6+
PHP
5.4+
First released
Nov 2018

Pick a license. Change it any time.

Every Pro plan starts with a free trial, and every purchase has a 30-day money-back guarantee.

Save 45% vs. monthly

Number of sites

A year of updates and support. If you don’t renew, the plugin keeps working; you just stop receiving updates and support.

Store owners on Variation Swatches.

4.7 out of 5 from 15 ratings

  • The perfect match

    I was looking for a plugin that showcased the variations on the shop page, and even though there are many options, I think this is the best all-in-one plugin that I've encountered. My favorite part is the front-end customization. Support is fast and helpful, even with timezone differences. Absolutely recommend it to people that want their online shop to look…

    Melissa Chuy

  • Responsive support: fixed issue quickly

    The XT Woo Variation Swatches was causing an undesirable side-effect on my analytics. Once I isolated the issue, the plugin author resolved it within a day. Great turnaround!

    Dave Karow Head of IT and Safe Sleep Advocate, Safe Sleep Breathe Through Crib Mattress

  • Great support

    The plugin itself did have issues for us, but the XT support has been fantastic and has gone way beyond expectations to resolve issues. We departed with another plugin purely because we believe XT's support will always pull through when needed.

    Mohammad Mansoor Siddique

  • Simply the best Variation Swatches plugin!

    This plugin automatically converts native dropdowns to image swatches using existing images already set within each variation, which is great! No need to manually upload new swatches for each product like other plugins! Support is great as well! Keep up the good work!

    wpradar

  • This is the best and lightest variations swatches plugin

    XT Woo Variation Swatches is the best and lightest variations swatches plugin out there. I have tested many plugins and there is nothing like it. the support system is unbeatable, they are very professional and provide unparallel support!

    petetoso

  • Great WooCommerce Variation Swatches Plugin!

    This plugin has all the features that a woocommerce variation swatches plugin should have! Very flexible options at multiple levels. Especially the premium version. Swatch options can be applied globally or overridden at the product, attribute or even individual term level. Can be customized from the customizer with live preview!

    Mike Celikbas

  • Love this plugin!!!

    Works extremely well. Much more professional look and options than the standard drop downs. Speeds up the variation selection process and looks awesome. Pro version worth every penny for the additional features like showing swatches on the shop page and override options for individual products / categories

    PrismoSoft

  • Great plugin, Excellent support!

    Great plugin! My product page looks exactly how needed it with these awesome swatches. I’m very much satisfied using it and their support service is great too.

    Daniel

  • Exactly what I was looking for!

    This plugin is great. No hassle or fuss! It was just install and go with my site. I needed a plugin that would show the variation image instead of having to manually add new swatch images! Perfect and exactly what I needed!

    aveeto

Changelog

99 releases since 2018.

  1. 1.9.14
    • fix Ajax add to cart on single product pages no longer gets stuck when a product has a required add-on field that is conditionally hidden, such as a PPOM (Product Addons & Fields) field shown only for one option. The button now adds the product instead of doing nothing.
    • update XT Framework 2.5.20, which includes the add to cart fix above, plus 2.5.18 and 2.5.19 hardening: output escaping and sanitized request values in settings, metabox and customizer fields, safe admin redirects, XTFW_ prefixed framework classes (old names kept as aliases), and System Status no longer contacting external IP/TLS services
  2. 1.9.13
    • update XT Framework 2.5.17, making the System Status IP and TLS lookups opt-in, updating Select2 to 4.1.0, SelectWoo to 1.0.10 and the alpha color picker to 3.0.4, removing the unused Xirki telemetry module, and hardening settings preview requests and saved settings values
    • update Tested with WordPress 7.1 and WooCommerce 11.2
  3. 1.9.12
    • update XT Framework 2.5.16, fixing the pricing page showing "/ year" for monthly plans, correcting the annual "Normally" price, adding annual and lifetime savings badges inside the billing cycle switcher, keeping the switcher on one row at any screen width, and limiting pricing page requests to the site's own admin-ajax endpoint
  4. 1.9.11
    • update XT Framework 2.5.15, preventing the "Follow Us" widget from being injected twice in XT admin pages, restoring the Browse Plugins grid layout on modern WordPress, keeping the grid at three columns on very large screens, and updating the bundled Freemius SDK to v2.13.4
  5. 1.9.10
    • update XT Framework 2.5.14, preventing first-request fatal errors and repeated upgrade redirects while switching to a newer embedded framework
  6. 1.9.9
    • fix Restored the Single Product and Archives / Shop swatch settings in the Customizer, including their intended defaults
    • support WordPress 7.0.1 and WooCommerce 10.9.4 compatibility
    • update XT Framework 2.5.13, preserving generated Freemius pricing and Xirki vendor assets during synchronization

Put Variation Swatches to work on your store.

Purchase

Questions before you buy? Ask the team that builds it.