Simple Variation Swatches for WooCommerce: The Best Plugin for Visual Product Display?

Ever watch a customer leave your store because they couldn’t figure out which “Medium Navy” shirt they were actually buying? It happens more than you think.

Most WooCommerce stores still use those ancient dropdown menus for product variations. You know the ones where customers have to click, scroll, and guess what “Forest Green” actually looks like.

It’s not the best shopping experience, and it’s definitely not helping your sales. That’s why Simple Variation Swatches for WooCommerce exists to replace those clunky dropdowns with visual swatches customers can actually see and understand.

In this hands-on review of Simple Variation Swatches for WooCommerce, I’ll show you exactly how this plugin transforms boring product pages into visual experiences that help customers buy faster and with more confidence.

Simple Variation Swatches: Overview and Key Features

Simple Variation Swatches for WooCommerce is a WordPress plugin that replaces WooCommerce’s default dropdown menus with visual swatches. Instead of clicking through a dropdown to find “Navy Blue” or “Extra Large,” customers see color blocks, images, or styled labels they can click directly.

The plugin supports four main display types:

• Color swatches (including dual colors for patterns)
• Image swatches for textures and patterns
• Label swatches for sizes and text-based options
• Custom radio buttons for conceptual choices

The best part? It works within WooCommerce’s existing interface. Unlike other plugins that dump a bunch of confusing settings on you, this one just works with what you already know.

Key features

• Shop Page Swatches – Let customers pick colors and sizes right from your main shop page without clicking into each product
• Control Swatch Display – Limit how many variations show at once on shop pages with the rest appearing after hovering over a “more” link
• Dual Color Support – Show patterns, gradients, or color combinations with two color swatches instead of confusing product names
• Change Images on Hover – Let customers preview different product images when they hover over color or style swatches
• Mobile Optimization – Give phone shoppers the same easy swatch experience since everything works perfectly on mobile

Hands-on with Simple Variation Swatches for WooCommerce

In this section, I’ll walk you through exactly how you can set up visual swatches on your WooCommerce site from start to finish.

Installing the Plugin

First, download the plugin file after purchasing your license from the official website.

Then, go to WordPress admin dashboard and navigate to Plugins > Add New Plugin. Click the “Upload Plugin” button and select your downloaded file.

Once uploaded, click “Activate” and you’re ready to go. Note that you won’t see any new menu items since the plugin works through your existing WooCommerce settings.

Setting Up Your First Swatch Attribute

Now you’ll create the attributes that become your visual swatches. Think of attributes as the categories of choices you want to offer customers, like “Color,” “Size,” or “Material.”

Click Products > Attributes in your WordPress dashboard. If you already sell variable products, you might see some attributes here. If not, don’t worry, we’ll create them.

To turn an existing attribute into swatches, click “Edit” next to it. To create a new one, click “Add New Attribute” and give it a name like “Color” or “Size.”

The important part is the “Type” dropdown that the plugin adds. Choose:

• Color if you’re showing actual colors
• Image if you want to show patterns, textures, or icons
• Label if you want clean text buttons (great for sizes like S, M, L)
• Radio Button for other text-based choices

You can also pick whether your swatches are round or square and set their size. Click “Add Attribute” when you are done.

Adding Your Attribute Terms

Next, you’ll need to add the specific color options that customers can choose from.

For the purpose of demonstration,.

To add a new color, scroll down to the “Add new Color” section. Fill in:

• Name: The color name customers will see (like “Red”)
• Slug: Base this one the color (e.g. red)
• Description: Leave this blank for now

Click “Add new Color” to save it. You’ll see it appear in your color list on the right.

Now you need to set up the actual colors for each swatch. Click “Edit” next to any color in your list to configure its appearance. 

You’ll see a “Color” section with a “Select Color” button to choose your primary color. For dual colors (perfect for patterns or gradients), set the “Two colors” dropdown to “Yes” and select your secondary color. 

This creates split-color swatches that show both colors at once, which is perfect for striped fabrics or two-tone products.

Creating Your First Variable Product

Now you’ll build a product that shows off your color swatches.

