Variation Swatches

A variable product is a product that has more than one option in attributes, for example, color, size, and material. Instruction on how to create an attribute is here as soon as the necessary attributes are available, a variable product can be created, instructions on how to create a variable product is here

By default, variable product attributes are presented as a dropdown in WooCommerce. Elessi theme suggests the option to present the attributes as swatches. Swatches are available in label, color, or image format. Swatches can be configured for global attributes only.

To set a Color Swatch type or an Image Swatch type of product, your product must be a Variable Product and has corresponding attributes. If those attributes have not been created yet, please follow these steps to know how to add a new attribute.

First - Be sure that your site has enabled these options: (From Theme Options → Variation Swatches)

1. Colors Attributes

Swatches in the color format:

Step 1 - Go to Products → Attributes. In the Add new attribute area, fill in the form to create a new color attribute:

Swatches are enabled

To add a new color, fill in the form Add new Color name of the color, then select its shown color from Color Chooser as below. Finally, remember to click Add new Color button: Select a product you want and edit it. Then go to its Product Data and change it to Variable Product.

Step 2 - Go to Attributes and add color and size attributes to the product with these settings. You will then get a result that like this:

2.1

2.2

Step 3 - Go to Variations and add variation. Set a regular price each variation.

2. Image Swatches

Swatches as an image from product variations:

DEMO 1

DEMO 2

Step 1 - Go to Products → Attributes → Color then change the swatch type into Custom Image.

Swatches are enabled

Swatches are enabled: go to Attribute → Configure Items → Edit → Upload/Add image. Then, you must provide an image for each Variation.

Step 2 - Save all the changed settings, update your product and to do its Product page to check your product. Remember to choose the size first then choose the type color (image).

Step 3 - Set a regular price and fill your price in each Variation. Also, change its feature image for each color.

3. Label Swatches

Swatches as a Label (Size) from product variations:

Step 1 - Go to Products → Attributes → Size then change the swatch type into Custom Label.

Step 2 - Save all the changed settings, update your product, and do its Product page to check your product.

Step 3 - Set a regular price and fill your price in each Variation.

Guide Clip