Variation Swatches

Divi BodyCommerce allows you to change the appearance of the variation select option from the default select box to either a label (button), colour or image option. Remember to update or publish your work as you go. Follow the images below.

1.) Sample.

Below is a simple example of how each option looks.

How do I set this up?

2.) Create Or Edit Attribute.

First, you need to go over to Products > Attributes and create a new or edit an existing attribute. Under the settings, there will be an option to select the type of variation. As you can see below I have created three attributes: Color, Material and Size with the types being colour, image and label respectively.

3.) Create Option.

Next, you want to create each option in each attribute. To do this click on “Configure terms” on the right-hand side of each attribute (see image above).


Name: This will be the label/button text on the frontend (so I have just made it “L” instead of “large”).

Color & Image

Both of these types are the same in terms of settings.

Name: This is the name of the attribute type (won’t be shown on the frontend unless the image is missing, it will default to this as text)

At the bottom, you will see an input box to enter in the colour code or the image URL. Inter in the HEX or RGB code for the colour attribute – save and you will see the colour appear there as a preview – you are good to go. It is very similar for the image attribute, you upload the image to the media library and then copy the URL, paste this URL in the box labelled “image”, save and you will see a preview of the image – you are all good here now.

4.) Add The Attributes.

All you need to do now is add the attributes to the product and it will show on the product page.

More Settings

Go to BodyCommerce > Variation Swatches to see the settings page.

  1. First, choose the appearance of the variation  - do you want them to be square or circle.
  2. Next style each of the variations types using our settings - change the width, height and colour if applicable.
  3. If you are using the label variation swatch you can enable the settings called "Out Of Stock Strike Through?" - this will add a strike through the label. DO NOT ENABLE THIS if you are using the select dropdown as this will change all the text to be in stock or out of stock.
  4. "Enable active swatch name" - If you want to have the text of the selected option appear after the label, enable this. For example, if you have the label 'Colour', it will be 'Colour Blue' when you select the blue option. - Used on the colour variation ONLY
  5. If you have the above enabled, you can add some text that goes in between, for example, you could have the text 'chosen is:' and it will say 'Colour chosen is: Blue' for example.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us