Go to Products > Add New and create a product called “Cotton T-Shirt” or whatever fits your store. Fill in the product name and description like you normally would.

Find the Product Data box and change it from “Simple product” to “Variable product.” When you do this, WooCommerce gives you new options to work with.

Click on the Attributes tab. Add your Color attribute by selecting it from the dropdown menu. Make sure you check the “Used for variations” box because this turns on the swatch feature.

Pick which colors this product comes in by selecting them from your color list. Save your changes and you’re ready to set up the individual product variations.

Creating the Product Variations

Time to build the actual product options customers will choose from.

Click on the Variations tab. You’ll see it says “No variations yet” with two blue buttons: “Generate variations” and “Add manually.”

Click “Generate variations” to let WooCommerce create all the color combinations automatically. You’ll get a popup asking if you want to generate all variations, warning that it creates one for every possible combination (up to 50 at a time).

Click “OK” and WooCommerce will create a variation for each color you added to your attributes. This saves you from having to create each one individually.

Once generated, you’ll see a list of all your color variations that you can expand and edit to set prices, stock levels, and other details for each color option.

Managing Out-of-Stock Variations

Before you go live with your product, think about what happens when you run out of certain colors. Do you want customers to still see those color swatches but not be able to buy them? Or do you want to hide sold-out colors completely?

You can control this in WooCommerce > Settings > Products > Inventory. Check the box and your color swatches will behave the same way as the rest of your store when items go out of stock.

Enabling Shop Page Swatches (Optional)

Want customers to pick colors right from your shop and category pages without clicking into each product? Then make sure to enable the shop page display setting within the plugin.

This basically lets customers see and select color swatches on your main shopping pages instead of having to click into every product to choose their color.

Go to WooCommerce > Settings > Products and click on “Variation swatches.” Check the box that says “Allow attribute selection on shop and archive pages.” 

Now customers can pick colors right from your main shop pages, category pages, and search results.

You’ll see two other options you can turn on:

• Show only specific attributes on archive pages. If you only want to show colors (not sizes), pick just the Color option here.
• Replace product image on hover. When customers hover over a color, they’ll see that color version of the product photo.

This makes shopping faster for your customers, which usually means more sales for you.

Testing Your Swatches

Now that you’ve set everything up, let’s see how your swatches look to customers on both individual product pages and your shop pages.

Individual Product Pages

When customers click into a specific product, they’ll see all available options clearly displayed with your new swatches.

On individual product pages, customers can see your color swatches, size labels, and any other attributes like the Logo option (using radio buttons). This gives customers full control over their choices before adding to cart.

If you had selected image swatches instead of color swatches, here’s how they would appear:

See how the “Type of shirt” attribute uses small images to show different shirt styles instead of text labels. That’s much clearer for customers and creates a better shopping experience since they can actually see what they’re choosing.

Shop and Category Pages

If you enabled shop page swatches, customers will also see color swatches right on your main shopping pages. They can pick colors and sizes without clicking into each product, making shopping much faster.

Notice how the Hoodie shows color swatches (including that dual-color blue and yellow swatch) and the T-Shirt shows size labels. Customers can select their preferences and add items directly to cart from this page.

The plugin displays different swatch types beautifully across both views, making your store look professional and easy to shop.

Simple Variation Swatches Pricing

Simple Variation Swatches offers two licensing options:

• Personal license: $49/year for one website, one year of updates, and two weeks of support 
• Developer licence: $249 one-time for unlimited websites, lifetime updates, and lifetime support

Both licenses include a 14-day money-back guarantee, so you can test it on your store before deciding.

Final Verdict

Simple Variation Swatches does exactly what you need it to do: turn boring dropdown menus into visual swatches that help customers buy faster. Your product pages will look more professional, and customers can actually see what they’re choosing instead of guessing.

The shop page swatches alone make this plugin worth it. When customers can pick colors and sizes without clicking into every single product, they’re more likely to buy. For $49 a year, that’s a pretty good deal if it helps you sell even one extra item per month.

Sure, the support period is short, but Simple Variation Swatches works well out of the box. If you want to make your store easier to shop and look more professional, this plugin will do the job.

Try Simple Variation Swatches for WooCommerce