Add Color Swatches to WooCommerce Products Efficiently

WooCommerce lets you sell a single product in several colors, but the default variation dropdown does not always give customers the clearest shopping experience. When shoppers want to compare Black, Navy Blue, Burnt Orange, or other visual choices, a text-only dropdown makes them open the list before they can even see which colors are available.

A better approach is to add color swatches and display every available color as a clickable visual option. Customers can immediately see the choices, click the color they prefer, view the matching product image, and add the correct variation to their cart.

This complete tutorial explains how to add color swatches to WooCommerce from the WordPress admin area to the live product page. We will use one real example product, create the color attribute, add color terms, build the variations, assign product images, publish the product, and test the entire customer workflow.

For this tutorial, we will create a variable product called Classic Cotton T-Shirt, which will have three colors:

• Black
• Navy Blue
• Burnt Orange

By the end, you will know exactly how to replace a WooCommerce color dropdown with clickable color circles using GS Variation Swatches for WooCommerce.

What Does It Mean to Add Color Swatches in WooCommerce?

To add color swatches means replacing a standard WooCommerce variation dropdown with visual, clickable color choices. Instead of opening a dropdown and selecting “Black,” the customer clicks a black circle or square directly on the product page.

The swatch is the visual selector. WooCommerce still controls the actual variation behind it, including:

• Price
• Stock status
• SKU
• Product image
• Weight
• Dimensions
• Shipping class
• Variation description

When a customer clicks a swatch, WooCommerce selects the matching variation and updates the related product information.

For simple colors, you can add color swatches using solid color values. For patterns, fabrics, wood finishes, or mixed designs, image swatches may be more accurate.

Why Should You Add Color Swatches Instead of Using Dropdowns?

You should add color swatches when the product option is visual and customers benefit from seeing all available choices immediately.

A standard dropdown hides the options until the shopper opens it. Color swatches place every available color directly in front of the customer. This can make the product page easier to understand and reduce the number of clicks needed to choose a variation.

When you add color swatches, customers can:

• Scan available colors at a glance
• Compare options without opening a menu
• Select a color with one click
• See the matching variation image
• Understand unavailable colors more quickly
• Use the product page more comfortably on mobile

Color swatches are especially useful for clothing, shoes, bags, furniture, curtains, cosmetics, phone cases, jewelry, home decor, and other products where appearance influences the buying decision.

What You Need Before You Add Color Swatches

Before you add color swatches, prepare the product and plugin requirements so the setup goes smoothly.

You need:

• A WordPress website
• WooCommerce installed and activated
• GS Variation Swatches for WooCommerce installed
• Administrator access to the WordPress dashboard
• A product with two or more color choices
• A separate product image for each color, when available

For our Classic Cotton T-Shirt example, prepare these images:

• Main product image
• Black T-shirt image
• Navy Blue T-shirt image
• Burnt Orange T-shirt image

You can technically add color swatches without adding a separate variation image, but customers get a clearer experience when the main product image changes after they select a color.

Complete Workflow to Add Color Swatches

The complete workflow to add color swatches includes the following stages:

• Install and activate GS Variation Swatches
• Create a global WooCommerce Color attribute
• Set the attribute type to Color
• Add the individual color terms
• Create or edit a variable product
• Assign the Color attribute to the product
• Enable the attribute for variations
• Generate the color variations
• Add price, stock, and images to each variation
• Publish and test the product on the frontend

Each stage is important. If one setting is missed, the swatches might disappear, be unselectable, or fail to update the product image.

Step-by-Step: How to Add Color Swatches to WooCommerce

Step 1: Install GS Variation Swatches for WooCommerce

The first step to add color swatches is to install a plugin that converts WooCommerce variation dropdowns into visual swatches.

From your WordPress dashboard, go to:

Plugins → Add New Plugin

Search for:

WooCommerce

As GS Variation swatches is an add-on for Woocommerce, we need to install the WooCommerce Plugin first. If WooCommerce is inactive, product variations will not work. If GS Variation Swatches is inactive, the product may return to the standard dropdown interface.

