How to Add Color Swatches to WooCommerce Products

Let’s be honest—dropdowns work, but they’re not the most exciting part of your product pages.

Imagine you’re selling t-shirts in red, blue, and black. A dropdown makes your customer spend time thinking. 

But a simple row of clickable swatches? That’s instant clarity, faster decisions, and a better-looking store.

That’s where color swatches come. You can add color swatches to the WooCommerce product now.

Here’s how:

✅ For variable products

1. Create a variable product
2. Add variation swatches for variable products with a plugin
3. Assign color and attributes to the variable product

✅ For simple products

1. Install and activate a product addons plugin
2. Create an addon for a simple product
3. Add a color swatches field for the product
4. Configure the custom field for the simple product
5. Save and publish

With a few simple clicks, you can show color swatches for variation to any product in your store. We will demonstrate the steps elaborately in this blog.

Additionally, you will learn the comparison of popular plugins for your decision-making. Also, there’s a bonus section for you. Don’t miss it 😉

What Are Color Swatches in WooCommerce?

In WooCommerce, color swatches are a visual way to display product variations—typically colors—using clickable color boxes instead of standard dropdown menus.

Let’s say you sell T-shirts in red, blue, and black. By default, WooCommerce shows a dropdown. But with color swatches, you can replace this with clickable color blocks:
  🟥      🟦        ⬛
Red    Blue    Black

These swatches provide shoppers with an instant visual representation of what they’re selecting, making the buying experience smoother and more engaging.

Where you can use such color swatches:

• On single product pages (next to the product image)
• On the shop or category pages (if supported by your theme or plugin)
• Sometimes in quick view popups or filter widgets

Why Use Color Swatches Instead of Dropdowns

Dropdowns get the job done, but they aren’t exactly intuitive or visually appealing.

Color swatches, on the other hand, offer a more interactive and user-friendly experience. Here’s why they’re often a better choice:

✅ Instant Visual Clarity
Shoppers can see color options at a glance—no guessing what Sky Blue or Midnight Black looks like.

✅ Faster Product Selection
Clicking a color block is much quicker than opening and scanning a dropdown list.

✅ Better Mobile Experience
On smaller screens, dropdowns can feel clunky. Swatches are tap-friendly and easy to browse.

✅ More Professional Look
Swatches enhance your product presentation, especially for fashion, beauty, or design-based products.

✅ Higher Conversion Potential
A smoother shopping experience means customers are more likely to add to their cart and complete the purchase.

In short, color swatches don’t just look better—they help your store perform better, too.

🔧 How to Show Color Swatches for WooCommerce Variable Products (Step-by-Step)

By default, you can’t display color swatches in WooCommerce variable products. If you need to change the dropdowns to swatches, you will need an additional plugin.

There are a handful of plugins that offer color swatches for products. We will see how to do it with the help of WowStore.

This plugin is one of the first ones introducing the Gutenberg blocks for WooCommerce. WowStore focuses on building the whole store with your preferred visual style and appearance.

Let’s see how to show color swatches in WooCommerce with WowStore. Before going through the step-by-step process, you need to install and activate the plugin from the WordPress repository.

Follow the official documentation for the installation process if needed.

Once you’re all set, start with the first step here.

Step 1: Turn on Variation Swatches

First, you need to turn on the variation swatches for variable products. To do that, go to WowStore Addons from your WordPress dashboard.

Here, you can find the add-ons for the plugins. Find Variation Swatches and enable the addon.

This addon works only for variable products. Learn how to create a product variation if you need.

Step 2: Go to Your Product Attributes

After enabling the addon, you can assign a color to the respective colors of your products. To do that, go to Product >> Attributes.

Here, you can find all the existing attributes in your shop. Click the configure terms of Color.

Step 3: Configure the Terms of the Attribute

Now, you can add the new color variations by assigning the color here.

You can also update the existing color variations. Click edit and assing the color from select color field.

After finishing the configuration, click the update button to save the changes. Here’s how it appears in the product pages.

With the variation swatches addon of WowStore, you can turn the dropdowns into swatches promptly.

But it’s limited to only variable products — simple products aren’t affected by the addon. But what if you want to add color addons to simple products too?

Don’t worry, I’ve got you.

⚙️ How to Display Color Swatches for WooCommerce Simple Products

To display color swatches on simple products, you will need WowAddons. This plugin provides advanced customization with a custom field for your products.

With WowAddons, you can add variations to simple products, no need to depend on WooCommerce anymore. 

Let’s see how to add color swatches to WooCommerce simple products with WowAddons.

Step 1: Install and Activate the Plugin

First, you need to install and activate WowAddons from the WordPress repository. Simply search for WowAddons and find the product.

You can follow the official documentation for an easy installation process.

Step 2: Create a New Addon

Then, go to WowAddons Dashboard and click the create addons button. It will take you to an interface where you can set up the addon with custom fields.

Step 3: Select Any Simple Product

Here in this interface, you need to assign the product for the color swatch display. Select any simple product from your store.

You can choose all products, or specific product, or a category.

Step 4: Add Color Swatches Field

Now, click the + (plus) icon to add the color swatches addon. You can drag and drop the field from more than 20 custom fields.

Step 5: Configure the Color Swatches

After adding the addon, you have to configure it. You can make it required, set the title, or hide it.

For the color variations, you need to set the label, choose the color, and set the price if necessary.

There are four different types of pricing you can select from:

