If you have ever tried to sell a product that comes in two-toned or dual colored variations, you already know how awkward it gets trying to represent that properly on a product page. A single color swatch just does not do the job when the variation is technically two colors at once, and a dropdown with a text label like “Navy and Cream” or “Black and Red” is honestly not much better because it forces the customer to imagine what that actually looks like rather than just showing them.
This is a problem that comes up more than people expect, across fashion stores selling two-tone sneakers or striped apparel, home decor stores with dual-toned cushions or rugs, and even accessory brands dealing with multicolored product lines where one swatch per variation simply does not represent the product accurately enough.
Dual color variation swatches solve this in a pretty straightforward way by letting you display two colors within a single swatch, so the customer immediately sees both tones without needing to read anything or use their imagination. It is a small visual change on the surface, but it makes the product page feel a lot more honest and accurate, and customers tend to respond well to that.
The Variation Swatches as Radio Buttons plugin by Extendons includes this feature as part of its broader variation swatches for WooCommerce setup, and this blog is going to walk you through exactly how to get it working on your store, along with everything else you need to configure around it.
How to Install The Variation Swatches Plugin?
Before you can set up dual color swatches or really any kind of variation swatches for WooCommerce, you need to get the plugin installed and activated first, so let us start there.
The installation process is straightforward and follows the standard WordPress approach:
- Download the Variation Swatches as Radio Buttons for WooCommerce .zip file from your WooCommerce account
- In your WordPress admin panel, go to Plugins > Add New > Upload Plugin
- Select the .zip file you just downloaded and click Install Now
- Once the installation finishes, click Activate Plugin
After activation, the plugin settings will be accessible under WooCommerce > Settings, where you will find a Variation Swatches tab waiting for you. That tab is where the global configuration lives, and it is the first place you want to spend some time before going into individual product settings.
Understanding the Global Settings Before Going Product Level
A lot of people skip straight to the product level when setting up the swatches WooCommerce plugin and end up having to go back and redo things because they did not set the globals first. It is worth taking a few minutes here because these settings apply across all your variable products by default, and getting them right early saves you a lot of repetitive work later.
Inside WooCommerce > Settings > Variation Swatches, you will find several tabs to work through.
General Settings is where you handle the foundational behaviour of the plugin:
- When Variation is Out of Stock: Choose how out-of-stock swatches are displayed. You can cross them out, blur them, or hide them entirely, depending on what makes most sense for your store
- Change Product Image on Shop Page: Decide whether the product image updates when a customer clicks or hovers over a swatch on the shop page
- Show Variation Swatches for: Choose whether swatches display across all variable products or only specific ones you select manually
- Generate Variation URL: Enable this to create a unique shareable URL for each product variation, which is a genuinely useful feature we will come back to
- Display Swatches on Shop Page: Check this to make swatches visible directly on the shop and category pages so customers can interact with variations without opening the product page
Shape Settings is where you control how the swatches look visually across the store:
- Shape Style: Choose between Round or Square swatches, depending on what fits your store design better
- Width and Height: Enter the dimensions in pixels to set how large the swatches appear
- Font Size for Labels: Adjust the font size for any text label swatches you are using
Tooltip Settings lets you add a small pop-up that appears when a customer hovers over a swatch:
- Enable Tooltip: Check this to turn tooltips on
- Tooltip Font Size: Set the size of the text inside the tooltip
- Tooltip Background Color and Text Color: Customize the colors to match your store
- Tooltip Content Type: Choose between displaying text or an image inside the tooltip
Border Settings controls the border appearance around swatches:
- Border Style: Enable or disable borders for image and label swatches
- Border Color: Set the color of the border around swatches
Mapping Your Attributes to the Right Swatch Type
Once the general settings are sorted, the next thing to do is go into the Map Attributes to Swatch Type tab, and this step is important because it is where you tell the plugin what kind of swatch each of your product attributes should display as.
All the attributes you have already created in WooCommerce will show up here, and for each one, you can assign it to a swatch type, whether that is a color swatch, an image swatch, a text label, or a radio button. For the dual color feature specifically, the attribute you are using for color needs to be mapped to the color swatch type so the plugin knows to treat it as a visual color display rather than a text label or image.
This tab also gives you control over the shape and size of swatches, specifically on the product page, which can be set differently from the shop page if you want larger or differently shaped swatches in those two contexts.
Setting Up the Dual Color Swatch on a Product
This is the part most people are here for, so let us get into it properly. Once your global settings and attribute mapping are in place, you go to the individual product where you want to set up the dual color swatch.
Navigate to WooCommerce > Products and either add a new product or edit an existing variable product. Scroll down to the Product Data section and click on the Attribute Swatches tab, which the plugin adds to the product data area.
Inside the attribute swatches tab, you will see a table displaying all the attributes and their values for that product. For each attribute value, which in this case would be each color variation, you can assign the swatch settings at the product level.
To set up a dual color swatch for a specific variation:
- Find the color attribute value you want to make dual-toned in the table
- Select the color swatch type for that attribute if it is not already set
- You will see the option to assign two colors to a single swatch, enter the first color and the second color for that variation
- The swatch will then display both colors split within the same swatch tile, giving customers an immediate visual representation of the dual tone variation
- Repeat this for each dual colored variation in the product
It is worth taking a moment to think about how clearly the two colors are being represented in the swatch. For very similar shades, the dual swatch still works, but for high contrast combinations like black and white or navy and cream, it is particularly effective because the difference is immediately obvious to anyone looking at the product page.
Also worth noting is that product-level settings in the swatches WooCommerce plugin take priority over the global settings, so if you want a particular product to have differently sized or shaped swatches compared to the rest of your store, you can do that here without affecting anything else.
Controlling Which Products Display Swatches and How
One thing that the variation swatches for the WooCommerce plugin handles well is giving you control over which products actually show swatches and in what context, because not every store wants swatches on every product, and not every product type benefits from them equally.
From the General Settings, you can choose to display swatches across three different scopes:
- All Variable Products: Every variable product in the store gets swatches automatically
- All Variable Products Except Specific Ones: Swatches show everywhere, but you can exclude individual products where swatches do not make sense
- Specific Variable Products Only: Swatches only appear on the products you manually select, giving you the most granular control
This flexibility matters more than it might seem at first because if you have a mixed catalogue where some products have meaningful visual variations, and others have variations that are better represented as text, being able to mix and match swatch display across products keeps things feeling appropriate and intentional rather than just applying the same treatment to everything regardless of whether it fits.
Display Swatches on the Shop Page and Using the Variation URL Feature
Two features in the variation swatches for WooCommerce plugin that work really well together and are worth setting up alongside the dual color swatches are the shop page display and the variation URL generator.
The shop page display option, which you enable in the General Settings, brings the variation swatches directly onto the product cards on your shop and category pages. When this is active, customers can click through available variations, including your dual color swatches, directly from the listing without having to open the product page first.
For the dual color swatches, specifically, this is a nice feature because it means the visual representation of those two-toned variations is visible right from the browsing experience, which gives customers a much more accurate first impression of what the product actually looks like before they even click through.
The variation URL generator is a separate but related feature that creates a unique shareable link for any specific product variation and its attributes. So if a customer finds a particular dual-tone color combination they like, they can share that exact variation directly with someone else, and whoever receives the link lands on that specific variation already selected without having to navigate to it manually.
For stores where customers often share products with friends or family before purchasing, this is a genuinely useful addition to the shopping experience, and it works cleanly alongside the swatch display without any extra setup required beyond enabling the checkbox in the General Settings.
Making Out of Stock Variations Work Properly With Your Swatches
One last thing worth covering before wrapping up is how the swatches WooCommerce plugin handles out-of-stock variations, because this is something that affects the dual color swatches just as much as any other swatch type, and getting it right matters for the overall experience.
From the General Settings, you have three options for how out-of-stock swatches are displayed:
- Cross Out: The swatch remains visible, but a line is drawn through it, indicating it is unavailable, which is probably the most common approach because it shows the customer that the variation exists even if it cannot be purchased right now
- Blur: The swatch appears faded or blurred, making it visually obvious that it is not currently available without removing it from view entirely
- Hide: The swatch disappears from the product page completely when the variation is out of stock, which keeps the page clean but means customers cannot see what variations might come back into stock later
For dual color swatches, specifically the cross-out option tends to work best visually because it keeps both colors visible within the swatch while making it clear the variation is unavailable, whereas blurring can sometimes make it harder to see the two-tone effect clearly, and hiding removes the variation entirely, which loses the visual reference.
Conclusion
Setting up dual color variation swatches is one of those product page improvements that makes an immediate and visible difference to how accurately your products are being represented to customers, and for stores with genuinely two-toned or dual colored product variations, it is honestly something that should have been set up from the start.
The Variation Swatches as Radio Buttons plugin by Extendons makes this straightforward to configure through both the global settings and the product level attribute swatch table, and it sits neatly within a broader variation swatches for WooCommerce setup that also covers shop page display, tooltip customization, out of stock handling, and the variation URL generator.
Once it is all in place, customers get a much clearer and more honest picture of what they are buying before they even add anything to their cart, and that kind of clarity tends to quietly reduce confusion, returns, and the kind of hesitation that comes from a product page that does not quite show what the product actually looks like.