Setting Up Variation Swatches in WooCommerce? Follow These Simple Steps

When running a WooCommerce store with variable products, product selection plays a big role in the customer’s decision-making. The default dropdowns for choosing size, color, or material often feel outdated and hard to navigate, especially on mobile. A better way is to display those options visually using variation swatches for WooCommerce.

Swatches let you show product attributes such as colors, sizes, images, and labels as clickable buttons or icons. This makes it easier for shoppers to understand and select what they want without extra clicks. In this guide, you'll learn how to set up WooCommerce variation swatches step-by-step, and why the Extendons plugin is a reliable option for your store.

Why Use Variation Swatches in WooCommerce?

The goal of swatches is simple: to replace dropdown menus with visual selection tools. Whether it's a color circle, a size label like “S” or “L”, or even an image representing the variation, customers can make quicker choices when options are easy to see.

Here’s what variation swatches can improve:

• Better product visibility

• Faster selection process

• Fewer abandoned carts

• Cleaner product layout on mobile and desktop

With the help of a WooCommerce variation swatches plugin, store owners can offer a smoother shopping experience that keeps visitors engaged and reduces confusion.

Choosing the Right WooCommerce Swatches Plugin

There are several plugins available, but one that stands out for both flexibility and ease of use is the Extendons Variation Swatches for WooCommerce plugin.

This plugin is compatible with the latest WooCommerce versions and is available directly from the official WooCommerce Marketplace. It's designed for both shop and product pages and allows full control over how swatches appear, function, and behave based on your store’s needs.

Features of the Extendons Variation Swatches Plugin

Before we dive into setup, here’s a quick look at what this plugin offers:

• Show variation swatches as radio buttons, color swatches, image swatches, or text labels.

• Apply swatches globally or to specific products.

• Hide, blur, or cross out out-of-stock options.

• Customize shape (round or square), size (in px), tooltip style, and border.

• Enable image previews when hovering or clicking on swatches from the shop page.

• Map attributes to swatch types at global or product level.

• Generate shareable URLs for specific variations.

It also supports quick configuration inside the WooCommerce settings panel, so you don’t need to write any custom code.

How to Install the WooCommerce Variation Swatches Plugin

To get started, purchase the plugin from the WooCommerce Marketplace and follow these steps:

1. Download the Plugin

   • After purchase, download the .zip file from your WooCommerce account.

2. Upload the Plugin

   • Go to your WordPress Admin dashboard.

   • Navigate to Plugins > Add New > Upload Plugin.

   • Upload the downloaded ZIP file and click Install Now, then Activate.

3. Access the Plugin Settings

   • Go to WooCommerce > Settings.

   • Click on the Variations as Radio Buttons tab to configure the plugin settings.

Configuring WooCommerce Product Variations Swatches

Once the WooCommerce variation swatches plugin is installed and activated, the plugin gives you several setting panels to work with. Let’s walk through each one:

1. General Settings

Under the General Settings tab, you can:

• Choose what to do when a variation is out of stock:

  • Hide, Blur, or show with a Cross.

• Select how variation images update on the shop page:

  • Change image on hover or click.

• Decide where to show swatches:

  • All variable products or selected ones.

• Enable shareable URLs for variations.

2. Shape Settings

Control the appearance of swatches:

• Choose between Round or Square buttons.

• Set width and height of swatches in pixels.

This allows you to align the swatches with your store’s design easily.

3. Tooltip Settings

You can enable tooltips that show attribute names or details:

• Toggle tooltip on or off.

• Choose font size, background color, and text color.

Tooltips can help clarify what each swatch stands for, especially if the label or image isn’t obvious.

4. Border Settings

Add or remove borders for the swatches:

• Enable or disable border styles.

• Pick a border color that matches your theme.

Borders help swatches stand out, especially if your product images or color options are subtle.

5. Map Attributes to Swatch Types

This setting lets you assign different types of swatches to different product attributes:

• Color → Color swatches

• Size → Text labels

• Image → Image buttons

You can also customize shape and size for each attribute here. Note that these settings apply globally across your product catalog.

6. Product-Level Swatch Settings

If you want more control per product, you can override global settings on individual product pages:

• Go to Products > Edit Product.

• Scroll to the Product Data section and click on the Variation Swatches tab.

• Enable custom settings for that product.

• Choose swatch type, size, shape, and more.

This is useful when certain products need different variation displays (e.g., clothing vs. accessories).

✅ Ready to Use Variation Swatches?

Make your store easier to navigate and your products simpler to choose with the Extendons plugin.

Buy the official plugin from the WooCommerce Marketplace to get started today.

Buy Now

Shop Page Display and Interaction

Another strong feature of the woo variation swatches plugin from Extendons is that it supports interaction on the shop page, not just the product page.

That means when a customer hovers over or clicks on a variation (like a red shirt), the product image updates right there on the shop grid. This helps customers browse faster and encourages clicks without having to enter each product detail page.

Swatches for Out-of-Stock Variations

You can show out-of-stock options in three ways:

• Hide them completely to avoid confusion.

• Blur them to show they’re unavailable but still visible.

• Cross them out to keep the layout intact but clearly mark unavailability.

Choose the method that best fits your store’s tone and inventory strategy.

Use Swatches on Specific Products

You’re not limited to applying WooCommerce product variations swatches across your entire store. If you want swatches on select items only, you can do that.

Just go to the specific product settings, and enable swatches there. This flexibility helps store owners who have a mix of simple and variable products.

Make Product Pages Clean and Clear

With woocommerce swatches, you remove the clutter of long dropdowns. Each variation becomes a visible, interactive part of the product page.

This not only speeds up shopping but also improves how your store looks, especially on mobile devices, where dropdowns can be hard to manage.

Final Thoughts

If your store sells products with multiple options like colors, sizes, styles, or materials, adding product variation swatches for WooCommerce is one of the easiest ways to improve the customer experience.

The WooCommerce variation swatches plugin by Extendons delivers all the features most store owners need, without being overwhelming. With clear setup options, full control over design, and reliable performance, it’s a practical choice.

You can purchase it directly from the WooCommerce Marketplace and get started right away.

FAQs

How to add variation swatches in WooCommerce?
Install a variation swatches plugin like the one from Extendons. Then configure swatches in the WooCommerce settings or on individual product pages.

Is Variation Swatches for WooCommerce free?
No, the Extendons version is a premium plugin available on the WooCommerce Marketplace.

What is the best variation plugin for WooCommerce?
The Extendons Variation Swatches plugin is widely trusted for its flexibility, compatibility, and user-friendly settings.

How do I add a variation in WooCommerce?
Edit your product, select “Variable Product” under Product Data, then define attributes and add variations under the “Variations” tab.

Read More

If you're looking for helpful insights on the best variation swatches plugins, check out this blog featuring a curated list of the top variation swatches for WooCommerce.