How to Set Up a WooCommerce Variation Swatches Plugin for Dual Color Options

Why Single-Attribute Swatches Fail for Dual Color Products

To set up a WooCommerce variation swatches plugin for dual color options, install a compatible plugin like Variation Swatches as Radio Buttons, create two color attributes (e.g., 'Color' and 'Trim Color') in WooCommerce, assign them to your product's variations, and then configure the plugin to display each attribute as swatch buttons instead of dropdowns. Ensure each swatch is linked to the correct variation and adjust swatch size and style to match your theme.

Default WooCommerce handles variations with plain dropdown menus. That works fine for a single choice, like picking a shirt size. But dual color products, think a phone case with a body color and a contrasting camera trim, need two independent selections on the same product page. When a customer has to open one dropdown, pick "Midnight Blue," then open a second dropdown and pick "Rose Gold" for the trim, the buying process slows down and feels like a form, not a shopping experience.

That friction matters more than you might expect. According to the Baymard Institute, 56% of users' first actions were to immediately begin exploring product images after arriving on the product page, and visual clarity directly supports that behavior. Dropdowns hide the options behind a click and force the customer to hold the visual in their head. Swatches put the colors directly in view.

Here is why a dedicated Variation Swatches as Radio Buttons plugin becomes essential for dual color setups:

• Two attributes on one page: A plugin lets you map each attribute (body color and trim color) to its own set of swatch buttons, so customers see both choices simultaneously without scrolling or opening dropdowns.
• Immediate visual feedback: Swatches show the actual color, which removes guesswork. A test showed that larger product images increased sales almost 10 percent (9.46%), and clear swatches deliver a similar clarity at the attribute level.
• Fewer support questions: When customers can see the color options, they are less likely to contact you asking "what color is 'Graphite' exactly?"
• Cleaner product pages: Two dropdowns stacked on a page look cluttered. Two rows of color circles look organized and intentional.

Single-attribute tutorials rarely cover the dual color scenario. Most guides assume one "Color" attribute and stop there. The configuration that actually solves this problem treats each attribute independently, assigns a swatch type to each one, and lets customers build their product combination visually. That is the configuration this guide walks through.

Choosing the Right Variation Swatches Plugin

Not every WooCommerce variation swatches plugin handles two independent color attributes cleanly. Most are built around a single color attribute, which works fine for a t-shirt with three colors, but falls apart when your product has both a body color and a trim color that customers need to select separately.

Before you install anything, narrow your options to plugins that let you map multiple attributes to swatch types and control how each attribute displays. You want a plugin that treats every attribute independently, so your body color swatches and trim color swatches never bleed into each other visually or functionally.

Here's what to look for when comparing plugins for a dual-color setup:

• Attribute-level mapping: The plugin must let you assign a swatch type to each attribute individually, not just apply one style to all variations.
• Shape and size controls per attribute: You may want body color swatches to display larger than trim color swatches, since body color drives most purchase decisions.
• Shop page display: Confirm the plugin can show swatches on category and shop pages, not just the single product page. This matters because 25% of e-commerce sites don't provide sufficiently high-resolution images or level of zoom and swatches on the shop page help compensate for that gap.
• Out-of-stock handling: Look for hide, blur, or cross-out options so customers immediately know which color combinations aren't available.

For a dual-color setup, Variation Swatches as Radio Buttons is the strongest fit. It maps every attribute to its own swatch type, supports radio buttons with colors, images, or text labels, and lets you customize shape and size at the product level. That means your body color attribute can use large round color swatches while your trim color attribute uses smaller square ones, so the two never get confused.

Step 1: Install and Activate the Plugin

Before you can configure dual color swatches for body color and trim color, the plugin needs to be active on your WordPress site. Installation takes about five minutes and requires administrator access to your WordPress dashboard.

Start by downloading the plugin file. If you purchased Variation Swatches as Radio Buttons from WooCommerce, the .zip file is available in your WooCommerce account under Downloads. If you are evaluating options, the table below summarizes the leading plugins that support dual color attributes.

Once you have the .zip file, follow these steps:

1. Go to WordPress Admin → Plugins → Add New → Upload Plugin. This opens the file upload screen where you select the plugin .zip file from your computer.
2. Click Choose File and locate the plugin .zip file you downloaded.
3. Click Install Now and wait for WordPress to upload and unpack the plugin files.
4. Click Activate to enable the plugin across your store.