GS Variation Swatches for WooCommerce

Click Install Now, then click Activate.

You can also download it from WordPress.org.

After activation, the plugin adds visual attribute types that WooCommerce does not provide in the default variation interface. These can include Color, Image, and Label or Button options, depending on the plugin settings and version.

Verify the Required Plugins

Before you continue to add color swatches, go to:

Plugins → Installed Plugins

Confirm that both plugins are active:

• WooCommerce
• GS Variation Swatches for WooCommerce

Step 2: Create a Global Color Attribute

The next step to add color swatches is to create a reusable WooCommerce attribute called Color.

Go to:

Products → Attributes

In the Add new attribute form, enter:

• Name: Color
• Slug: color
• Type: Color
• Default sort order: Custom ordering

Click Add attribute.

The most important field is Type. The most important field is Type. Please ensure it is set to Color, not Select. The Select type normally produces a standard dropdown, while the Color type tells the swatches plugin to display visual color choices.

Why Use a Global Attribute?

A global attribute is the best option when you want to add color swatches to more than one WooCommerce product.

For example, you can create Black once and reuse it for:

• T-shirts
• Hoodies
• Shoes
• Bags
• Curtains

This keeps color names, slugs, and values consistent across the store. It also speeds up future product setup because you do not need to recreate the same colors repeatedly.

Step 3: Configure the Color Terms

After creating the attribute, you need to add the actual color choices. This is where you define the values WooCommerce will use when you add color swatches.

Locate the “Color” attribute in the table and click it:

Configure terms

For this tutorial, create three terms.

Add the Black Color Term

Enter:

• Name: Black
• Slug: black
• Color value: #000000

Click “Add new color.”

Add the Navy Blue Color Term

Enter:

• Name: Navy Blue
• Slug: navy-blue
• Color value: #1D3557

Click “Add new color.”

Add the Burnt Orange Color Term

Enter:

• Name: Burnt Orange
• Slug: burnt-orange
• Color value: #CC5500

Click “Add new color.”

After saving, the terms should appear in the list with their names and visual color values.

Choose Accurate Color Values

When you add color swatches, the visual swatch should match the actual product as closely as possible.

A shopper who clicks Navy Blue should not receive a product that looks royal blue. Likewise, Burnt Orange should not appear as bright red.

Add all the color that your swatch needs.

Use one of these methods to select accurate values:

• Use the manufacturer-provided hex value
• Sample the color from the product photo
• Use the WordPress color picker
• Match the brand’s official color specification

If a solid color cannot represent the product accurately, use an image swatch instead.

Step 4: Create or Edit the WooCommerce Product

Now you need a product where you can add color swatches.

Go to:

Products → Add New Product

Enter the product name:

Classic Cotton T-Shirt

Add the normal product information:

• Long description
• Short description
• Product category
• Product tags
• Featured image
• Product gallery
• Shipping details
• Tax settings, when applicable

Scroll down to the Product data panel.

Open the product type dropdown and choose:

Variable product

A Simple product cannot contain purchasable color variations. You must use a Variable product when you want customers to select one color from several options.

Step 5: Add the Color Attribute to the Product

To add color swatches to this specific product, open the Attributes section inside the Product data panel.

Choose the global attribute:

Color

Click Add.

Select these values:

• Black
• Navy Blue
• Burnt Orange

Enable:

• Visible on the product page
• Used for variations

Then click:

Save attributes

Why “Used for Variations” Is Essential

The “Used for variations” setting is required when you add color swatches for purchasable product choices.

If you only enable Visible on the product page, WooCommerce may show the colors as product information, but it will not create selectable variations.

The correct setup is:

• The Color attribute is assigned to the product
• The required color terms are selected
• Used for variations is enabled
• The attributes are saved before generating variations

Step 6: Generate All Color Variations

After saving the attribute, open the Variations section.

Choose the option to create or generate variations from all attributes.

WooCommerce should create:

• Black
• Navy Blue
• Burnt Orange

