---
title: Variation Swatches Overview
description: "The **[DiviMerc Variation Swatches module](https://divimerc.com/modules/variation-swatches/)** lets you replace standard WooCommerce variation dropdowns with more visual selectors, like color swatches, image swatches, buttons, radio buttons and more. **Important Note:** - Enable the Variation Swatches module from **DiviMerc → Modules**, as it…"
url: "https://divimerc.com/docs/variation-swatches/"
updated: "2026-09-26"
category: Modules
---

# Variation Swatches Overview

The **[DiviMerc Variation Swatches module](https://divimerc.com/modules/variation-swatches/)** lets you replace standard WooCommerce variation dropdowns with more visual selectors, like color swatches, image swatches, buttons, radio buttons and more.

**Important Note:**

- Enable the Variation Swatches module from **DiviMerc → Modules**, as it is disabled by default..
- Create **variable products** and set up variations for products to preview in the editor and find them in the frontend.
- Enable the module and configure the swatches by tapping the **‘Manage Swatches’** button to customize selectors beyond WooCommerce’s default style.

- Keep the default or DiviMerc **Add to Cart** module to make the variation selections work properly.
- The Divi Builder may show **sample swatches for preview** or you can preview specific products. However, the single product on the storefront shows the product’s actual variations.

Let’s see the settings in brief and how to make better use of it.

**Note:** Only **global WooCommerce attributes** appear on the main Variation Swatches manager screen. Use **variable products** with attributes marked **Used for variations**. To learn about swatch types and how to customize them, **[check this](#variation-swatches)**.

## Content Tab

The Content tab has all the necessary controls to configure its content, adjust display settings and personalize how variation attributes behave.

### Content.

**Product:** Choose which product provides the variation data. Keep it set to Current when using the module in a Single Product template, or select a specific product when needed.

### Display Settings

- **Attribute Label:** Place the attribute name above or to the left of its values or hide the label completely.
- **Show Selected Value:** Display the currently selected variation value beside the attribute label.
- **Selected Style:** Choose how the selected swatch is visually highlighted.
- **Show Description:** Show the description of attributes about what they do and how.
- **Show Tooltip:** Choose to show a tooltip when shoppers hover over supported variation options.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-2.webp)

### Out of Stock

Choose how unavailable variations appear for each variation type:

- **Button Out Of Stock:** Choose from **Cross, Diagonal, Strikethrough, Blur/Fade, or Hide**.
- **Color Out Of Stock:** Choose from **Cross, Diagonal, Blur/Fade, or Hide**.
- **Image Out Of Stock:** Choose from **Cross, Diagonal, Blur/Fade, or Hide**.
- **Dropdown Out Of Stock:** Choose from **Strikethrough, Blur/Fade, or Hide**.
- **Product Card Out Of Stock:** Choose from **Diagonal, Blur/Fade, or Hide**.

**How the Out of Stock Styles Work**

- **Cross:** Displays an X-shaped mark over the unavailable option.
- **Diagonal:** Adds a diagonal line across the unavailable option.
- **Strikethrough:** Adds a line through the variation text or value.
- **Blur/Fade:** Reduces the visibility of the unavailable option while keeping it displayed.
- **Hide:** Completely removes the unavailable option from the selector.

**Note:** Out-of-stock states can update dynamically as shoppers select different variation combinations. For example, selecting one color may make a particular size unavailable. 

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-3.webp)

**Link:** Add a custom link to the swatches item.

**Background:** Configure the item’s background settings.

**Element Label:** Rename the item for easier identification inside the Divi Builder. (Visible only to you.)

## Design Tab

The Design tab gives you control over the appearance of the module and each type of variation selector.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-4.webp)

**Layout:** Use layout controls to adjust the layout style, horizontal and vertical gaps, direction, alignment, wrapping and content distribution as needed.

### Gap

- **Gap Between Attribute Rows**: Control the spacing between one product attribute and the next.
- **Gap (Label → Swatches):** Control the distance between an attribute label and its variation choices.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-6.webp)

### Text

- **Attribute Label:** Customize the typography of attribute labels such as: color, size, material
- **Selected Value:** Customize the appearance of the selected variation value when Show Selected Value is enabled.