You should now see a new Variations Swatches tab under WooCommerce → Settings. This is where you will configure your dual color attributes in the next step.

Step 2: Create Your Color Attributes in WooCommerce

Before the swatches can render properly, WooCommerce needs to know which attributes exist and how they combine. For a dual-color product, you create two separate global attributes: one for the base color and one for the trim or accent color. Each attribute gets its own set of terms (the actual color values), and both attach to the same variable product.

This two-attribute setup is what makes Variation Swatches as Radio Buttons useful beyond simple single-color stores. The plugin maps each attribute independently, so customers can pick a body color and a trim color without the dropdown confusion that plagues default WooCommerce variation selectors.

The dual-color approach directly addresses a common conversion problem: 25% of e-commerce sites don't provide sufficiently high-resolution images or level of zoom and unclear variation selection compounds that issue by making shoppers guess what the final product looks like.

Create the Base Color Attribute

Navigate to Products → Attributes in your WordPress admin. This is where global attributes live, and creating them here means you can reuse them across multiple products later.

1. Enter Name: "Base Color" (or "Body Color" if that matches your catalog).
2. Enter Slug: "base-color" (lowercase, hyphens instead of spaces).
3. Choose Type: Select "Color" from the dropdown. This tells WooCommerce the attribute expects color values, which the swatch plugin will render as visual pickers.
4. Click Add attribute.

Next, scroll to the Terms section for this new attribute and add each color option. Click Add New Base Color enter the name (for example, "Matte Black"), then add the color value using the color picker or a hex code. Repeat for every base color in your lineup.

Create the Trim Color Attribute

Repeat the same process for the second attribute.

1. Go to Products → Attributes again.
2. Add Name: "Trim Color" and Slug: "trim-color".
3. Set Type to "Color".
4. Click Add attribute then populate its terms with the trim color options.

Keep the term names consistent across attributes. If you use "Black" for Base Color and "Black" for Trim Color, customers will understand the selection immediately. Mismatched names like "Black" versus "Obsidian" create confusion at the point of purchase.

Assign Both Attributes to Your Variable Product

Open the product where you want dual-color swatches. Click Add attribute under the Product Data panel, select each attribute from the dropdown, check Used for variations and save. Then head to the Variations tab and generate variations. WooCommerce creates every combination of base color and trim color automatically, which is exactly what you need for a dual-color configurable product.

Once both attributes are assigned and variations are generated, the swatch plugin can map each attribute to its own visual swatch on the product page. Customers will see two distinct rows of color options, one for base and one for trim, instead of a single dropdown trying to represent both dimensions at once.

Step 3: Assign Swatch Types and Values

After creating your two color attributes, the next step is telling the plugin how to display each one. This is where the dual-color setup comes together. You will assign a swatch type to each attribute, then map every attribute value to a specific color or image.

In the Variation Swatches as Radio Buttons plugin, open the "Map Attributes to Swatch Type" tab under WooCommerce → Settings → Variations Swatches. This tab lists every attribute you created in Step 2. For a dual-color product, you will typically map both "Body Color" and "Trim Color" to the color swatch type, though you can assign one to images if your trim has a pattern or texture.

Here is how the mapping works for each attribute:

Each attribute value needs its own hex code or image. Click the color field next to the value, enter the hex code (for example, #1A1A1A for Glossy Black), and save. If you choose the image type, upload a square image that represents that finish. Keep images at least 100 x 100 px so they stay sharp on retina displays; 25% of e-commerce sites fail to provide adequate image resolution and that directly hurts perceived product quality.

Assigning separate swatch types to each attribute is what makes the dual-color configuration work correctly. When both attributes use the same swatch type, customers can see every combination at a glance without opening dropdowns, which matters because 56% of users start by exploring product images when they land on a page. Your swatches function as the visual shorthand for that exploration.

After saving your attribute mappings, scroll to the Shape Settings tab and set the swatch width and height. For dual-color items, larger swatches help customers distinguish similar shades. The setting applies globally unless you override it at the product level, so verify the shape on a test product before updating your entire catalog.

Step 4: Configure the Swatch Display for Dual Colors

With both color attributes assigned to their swatch types, the next task is making sure shoppers can clearly distinguish between body color and trim color at a glance. This is where layout configuration matters most. A generic swatch setup will show both attributes side by side, often leading to confusion about which color belongs to which part of the product.

To fix this, head to WooCommerce → Settings → Variations Swatches and open the Shape Settings tab. Here you control the physical appearance of every swatch across your store. Configure the swatch size, shape, and label font to make each attribute visually distinct. For example, you might set body color swatches to a larger square shape and trim color swatches to a smaller round shape. This visual separation helps shoppers instantly understand that the two sets represent different product parts.

Next, you'll want to enable tooltips. Navigate to the Tooltip Settings tab and enable the tooltip option. Tooltips display the attribute value name when a shopper hovers over a swatch. That way, they see both the visual color and the text label, like "Matte Black" for body and "Chrome" for trim. This reduces guesswork, especially for colors that look similar on screen. You can also adjust the tooltip background and text colors to match your theme.

Finally, decide how out-of-stock variations appear. In the General Settings tab, you can set out-of-stock swatches to show a cross, blur, or completely hide them. For dual-color products, consider using the blur option so shoppers still see the available color options and understand the full customization range, even if one combination is unavailable.

Product-level settings take priority over your global configuration. When you edit an individual product, the Attribute Swatches tab in the product data panel lets you override the global swatch size, shape, and font size for that specific product. This is useful when a product needs different swatch proportions than your store default.

If you want a more streamlined approach with additional display options, Variation Swatches as Radio Buttons provides similar configuration controls. It lets you map attributes to swatch types, customize shapes and sizes, and display multiple attributes on shop pages, which works well for dual-color setups that need extra visibility.

After configuring these settings, save your changes and preview a product page. Both swatch sets should render independently, with clear visual separation between body and trim colors. Test the tooltips and out-of-stock behavior to confirm everything functions as intended.

How Do You Test That Both Color Pairs Work Correctly?

Testing is where most dual-color setups fail. When you have two independent color attributes, you need to verify that every combination of body color and trim color resolves to the correct variation, price, and image. A single missed pairing can leave customers clicking a non-existent option or seeing the wrong product photo at checkout.

Start on a product with at least three values in each attribute. This gives you enough combinations to catch conflicts without overwhelming your testing process.

1. Open the product page in a private or incognito browser window. This prevents cached variations from masking errors.
2. Select the first body color swatch then cycle through every trim color option. Confirm the price updates correctly and the product image changes to match each combination. For products like a two-tone water bottle, the image should swap instantly to show the selected pairing.
3. Repeat the process with each remaining body color value. For each one, test every trim color option again.
4. Test the out-of-stock behavior. Select a body color and trim color combination that has no available stock. According to your plugin settings the swatch should either hide, blur, or cross out the unavailable variation. If it stays fully clickable, your stock mapping is incomplete.
5. Verify the add-to-cart button becomes active only when both swatches are selected. If a selection is missing, the button should remain disabled.

Also check the shop page if you enabled Display Swatches on Shop Page. The dual swatches should appear for each variable product, and clicking one should update the product image without navigating into the product detail page.

Use a product with a wide price range across variations, such as a premium trim color that costs extra. This lets you confirm the price recalculates correctly with each combination, a common point of failure in dual-color configurations.

Troubleshooting: Swatches Not Showing or Not Syncing with Variations

Even with a properly configured Variation Swatches as Radio Buttons plugin, dual-color setups can fail silently. The two most common culprits are browser caching and attribute mismatches between your product data and the swatch settings. Here is how to isolate and fix each problem.

Swatches Do Not Appear on the Product Page at All

If the dropdowns remain as standard selects, the plugin is likely not detecting your attributes as swatch-ready. Go to WooCommerce → Settings → Variations Swatches → Map Attributes to Swatch Type and confirm both color attributes are assigned a swatch type (color, image, or text). If an attribute is missing from that list, it was created after the plugin mapping was saved. Re-save the mapping and clear any caching plugin you use, including server-side caches like Redis or Varnish.

Only One Color Displays as a Swatch

This is the signature dual-color problem. When body color renders as a swatch but trim color stays a dropdown, the trim attribute is still set to "Select" in the Map Attributes tab. Change it to a swatch type and save. Also check the product-level settings: when you edit a variable product, the Attribute Swatches tab overrides global settings. If "Enable" is unchecked for that specific product, the global configuration will not apply.

Swatches Show the Wrong Color or Image

Attribute values often share names across products (for example, "Black" used for both body and trim). If the swatch displays an incorrect color, the value is pulling from the wrong attribute term. In WooCommerce → Products → Attributes, verify each term has its own swatch value assigned. Duplicate term names do not share swatch data, so a term that was never mapped will fall back to a text label or default color.

Product Image Does Not Change When Clicking a Swatch

This usually points to a variation image assignment issue, not a swatch rendering issue. Open the variable product, go to Variations, and confirm each combination has its own image uploaded in the "Image" field. The swatch plugin only swaps to what WooCommerce already has associated with that variation. If the image field is empty, nothing will change on click, regardless of swatch settings.

Out-of-Stock Swatches Still Appear Clickable

Navigate to WooCommerce → Settings → Variations Swatches → General Settings and check the "When Variation is Out of Stock" option. The plugin supports Cross, Blur, or Hide. If it is set to "Hide" but the swatch still shows, the variation may not actually be out of stock from WooCommerce's perspective. Stock status is calculated per variation, so confirm each combination has its own stock value set, not just the parent product.

Changes to Swatch Settings Do Not Take Effect

If you update plugin settings but the front end looks unchanged, caching is almost always the cause. Clear WordPress page cache, browser cache, and any CDN cache in that order. For Cloudflare users, purge the cache from the dashboard rather than waiting for the automatic invalidation. If you recently edited product-level settings, remember that product-level configuration takes priority over general settings, so a stale product-level override can mask your global changes.

Why Dual Color Swatches Matter for WooCommerce Stores

When you sell products with two independent color attributes, such as a t-shirt with both body color and print color, or a phone case with shell color and button color, the default WooCommerce dropdowns force customers to guess what they are selecting. A woocommerce variation swatches plugin turns those dropdowns into clickable, visual buttons that show the actual color or image of each option.

This matters because customers make purchase decisions visually. According to the Baymard Institute 56% of users immediately begin exploring product images after arriving on a product page, and 25% of e-commerce sites fail to provide sufficiently high-resolution images. Swatches bridge the gap between a product image and the selection experience. When shoppers can see color options at a glance, they spend less time guessing and more time completing their purchase. For stores selling customizable products, dual color swatches reduce the confusion that leads to abandoned carts.

What You'll Need

• Administrator access to your WordPress dashboard, specifically permission to install plugins and modify WooCommerce settings
• A WooCommerce store with at least one variable product that uses color attributes
• The Variation Swatches as Radio Buttons plugin or an alternative swatches plugin installed and activated
• Approximately 30 minutes to complete the configuration from start to finish
• Beginner to intermediate difficulty level; no coding knowledge is required

Full documentation: Official Documentation

Quick Answer

To set up a WooCommerce variation swatches plugin for dual color, install a swatches plugin like Variation Swatches as Radio Buttons, create two separate color attributes (for example, body color and trim color), assign each attribute a swatch type, then configure the display settings in WooCommerce → Settings → Variation Swatches. This turns both attribute dropdowns into visual color selectors on your product pages.

How to Set Up a WooCommerce Variation Swatches Plugin for Dual Color?

Setting up dual color swatches involves three phases: preparing your product attributes, configuring the plugin's global settings, and mapping each attribute to the correct swatch type. The following methods walk you through the complete process.

Method 1: Variation Swatches as Radio Buttons

Variation Swatches as Radio Buttons is a WooCommerce plugin that replaces default dropdown fields with visually engaging swatches. It supports radio buttons with colors, images, and text labels, and it handles dual color scenarios by letting you map each attribute independently. This makes it a strong fit for stores selling products with both body color and trim color, or any other two-attribute color configuration.

Step 1: Install and Activate the Plugin

Why: The plugin must be active before you can access its settings or map attributes to swatch types.

Action: Download the plugin .zip file from your WooCommerce account, then navigate to WordPress Admin → Plugins → Upload Plugin.

• Choose the plugin .zip file
• Click Install Now
• Click Activate

Result: You should now see the plugin listed under your active plugins, and a new Variations Swatches tab will appear in your WooCommerce settings.

Step 2: Create Your Dual Color Attributes

Why: Dual color products require two separate attributes so customers can select each color independently without conflicts.

Action: Navigate to Products → Attributes in your WordPress admin panel.

• Click Add New Attribute and create one called "Body Color"
• Click Add New Attribute again and create one called "Trim Color"
• Add the color terms (for example, Red, Blue, Black) to each attribute

Result: You should now see both attributes listed under Products → Attributes, ready to be assigned to your variable product.

Step 3: Assign Both Attributes to Your Product

Why: Your product needs to reference both color attributes before the swatches plugin can display them.

Action: Open the product you want to customize, scroll to Product Data, and click on the Attributes tab.

• Select "Body Color" from the dropdown and click Add
• Select "Trim Color" from the dropdown and click Add
• Check the box labeled Used for variations on both attributes
• Go to the Variations tab and generate all possible combinations

Result: You should now see all body and trim color combinations listed as variations on your product.

Step 4: Configure General Settings

Why: Global settings control how out-of-stock items appear, when product images change, and which products display swatches.

Action: Navigate to WooCommerce → Settings → Variations Swatches, then click on the General Settings tab.

• When Variation is Out of Stock: choose Cross, Blur, or Hide to indicate unavailable combinations
• Change Product Image on Shop Page: select whether the image changes on click or hover
• Show Variation Swatches for: choose All Variable products or specific Products
• Generate Variation URL: enable this checkbox to create shareable URLs for each variation
• Display Swatches on Shop Page: enable this checkbox to show swatches directly on catalog pages

Result: You should now see the global display behavior configured exactly how you want it for your dual color products.

Step 5: Map Each Color Attribute to a Swatch Type

Why: Mapping tells the plugin which attribute uses color swatches versus image swatches, which is essential for rendering dual color options correctly.

Action: In the same Variations Swatches settings area, click on the "Map Attributes to Swatch Type" tab.

• Find "Body Color" in the list and assign it the Color swatch type
• Find "Trim Color" in the list and assign it the Color swatch type (or Image if you use patterned trims)
• Assign each attribute value its specific hex code or image
• Click Save changes

Result: Both color attributes now display as visual swatches on your product page instead of dropdowns.

Step 6: Adjust Shape and Tooltip Settings

Why: Shape and tooltip settings improve the clarity and usability of your dual color swatches.

Action: Click on the Shape Settings tab and the Tooltip Settings tab.

• Shape Style: choose Round or Square
• Width and Height: set the swatch dimensions in pixels
• Font Size for Labels: adjust if you use text labels
• Enable Tooltip: check the box to show attribute names on hover
• Tooltip content type: select Text or Image

Result: Your swatches now have a consistent shape and show helpful tooltips that confirm which color the customer is selecting.

Step 7: Verify Out-of-Stock Behavior

Why: Customers need clear feedback when a specific color combination is not available.

Action: Return to the General Settings tab.

• Confirm the When Variation is Out of Stock option is set to Cross, Blur, or Hide
• Save your changes

Result: Unavailable combinations will now be visually distinguished from available ones, reducing customer frustration.

Method 2: General WooCommerce Swatch Plugin

If you prefer a different swatch plugin, the setup process is similar but will vary in menu placement and field names. The core steps remain the same: install the plugin, create two color attributes, assign both to your product, and map each attribute to a swatch type in the plugin's settings.

For comparison, refer to the 7 best WooCommerce variation swatches plugins or the 13 best WooCommerce variation swatches plugins to understand how different tools handle attribute mapping and display options.

Key Differences from Method 1

• Settings location: Some plugins place swatch settings under WooCommerce → Settings, while others add their own top-level menu item
• Attribute mapping: The tab name and layout may differ, but the concept of assigning each attribute a swatch type remains the same
• Product-level overrides: Not all plugins allow per-product customization of swatch size, shape, or style. If you need that control, confirm the plugin supports it before purchasing

For most dual-color stores, Variation Swatches as Radio Buttons offers the most direct path because it combines per-attribute mapping with product-level overrides and shop page display options. That combination covers the full range of dual-color use cases without requiring additional plugins or custom code.

Which Method Should You Choose?

If you need a straightforward setup with per-attribute swatch types, product-level overrides, and consistent out-of-stock handling, choose Variation Swatches as