This step connects each swatch to a real purchasable product variation. You cannot properly add color swatches by creating the visual terms alone; the matching WooCommerce variations must also exist.

Open each variation and configure its details.

At minimum, add:

• Regular price
• Stock status
• Variation image

You may also add:

• Sale price
• SKU
• Stock quantity
• Weight
• Dimensions
• Shipping class
• Tax class
• Variation description

Step 7: Configure the Black Variation

Open the Black variation.

To correctly add color swatches, every color option should have valid purchasable data.

Configure:

• Variation image: Upload the black T-shirt image
• Regular price: Enter the product’s price
• Stock status: In stock
• SKU: Optional
• Stock quantity: Optional
• Variation description: Optional

If you manage stock separately for each color, enable stock management and enter the available quantity.

For example:

• Black: 18 units
• Navy Blue: 12 units
• Burnt Orange: 8 units

Even if the swatch appears correctly, a variation without a price might be unavailable for purchase.

Click “Save changes” after editing the variations.

Step 8: Configure the Navy Blue Variation

Open the Navy Blue variation and add its information.

When you add color swatches, the image assigned to the variation should match the swatch customers click.

Configure:

• Variation image: Navy blue T-shirt image
• Regular price: Enter the correct price
• Stock status: In stock
• SKU: Optional
• Stock quantity: Optional
• Variation description: Optional

You may use the same price for every color or set a different price when one material, finish, or production process costs more.

Click “Save changes” after editing the variations.

Step 9: Configure the Burnt Orange Variation

Open the Burnt Orange variation.

To finish the variation setup before you add color swatches to the live page, configure:

• Variation image: Burnt orange T-shirt image
• Regular price: Enter the correct price
• Stock status: In stock
• SKU: Optional
• Stock quantity: Optional
• Variation description: Optional

Click “Save changes” after all variation settings are complete.

Step 10: Review the GS variation swatch settings.

Before publishing, review the plugin settings used to add color swatches.

The available controls may vary by version, but commonly used options can include:

• Swatch shape
• Swatch width and height
• Border
• Border radius
• Spacing
• Tooltip
• Selected-state styling
• Hover styling
• Disabled variation behavior
• Label display
• Image swatch display

Choose a design that matches the rest of your WooCommerce product page.

Round or Square Swatches?

Round swatches work well when you add color swatches for simple colors such as Red, Black, Blue, or Green.

Square swatches can be better for:

• Patterns
• Textures
• Fabric samples
• Wood finishes
• Multicolor designs

The main goal is clarity. The customer should be able to identify, compare, and select each option without confusion.

Step 11: Publish the Product

After you add color swatches, product attributes, and variation data, click the following:

Publish

If the product was already published, click

Update

Then click:

View product

The standard WooCommerce color dropdown should now be replaced with clickable color swatches.

You should see:

• A Black swatch
• A Navy Blue swatch
• A Burnt Orange swatch
• The variation price
• Stock information
• The Add to Cart button

Step 12: Test Every Swatch on the Frontend

Never assume the setup is complete just because you can see the swatches. After you add color swatches, test the full customer journey.

Test the black swatch.

Click “Black” and confirm.

• The swatch becomes selected
• The black T-shirt image appears
• The correct price loads
• The variation is in stock
• Add to Cart becomes available

Test the navy blue swatch.

Click Navy Blue and confirm:

• The Navy Blue swatch becomes selected
• The product image changes
• The correct variation data loads
• The Add to Cart button works

Test the burnt orange swatch.

Click Burnt Orange and confirm:

• The Burnt Orange swatch becomes selected
• The correct image appears
• The price and stock are correct
• The selected variation can be added to the cart

Test the Cart

Please add each color to the cart separately and confirm that the cart displays the correct variation name.

For example:

Classic Cotton T-Shirt – Color: Navy Blue

This final check confirms that you did not only add color swatches visually; you also connected them to the correct WooCommerce variations.

How to Add Color Swatches to Existing WooCommerce Products

You can also add color swatches to a product that already uses a color dropdown.