### Tooltip

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-7.webp)

- **Background:** Define the background color and appearance applied to the selected tooltip.

There you will also find settings options like text and spacing. (This only appears when you enable the **Show Tooltip** option under **‘Content → Display Settings’**.)

### Out of Stock

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-8.webp)

- **Out-of-Stock Opacity:** Control how transparent or faded an unavailable option appears.
- **Cross / Line Color:** Set the color used for the Cross (X) or Diagonal line out-of-stock indicators.

### Color Swatch

- **Swatch Width:** Controls the horizontal size of each color swatch.
- **Swatch Height:** Sets the vertical size of each color swatch.
- **Swatch Corner Radius:** Adjusts how rounded the corners of the color swatches appear. **Swatch Border Width:** Controls the thickness of the border around each color swatch.
- **Swatch Border Color:** Sets the border color used around the swatches.
- **Swatches Ring Width:** Controls the thickness of the ring used to highlight the currently selected swatch.
- **Selected Ring Color:** Sets the color of the ring that appears when selecting an active color swatch.
- **Selected Ring Offset:** Adjusts the space between the selected swatch.
- **Description Text:** Adds a descriptive text and customize typography and styling as needed.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-9.webp)

### Dual Color

- **Swatch Width:** Controls the horizontal size of each dual-color swatch.
- **Swatch Height:** Sets the vertical size of each dual-color swatch and determines its overall height.
- **Swatch Corner Radius:** Controls how rounded the swatch corners appear.
- **Swatch Border Width:** Sets the thickness of the border around each dual-color swatch.
- **Swatch Border Color:** Defines the border color surrounding the swatches.
- **Swatches Ring Width:** Controls the thickness of the selection ring displayed around the active dual-color swatch.
- **Selected Ring Color:** Sets the color of the ring that appears when selecting an active dual color swatch.
- **Selected Ring Offset:** Adjusts the space between the selected swatch.
- **Description Text:** Adds a descriptive text and customize typography and styling as needed.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-10.webp)

### Image Swatch

- **Image Swatch Size:** Controls the overall size of each image-based variation swatch.
- **Image Swatch Radius:** Adjusts the corner roundness of the image swatches.
- **Image Swatch Border Width:** Sets the thickness of the border around each image swatch.
- **Image Swatch Border Color:** Defines the default border color shown around unselected image swatches.
- **Selected Border Width:** Controls the thickness of the border used to highlight the currently selected image swatch.
- **Selected Border Color:** Sets the border color applied to the active image swatch.
- **Description Text:** Adds a descriptive text and customize typography and styling as needed.

**Note:** Image swatches are always square, so the Image Swatch Size setting controls both width and height. 

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-11.webp)

### Button

- **Selected Background:** Set the background color of the selected button.
- **Selected Text Color:** Set the text color of the selected button.
- **Selected Border Color:** Set the border color of the selected button.

Alongside these, adjust text, description text, background, border, etc. as needed with Divi controls.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-11-1.webp)

### Radio Button

- **Radio Selector Size:** Control the size of the radio selector used for each variation option.
- **Radio Selector Color:** Set the default color of the radio selector before an option is selected.
- **Selected Selector Color:** Set the color of the radio selector for the currently selected variation.
- **Selected Background:** Define the background color applied to the selected radio button option.
- **Selected Text Color:** Set the text color used for the currently selected variation option.
- **Selected Border Color:** Set the border color applied to the selected radio button option.

Use the Text, Background, Border, Spacing, Menu, and Row sections for standard styling controls.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-12.webp)

### Dot Button

- **Color-Dot Size (Chip):** Control the size of the color dot displayed inside each variation chip.
- **Selected Background:** Define the background color applied to the selected dot button option.
- **Selected Text Color:** Set the text color used for the currently selected option.
- **Selected Border Color:** Set the border color applied to the selected dot button option.

Use the Text, Background, Border, Spacing, Menu, and Row sections for standard styling controls.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-13.webp)

### Product Card

