# Color Swatches

*Follow these steps to create Product Variation Swatches.*

{% embed url="<https://youtu.be/N6-cm_rQvuY>" %}

### Create variations

**Step 1:** From the Dashboard, navigate to **Products > Attributes**&#x20;

**Step 2:** Fill in the Attribute name (such as Size, Color, Image, etc)

*For example, you want to add color attribute to the product then fill in “Color” in “Name” field.*

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2F47AKHiJLeQCsqP1L2loz%2Fswatches-1.png?alt=media\&token=8851e38f-2981-4a0e-9d9f-4075540ed3c8)

**Step 3:** You can determines how this attribute's values are displayed with **Swatch Type**

You can display your attribute in 2 types:

1. *Image*

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2Fw0Y5jmQA96EDTFl1zoBH%2Fswatches-3-2.png?alt=media\&token=ee0f71fa-038d-4925-95a0-e90f4a7e9763) ![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2FagIWOUv0L5kCmUs7Z2M3%2Fswatches-3.png?alt=media\&token=0006590a-229e-43de-ba0e-db88c22f2495)

2\. Color / Gradient Color

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2F2FIUoMKtYbTNPXeMcLhX%2Fswatches-2-2.png?alt=media\&token=204a7468-e2fa-4249-92ea-53b536dd84ad)![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2FiXRbdV0O8bZgbn0n3nb6%2Fswatches-2.png?alt=media\&token=a7a1cb9d-6e3d-4292-96b6-6a0bc34f2221)

When you're done, you can choose to create new product using this attribut&#x65;**,** or add this attribute to the products you've already create.

{% hint style="info" %}
To change how your variation display, from Attributes, click Edit the Attribute you've just created > Swatch Type > Update&#x20;
{% endhint %}

### Set up variation swatches for product**s**

**Step 1:** From the admin dashboard, navigate to **Products > All Products**.

{% hint style="success" %}
Note: If you haven't created any product, go to Product > Add New, then fill in all the need information
{% endhint %}

**Step 2:** Select the product you want to set Product variation swatches. At the Product data section, select Product type as Variable product.\
**Step 3:** Choose tab Attributes > Add the attribute you've just created

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2FnHwo7EMQ3QtK2d9x1GVJ%2Fswatch-d-1.png?alt=media\&token=dfd9cebc-e0cc-4213-89f1-36422fca68f8)

**Step 4:** Click on each attribute tab to fill in its value by typing in the value you want then hit Add new. Also, put a tick on 2 options that are Visible on the product page and Used for variations. And finally hit Save attributes.

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2FDNA0hJEc0XoEkCvjAQrQ%2Fswatch-d-2.png?alt=media\&token=c92bf044-b498-45d5-8c65-1993ce89e50c)

**Step 5:** Move to tab Variations, click the dropdown menu and choose Create variations from all attributes, click Go.

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2F8HKAXfdUXTHYTm9yCXjG%2Fswatch-d-3.png?alt=media\&token=9b1548bb-2130-4600-a1c8-1c41837fc680)

**Step 6:** Now you will see all the variations appear based on the product’s attributes. Firstly, select the default variation if you want. Next, select the attribute that you want to show on shop catalog.\
**Step 7:** Click on each variation to set up its image, price, sale countdown, and other details as you want.

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2Fso1hS5gDX0Iw6VvlWULx%2Fswatch-d-4.png?alt=media\&token=1c71f2ce-d95f-4d9d-8b3c-a7d96b92305c)

{% hint style="danger" %}
Notes: In order to display the product variation image when customers select the attribute then you need to add all the variations’ images to Product gallery.
{% endhint %}

**Step 8:** Finally, click Save changes after you finished all of them. And click Update to save changes to the product.

{% hint style="danger" %}
**Warning**: If you change the attribute name and/or slug you permanently lose the swatches configuration.
{% endhint %}

Moreover, you can override the swatch type for each product variable

1\. **Create a variable product**. Make sure that you select a global attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab. More information about that can be found here:

2\. **Publish** your product.

3\. **Go to** the Swatches tab.

4\. **Select a “Type”** for each of the attributes used for the variations.

* **None.** The options will be offered in a dropdown.
* **Taxonomy Colors and Images.** The options of the global attribute will be offered. (Only available for global attributes.)
* **Custom Colors and Images.** You will be able to add colors and image swatches.
* **Radio Buttons.** The available options will be displayed as radio buttons.

5\. **Choose whether to add a label or not** and where to add it, if you’ve selected “Taxonomy Colors and Images” or “Custom Colors and Images”. This label will display the name of the selected term.

6\. **Select the size of the swatches** if you’ve selected “Custom Colors and Images”. This will determine how large the swatches will be on the product page.

7\. **Configure the attribute terms.** This is similar to how global attribute terms are configured (see above).

* **Select** the term.
* **Choose** Attribute Color or Image.
* If you’ve chosen color, **select a color**.
* If you’ve chosen image, **upload an image**.

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2F2aYmBM1lUoLJUrH87BHV%2Fswatch-d-5.png?alt=media\&token=1f1b4f08-cf95-4d63-919b-22c824b9fd15)

8\. **Update** the product.

## How do I change the size of the image swatches? <a href="#section-6" id="section-6"></a>

You can change the size in **Theme Options > Swatches**

![](https://70082597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWdIrZkRXI0Ovu8yuD8B7%2Fuploads%2FNXYYsp2hB8akFdiU2aLO%2Fswatch-d-6.png?alt=media\&token=e9fda194-9bb1-486e-b50b-985e5fe9675f)

[<br>](https://woocommerce.com/wp-content/uploads/2012/06/Screen-Shot-2014-04-23-at-10.09.36.png)