Follow this workflow:

• Create a global Color attribute
• Set the attribute type to Color
• Add the existing color terms
• Edit the variable product
• Replace or update the old attribute
• Confirm “Used for variations” is enabled
• Save the attributes
• Review the existing variations
• Assign the correct term to each variation
• Update and test the product

Be careful when editing a live product with existing orders or inventory. Do not delete working variations unless you have confirmed how the product data is currently structured.

How to Add Color Swatches with Different Product Images

Many store owners want to add color swatches so the main gallery image changes when a customer chooses a color.

The swatch color and variation image are configured separately.

Use this process:

• Create the color term and assign its visual color
• Add the term to the variable product
• Generate the matching variation
• Open that variation
• Upload the matching product image
• Save the variation
• Test the frontend selection

For example:

• Black swatch → Black T-shirt image
• Navy Blue swatch → Navy Blue T-shirt image
• Burnt Orange swatch → Burnt Orange T-shirt image

This is one of the most important steps when you add color swatches because the product image gives customers visual confirmation of their selection.

How to Add Color Swatches and Size Options Together

You can add color swatches and also provide size choices on the same product.

Create two global attributes:

• Color
• Size

For Color, use:

• Black
• Navy Blue
• Burnt Orange

For Size, use:

• Small
• Medium
• Large
• Extra Large

Assign both attributes to the product and enable the Used for variations option.

WooCommerce can then generate combinations such as the following:

• Black / Small
• Black / Medium
• Navy Blue / Large
• Burnt Orange / Extra Large

You may display Color as visual swatches and Size as labels or buttons. This gives customers a clear way to choose both product options.

When you add color swatches with sizes, test every valid combination and make sure the system handles unavailable combinations correctly.

How to Add Color Swatches for Patterns and Textures

A single color value may not be enough for striped fabric, floral prints, marble, leather, wood, or mixed designs.

In those cases, you can still add color swatches, but image swatches may represent the product more accurately.

Use image swatches for:

• Plaid patterns
• Printed fabrics
• Wood grains
• Stone finishes
• Leather textures
• Multicolor products
• Decorative surfaces

The setup is similar:

• Create the attribute
• Choose “Image” as the attribute type
• Add the terms
• Upload an image for each term
• Assign the terms to the product
• Generate the variations
• Add the full variation images
• Test the product page

Use a small swatch image for the selector and a high-quality product image for the actual variation.

How to Add Color Swatches That Work Well on Mobile

You should test mobile usability every time you add color swatches.

A swatch may look clear on a desktop but become difficult to select on a smaller screen.

Check:

• Swatch size
• Space between swatches
• Wrapping on multiple lines
• Selected-state visibility
• Tooltip positioning
• Disabled color appearance
• Image updates
• Add to Cart behavior

Avoid making the swatches too small. Customers should not need to tap several times to select a color.

Also verify whether long color names, such as “Light Heather Gray,” are visible through labels or tooltips.

Best Practices When You Add Color Swatches

Use Consistent Color Names

When you add color swatches, use clear customer-friendly names.

Good examples:

• Navy Blue
• Forest Green
• Burnt Orange
• Charcoal Gray
• Soft Pink

Avoid unclear internal names, such as

• BL-07
• Variant C
• Shade 12

Consistent names help with store management, product filtering, search, accessibility, and customer support.

Match Every Swatch to the Real Product

A swatch should accurately represent the product variation.

When you add color swatches, compare the swatch value with:

• The product photo
• The manufacturer’s color
• The actual physical sample
• The variation name

If the match is poor, customers may select the wrong product or lose confidence in the page.

Add an Image to Every Important Variation

Always assign a separate variation image when the visual difference matters.

You can add color swatches without unique images, but shoppers may not be able to confirm what the selected color looks like on the full product.

Show Unavailable Options Clearly

If a color is out of stock, the customer should understand that it cannot currently be purchased.

After you add color swatches, test how disabled or unavailable variations appear. They may be faded, crossed out, blurred, or otherwise marked, depending on your settings.

