---
title: Variation Swatches Settings
description: "Using variation swatches module, you can add attributes to your WooCommerce product. For example, a product is available in different colors, labels or sizes. You can add this variation by using the ShopEngine variation swatch module.  ### ** Enable variation swatches…"
url: "https://themewinter.com/docs/themes/theme-docs/bascart/variation-swatches-settings/"
updated: "2022-02-22"
category: BasCart
---

# Variation Swatches Settings

Using variation swatches module, you can add attributes to your WooCommerce product. For example, a product is available in different colors, labels or sizes. You can add this variation by using the ShopEngine variation swatch module. 

### ** Enable variation swatches module**

First of all, navigate to Dashboard> ShopEngine> Modules> Enable the swatches module and click on save changes.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_1-1024x469.png)

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_2-1024x463.png)

## Swatch variation in single product page

### **Add attributes**

Navigate to Dashboard> Products> Attributes. Then insert the necessary information for adding attributes like Names, Types etc. Finally click on add attributes button.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_3-1024x482.png)

After that, you need to configure the attribute terms. So, click on configure terms.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_4-1024x476.png)

Now, insert the necessary information for adding attributes terms.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_5-1024x491.png)

### **Add attributes for a product**

For adding attributes to a product, navigate to Dashboard> Products> Select a product in which you want to adding the attribute and click on edit.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_6-1024x401.png)

For applying the product attribute, you need to choose the variable product.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_7-1024x493.png)

Now, click on attributes and select custom product attribute. Then press the add button.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_8-1-1024x479.png)

Here you need to insert the information for attributes ad save attributes.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_9-1024x430.png)

### **Adding Variations**

Now, click on variations and insert necessary information for the variation of the product.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_10-1024x497.png)

Finally, click on save changes update buttons for saving all updated information.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_11-1024x486.png)

This is the final look for the variation swatches of a variable product.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2021/11/bascart_swatches_12-1024x447.png)

For more information, kindly click on the buttons here

    [Click here](https://wpmet.com/doc/variation-swatches/?__cf_chl_managed_tk__=J8F0neSPOdMe19bfIcf8KZH_XYhIcQlygGLzSKjCr.o-1636346966-0-gaNycGzNDCU)

## Swatch variation in widgets

You can show the color vatiation in Elementor widgets. You need to set the attribute and variation as shown in the "[Swatch variation in single product page](https://themewinter.com/docs/themes/docs/variation-swatches-settings/#1-toc-title)".

**NOTE:** For showing the color variation in widget, the attribute name and slug will the **"color"**. Otherwise, it will not work.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/02/bascart_swatch_color_widget-1024x461.png)

You need to set variable products with colors and different images for each variation.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/02/bascart_color_variation_image-1024x459.png)

Then edit the Elementor widget where you want to show the swatch and you will find the option to enable the swatch variation.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/02/bascart_color_variation_widget-1024x506.png)

After enabling the swatch option from the setting, you can also style the swatch option from the style tab.

![](https://themewinter.com/docs/themes/wp-content/uploads/sites/2/2022/02/bascart_color_variation_widget_style-1024x430.png)