• Fixed: A fixed amount of cost will be added to the base price.
• Percentage: A specific percentage of the base price will be added to the price.
• Per Unit: A fixed amount of cost will be added for each unit of the item.
• No Cost: The selected variation will be free.

💡 Pro Tips:
You can add a discounted price for the selected variation in color swatches. However, you will need to purchase the pro version of the plugin.

Step 6: Save and Publish the Addon

Finally, after completing the configuration of the addon, you have to toggle the publish button on. Hit save to preserve any changes you have made.

Voila! You’ve added the color swatches to your simple product 🎉

💡 Pro Tips:
You can choose to display the label of each swatch in different ways, explore the Color Switch Settings to manage visibility as you prefer.

Let’s see how it looks.

You can also use a color picker field from WowAddons. This custom field lets your customers choose their preferred color for the desired item.

Can You Show Color Variations on the Shop Page

So far, you have learned to display the color swatches on the single product pages. How about showing the options in the shop or category pages?

You already got with WowStore’s variation swatches addon. After enabling the addon, click the ⚙️(settings) icon here.

Enable the option for showing the variation on shop/archive pages. Hit the save settings to preserve the changes.

Now, the color variation will appear in the shop or category page for every variable product.

📊 Best WooCommerce Color Swatches Plugins

If you want to go beyond the basic dropdowns and add sleek, clickable color swatches to your WooCommerce store, you’ll need the help of a plugin.

Here’s a quick comparison of three popular options—ranked by ease of use, flexibility, and shop page integration:

My Recommendation

Among all the options, you may feel overwhelmed. If you want my recommendation, here it is:

Use WowAddons If:

If you’re looking for a no-fuss solution to enable beautiful swatches across any and all products, WowAddons is your champion. 

It’s easy to set up, supports multiple swatch types (color, image, checkbox), and works smoothly with other WooCommerce features.

Use WowStore If:

WowStore is ideal if you’re already using product blocks and want swatches to appear directly on the shop or category pages. It’s less about backend attribute settings and more about flexible, frontend control.

Use YITH If:

While YITH is a widely used plugin, most of its powerful features, like showing swatches on the shop page, are locked behind a premium paywall. If you’re okay with a basic setup, it might still work, but customization is limited without upgrading.

🎨 Tips for Better Visual Swatches

Adding swatches is just the start — making them look good and function well can really elevate your WooCommerce store’s design and UX. 

Here are some practical tips to ensure your color swatches are both attractive and effective, no matter which plugin you’re using:

1. Use accurate colors or textures

Stick to real hex codes or upload actual product textures (like fabric, wood grain, or patterns). Avoid generic colors that don’t match the product.

2. Use images along with colors

For products like makeup, tiles, or prints, use image swatches to reflect gradients, patterns, or fine detail.

3. Keep it clean and consistent

Ensure all swatches are the same size and shape (e.g., circular or square) and aligned neatly. A messy layout can confuse buyers.

4. Make sure they’re mobile-friendly

Test your swatches on mobile devices to ensure they’re easy to tap and visually clear on smaller screens.

5. Add tooltips or labels

Include hover tooltips or text labels so customers know what each swatch represents (e.g., Crimson Red vs Cherry Red).

6. Avoid overloading with too many swatches

If you offer 20+ colors, consider grouping them (e.g., Warm Tones, Neutrals) or using a scrollable swatch row.

7. Don’t forget accessibility

Ensure good contrast between swatches and backgrounds, and use text labels for those who may have color blindness.

FAQs❓

How do I change swatch size or style?

Most swatch plugins like WowAddons offer built-in settings to adjust size, shape (square or circle), borders, and spacing. You can find these settings in the Global Settings in the addon editor interface.

For advanced styling, a bit of custom CSS can give you even more control.

Can I show swatches for size/material too?

Absolutely! Swatches aren’t limited to colors. You can use multiple fields of WowAddons for sizes (e.g., S, M, L) and image swatches for materials (e.g., wood types, fabrics).

Can I show multiple swatches together (color + size)?

Yes. WooCommerce supports multiple variation attributes, so you can show color swatches alongside size, material, or any other variation. Just make sure your plugin supports swatch styling for all attribute types — WowAddons handles this well out of the box.

Can I bulk edit swatches?

You can bulk delete variations from Product >> Attributes. Select the variations you want to delete and apply the bulk action. If you want more editing access, you may need bulk editing plugins.

Final thoughts

Color swatches aren’t just a nice visual touch — they’re a game-changer for your WooCommerce store. 

Whether you’re selling fashion, decor, or customizable goods, swatches help customers make confident choices faster.

If you’re working with variable products, WowStore offers a clean and flexible way to integrate swatches using Gutenberg blocks — and it even supports shop page display.

On the other hand, if you need more control or want to add swatches to simple products too, WowAddons is your go-to.

Here’s what to remember:

• Swatches look better and perform better than dropdowns
• They work on both variable and simple products (with the right tools)
• You don’t need premium plugins to get started — free tools like WowStore and WowAddons offer powerful functionality

Ready to ditch dropdowns and level up your product display? Try adding swatches today and give your shoppers the visual experience they deserve. 🎨🛒

Written byShahbaj Arefin

Arefin is a passionate writer with over three years of experience exploring the world of WordPress and WooCommerce. He loves diving into themes, plugins, and tools, sharing insights that help users build and optimize their websites with ease. When he's not writing, you’ll find him testing the latest tech to uncover game-changing features for online businesses.