Variation Swatches for WooCommerce

WooCommerce’s default variation dropdowns provide a basic, text-based way to display product variations, making it harder for customers to quickly understand and compare what’s available. Variation Swatches for WooCommerce transforms these traditional dropdowns into interactive color, image, and button swatches, giving customers a smarter and more engaging way to explore available variations.

Customers can instantly explore and select colors, sizes, styles, and other product options without opening multiple dropdowns one by one. This makes the selection process faster, more engaging, and easier to understand.

By turning variation selection into a visual experience, the plugin keeps product pages clean and easy to navigate while helping customers find and choose the right product variation with greater confidence.

Live Demo | Documentation

Color, Image & Button/Label Swatches for Product Attributes
WooCommerce’s default dropdown shows every variation as plain text, whether it’s a color, a style, or a size. This feature replaces that dropdown with an actual color swatch, a small image, or a clickable button, matched to whichever attribute type you choose.

Customers can choose their desired variations instead of reading and guessing what a label means. You can mix swatch types across different attributes on the same product – color as swatches, size as buttons, for example.

Live Demo | Documentation

Auto Convert Dropdown Into Image Swatches If Variation Has a Featured Image Set
If a variation already has its own featured image uploaded in WooCommerce, this feature uses that image directly as the swatch, without any extra setup. It’s useful for stores where every color or style variation already has its own product photo.

This saves the step of manually assigning a swatch image to each attribute term. The swatch stays in sync automatically if the variation’s featured image is updated later.

Live Demo | Documentation

Auto Color Name Matching
Instead of opening a colorpicker and guessing a hex code, you can type a color’s name – like “Forest Green” or “Sky Blue” – and the plugin looks up a matching shade for you. This is powered by the StorePress Colors API; see “External services” below for exactly what is and isn’t sent.

It speeds up setup for stores with many color terms to configure. You can still fine-tune the exact shade afterward if the automatic match isn’t quite right.

Live Demo | Documentation

Round or Square Swatch Shape
Choose whether swatches display as circles or squares, store-wide, without writing any custom CSS. Round shapes tend to suit color swatches, while square shapes often work better for image or button swatches.

This is a global setting applied across your whole catalog. Premium adds the variation to override the shape for one product at a time.

Live Demo | Documentation

Adjustable Swatch Size on the Product Page
Control exactly how large or small swatches appear on the single product page, directly from the plugin’s settings screen. Larger swatches help on image-heavy product pages, while smaller ones fit tightly packed layouts better.

No theme editing or custom CSS is required. The setting applies globally across your product pages.

Live Demo | Documentation

Text Tooltip on Hover
When a customer hovers over a swatch, a text tooltip can pop up with extra detail – the full color name, a material description, or anything else useful. This adds context without cluttering the page with extra text.

It’s especially helpful for color swatches, where the swatch alone doesn’t always make the exact shade obvious. Image tooltips are available as a Premium upgrade from this text-only version.

Live Demo | Documentation

Show Selected Variations Name Beside the Attribute Label
After a customer picks a swatch, the plugin can display that variation’s name next to its attribute label – for example, “Color: Ocean Blue” appears once selected.

This gives customers a clear confirmation of exactly what they’ve chosen, useful when the visual alone might be ambiguous. It updates instantly as a customer clicks between variations, with no extra setup beyond enabling it.

Live Demo | Documentation

Return Swatches Back to the default Dropdown
If swatches aren’t the right fit for a particular attribute, or you’re testing something on one product, you can switch button swatches back to a plain WooCommerce dropdown with a single setting change.

No data is lost – your attribute terms and values stay exactly as they were. This gives you the flexibility to mix swatch and dropdown display across different parts of your store.

Live Demo | Documentation

Cross Out, Blur, or Hide Out-of-Stock Swatches (Up to 30 Variations)
WooCommerce’s default dropdown can’t visually indicate that a product variation is out of stock, since browsers don’t allow that kind of styling inside a default dropdown box. This plugin solves that by crossing out, blurring, or fully hiding swatches for variations that are sold out.

In the free version, this works for up to 30 variations per product, and needs WooCommerce’s “Hide out of stock items from the catalog” setting turned on. Premium removes both the variation limit and that setting requirement.

Live Demo | Documentation

Supported With Quick View
Swatches display correctly inside Quick View popups triggered from shop or archive pages, not just on the full product page. Customers browsing a grid of products can pick a color or size without ever leaving the shop page.

Compatibility depends on how a theme or Quick View plugin loads WooCommerce’s variation form, but it’s tested against common implementations.

Works With Elementor, Printful, AliDropship & Dokan Multivendor
The plugin is tested to work correctly alongside these widely used WooCommerce tools. Elementor compatibility means swatches display properly inside Elementor-built product pages and templates.

Elementor: Live Demo | Documentation

Printful and AliDropship support matters for dropshipping stores syncing products and variations from those platforms.

Printful: Live Demo | Documentation
AliDropship: Live Demo | Documentation

Dokan Multivendor compatibility means vendors on a multi-seller marketplace can use swatches on their own listings.

Dokan: Live Demo | Documentation

Compatible With 300+ WooCommerce Themes
The plugin is tested against more than 300 WooCommerce-compatible themes, including OceanWP, Flatsome, Divi, Astra, Avada, Enfold, Salient, Uncode, The7, and Kalium. Because themes can change WooCommerce’s default markup, styling, or JavaScript in different ways, a small CSS adjustment is occasionally needed for certain layouts.