- **Card Width:** Control the width of each product card option.
- **Image Width:** Control the width of each image in card option.
- **Image Height:** Control the height of each image in card option.
- **Image Fit:** Set how the image will fit in the card. The options are: Contain, Cover, Fill
- **Alignment:** Set the alignment in the card. The options are: Left, Center, Right
- **Selected Background:** Define the background color of the selected card.
- **Selected Label Color:** Set the label color for the selected card.
- **Selected Border Width:** Control the border thickness of the selected card.
- **Selected Border Color:** Set the border color of the selected card.

Use the **Label Text, Description Text, Background, Border and Spacing** sections for further customization.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-14-1.webp)

### Dropdown

- **Width:** Control the overall width of the dropdown.
- **Arrow Color:** Set the color of the dropdown arrow.
- **Row Highlight Color:** Define the highlight color shown on a dropdown row.
- **Menu Max Height:** Set the maximum height of the opened dropdown menu.
- **Selected Row Background:** Define the background color of the selected row.
- **Selected Row Text Color:** Set the text color of the selected row.
- **Chosen: Toggle Background:** Define the background color of the closed dropdown showing the selected value.
- **Chosen: Toggle Border:** Set the border color of the selected-value dropdown field.
- **Chosen: Toggle Text:** Set the text color of the selected value.
- **Chosen: Arrow Color:** Set the arrow color shown in the selected-value field.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-15-1.webp)

Use the Text, Background, Border, Spacing, Menu, and Row sections for standard styling controls.

**Border:** Customize the border width, color, style, and corner radius.

**Box Shadow:** Add and adjust a shadow around the module or element

### Clear Button

- **Text:** Enter the label displayed on the clear button**.**

Use the **Text** section to customize the button typography with Divi’s standard text controls.

![](https://divimerc.com/wp-content/uploads/2026/08/variation-swatches-16.webp)

**Spacing:** Adjust margin, padding and others to customize the spacing as needed.

**Animation:** Use any animation that fits your styling and aesthetics.

## Advanced Tab

The Advanced tab provides the standard Divi settings for custom CSS, visibility conditions, transitions, attributes, positioning and other advanced controls.

## How to Manage Variation Swatches

After enabling the module, once you click on the ‘**Manage Swatches**’ button adjacent to it, you’ll find these items on the next screen:

- **All your created global attributes**
- **You created number of terms with each attribute**
- **Representation (eight items)**
- **An option to open and configure the attribute**

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-17.webp)

**Note:** Product-specific custom attributes do not appear on this variation screen. They can only be configured individually from the product page.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-18.webp)

**Note:** If you don’t have any global attributes created already, you will see a screen like this, as shown below. Tap the ‘**Create an attribute**’ button, and it will take you to **WooCommerce → Attributes** to create them first.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-19.webp)

### How to Set Different Representations for Attributes

You can add a representation to each attribute from 8 different types. Then, manage their value, tooltip text, etc and have a preview of how they appear to shoppers.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-20.webp)

- For **Color Swatch**, the options are: Preview, Term, Value, Tooltip text

Among them, you can set or customize values and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-21.webp)

- For **Dual Color**, the options are: Preview, Term, Value, Tooltip text

Among them, you can set or customize values and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-22.webp)

- For **Image Swatch**, the options are: Preview, Term, Upload Image, Tooltip text

Among them, you can upload images and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-23.webp)

- For **Button**, the options are: Preview, Term, Value, Tooltip text

Among them, you can set or customize values and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-24.webp)

- For **Radio Button**, the options are: Preview, Term, Value, Tooltip text

Among them, you can set or customize values and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-25.webp)

- For **Dot Button**, the options are: Preview, Term, Value, Tooltip text

Among them, you can set or customize values and add tooltip text based on your needs.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-26.webp)

- For **Dropdown**, the options are: Preview, Term

These are products’ default. You cannot make any changes here but have a preview.

![](https://divimerc.com/wp-content/uploads/2026/08/Variation-Swatches-27.webp)

- For **Product Card**, the options are: Preview, Term, Value, Upload Image, Tooltip Text

Among them, you can set or customize values, upload images and add tooltip text based on your needs.

## Need Help?

If you have any questions or experience issues while using the Variation Swatches module, please contact our support team at: support@wprio.com