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.
Below is a simple example of how each option looks (in order – label, colour and then image).
How do I set this up?
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.
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 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.
All you need to do now is add the attributes to the product and it will show on the product page.
Go to BodyCommerce > Variation Swatches to see the settings page.
- First choose the appearance of the variation - do you want them to be square or circle.
- Next style each of the varaition types using our settings - change the width, height and colour if applicable.
- 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 he in stock or out of stock.
- "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
- 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.