Most stores can activate the plugin and see swatches working immediately, with no theme-specific configuration required.

WordPress Multisite Support
The plugin works correctly across WordPress Multisite network installs, where a single WordPress installation runs multiple sites. Settings and swatch configurations can be managed the same way as on a single-site install.

This matters for agencies or larger operations running several WooCommerce stores from one network.

WPML & RTL Support
Swatch labels and attribute terms can be translated using WPML, so multilingual stores can offer swatches in every language they support. The plugin also supports right-to-left (RTL) languages, like Arabic or Hebrew, with layout and swatch alignment adjusted accordingly.

This makes the plugin usable for international and regional WooCommerce stores, not just English-language ones.

HPOS Compatible
The plugin is compatible with WooCommerce’s High-Performance Order Storage (HPOS), the newer order data storage system WooCommerce has been moving stores toward.

Swatch-related order and variation data continues to work correctly whether a store uses the legacy post-based storage or HPOS. No extra configuration is needed to enable this compatibility.

Gutenberg Block Support
Swatches, filters, and archive listings can be added to pages and templates using dedicated Gutenberg blocks, instead of relying only on shortcodes or theme templates.

This fits naturally into WooCommerce’s own block-based product page and shop page building tools. It’s useful for stores using a block theme or the Site Editor to build custom shop layouts.

WooCommerce REST API Support for Swatch Data
Color and image swatch data is exposed through the WooCommerce REST API, alongside standard product and variation data. This is useful for developers building custom storefronts, mobile apps, or headless WooCommerce setups that need swatch information outside the standard WordPress front end.

No additional API keys beyond standard WooCommerce REST API authentication are required.

Regular Updates & Security Fixes
The plugin receives ongoing updates to maintain compatibility with new WordPress and WooCommerce releases, add small improvements, and fix reported issues. Staying updated ensures fixes reach your store as soon as they’re available.

Display Swatches in Catalog / Archive Page
Shows swatches directly on shop, category, and archive pages, not just the individual product page. Customers browsing a grid of products can see and interact with color, image, or button swatches before clicking into a product.

You can control whether all attributes or just one selected attribute appears per product card, and adjust swatch size and alignment for archive layouts.

Live Demo | Documentation

Create Product Variation Swatches From Custom Product Level Attribute
Adds swatch support for attributes created directly inside a single product, rather than shared globally across the catalog under Products > Attributes.

This is useful for a one-off product that needs an attribute no other product uses. The free version only supports swatches on global attributes.

Live Demo | Documentation

Radio Button Swatches (Premium)
A fourth swatch type, alongside color, image, and button/label, showing variations as radio-style selectable buttons. This suits attributes where a more form-like, structured selection style fits your store’s design better than color or image swatches. Like the other swatch types, radio swatches can be styled and sized to match your theme.

Live Demo | Documentation

WooCommerce Filter Widgets (Premium)
Converts WooCommerce’s built-in “Filter Products by Attribute” widget from a plain checkbox or dropdown list into visual swatches.

Customers filtering a shop or category page by color or size see the same visual swatches they’d see on a product page, instead of a plain text list. This keeps the filtering experience consistent with the rest of the store.

Live Demo | Documentation

Variation Image Tooltip in Catalog / Archive Page (Premium)
Shows an image preview tooltip when a customer hovers over a swatch on shop, category, or archive pages, similar to the image tooltip available on the single product page.

This lets customers preview a variation’s appearance without leaving the catalog page. It pairs naturally with the archive page swatch display feature above.

Live Demo | Documentation

Unlimited Out-of-Stock Variation Handling (Premium)
Removes the free version’s 30-variation cap on crossing out, blurring, or hiding out-of-stock swatches, and removes the requirement to enable WooCommerce’s “Hide out of stock items from the catalog” setting.

This matters most for products with large variation counts, since WooCommerce itself switches to Ajax-based loading past roughly 30 variations.

Premium Features

Who is This Plugin For?

Any WooCommerce store selling variable products – clothing, shoes, jewelry, furniture, electronics, and beauty products all benefit from visual swatches over plain dropdowns. It matters most once a product has more than a couple of variations per attribute.

Why Use Variation Swatches?

Documentation & Support

Documentation · Support · Facebook Group

Premium purchases include 365 days of support and a 30-day money-back guarantee.

External services

This plugin connects to one outside service, and only when you turn it on.

Service: StorePress Colors API
Provider: StorePress
Service URL: https://colors.storepress.com/
What it does: looks up a color’s hex code from the color name you type.

What is sent: only the color name you type in the search box. Nothing else. A search for “Green” sends this request: https://colors.storepress.com/v1/?name=Green. The service sends back the matching hex code and 8 related shades from 45000+ colors.

When it is sent: only when you turn on the color API in Settings, and only when you type a search. It is off by default. While off, the plugin makes no request at all – not on install, not on page load, and not in the background.

What is not sent: no personal data. license key, email, username, or WordPress version. Not any data about your site’s visitors. The request comes from your own server, not from a customer’s browser, so no visitor IP address, cookie, or referrer is sent either.

You can turn this feature off any time in Settings. See the FAQ below for details.