Use Tooltips for Similar Colors

Colors such as Black, Charcoal, Slate, and Navy may look similar in small circles.

When you add color swatches, tooltips can display the color name when the customer hovers or focuses on the option.

Keep the Swatches Close to the Product Choice

Place color swatches near the price, variation label, and Add to Cart area.

Customers should not need to search the page after you add color swatches.

Troubleshooting: Color Swatches Are Not Showing

If you followed the steps but cannot see the swatches, please use these checks.

Check 1: Confirm the Plugin Is Active

You cannot add color swatches with GS Variation Swatches if the plugin is inactive.

Go to:

Plugins → Installed Plugins

Confirm that the plugin is activated.

Check 2: Confirm the Attribute Type Is Color

Go to:

Products → Attributes

Edit the Color attribute and confirm the Type is set to Color, not Select.

This is one of the most common reasons a store tries to add color swatches but still sees a dropdown.

Check 3: Confirm the Product Is Variable

Open the product and verify that Product data is set to:

Variable product

A Simple product cannot contain selectable color variations.

Check 4: Confirm Used for Variations Is Enabled

Open the Attributes tab and confirm:

Used for variations is enabled.

Without this setting, WooCommerce does not treat the colors as purchasable options, even if you created the terms correctly.

Check 5: Confirm Variations Exist

Open the Variations tab and ensure WooCommerce created a separate variation for each color.

To successfully add color swatches, every selectable color must connect to a valid variation.

Check 6: Add a Price to Every Variation

A variation without a price may be unavailable for purchase.

Open each color variation and enter the regular price.

Check 7: Check Stock Status

Please ensure the variation is in stock.

If stock management is enabled, confirm the quantity exceeds zero.

Check 8: Clear Cache

After you add color swatches, cached CSS, JavaScript, or product HTML may prevent the new design from appearing immediately.

Clear:

• WordPress cache
• Browser cache
• CDN cache
• Server cache
• Optimization plugin cache

Then reload the product page in a private browser window.

Check 9: Test for Theme or Plugin Conflicts

Temporarily test with a default WordPress theme and disable unrelated plugins in a safe staging environment.

Some themes heavily customize WooCommerce variation fields and may interfere when you add color swatches.

Check 10: Check the Product Page Template

If you use Elementor, Divi, Bricks, Gutenberg blocks, or another builder, confirm the product template includes the standard WooCommerce variation form.

A custom template that removes or replaces the variation form may prevent swatches from appearing.

Check 11: Verify JavaScript Works

Open the browser console and check for JavaScript errors.

WooCommerce variation selection depends on JavaScript. A separate script error may stop the swatches, image switching, price update, or Add to Cart behavior.

Check 12: Test Another Product

Create a basic test product with two colors.

If you can add color swatches to the test product, the issue likely relates to the original product configuration rather than the plugin itself.

Final Checklist Before Publishing

Use this checklist after you add color swatches:

• GS Variation Swatches is active
• The global attribute is named Color
• The attribute type is Color
• Every color term has the correct name and value
• The product type is a variable product
• The Color attribute is assigned to the product
• Used for variations is enabled
• Every required variation exists
• Every variation has a price
• Stock status is correct
• Each color has the correct variation image
• Swatch styling works on desktop
• Swatch styling works on mobile
• The product image changes correctly
• The selected color appears correctly in the cart
• Out-of-stock colors are understandable
• The cache has been cleared
• The complete Add to Cart workflow has been tested

FAQs

Conclusion

The easiest way to add color swatches to WooCommerce is to create a reusable Color attribute, assign accurate color terms, connect those terms to a variable product, generate each variation, and add the correct price, stock, and product image.

GS Variation Swatches for WooCommerce replaces the standard color dropdown with clickable visual choices. This gives customers a clearer way to compare product colors and select the variation they want.

Start with one test product and follow the process in order. Once you can successfully add color swatches to the Classic Cotton T-Shirt, you can reuse the same global colors and workflow across the rest of your WooCommerce store.