How to Add and Customize Swatch Design using Variation Swatches Plugin?

Last updated on October 20, 2022

To add a new swatch design or to customize the default swatches,

Navigate to Swatches Options > Swatches Designs.
In the Swatches Designs section, there are some default designs along with the option to add new designs.
To create a new design, click on the Add New Design tab and fill in the related details.
To edit the properties of the default designs, click on the pencil icon of the corresponding design tab.
Also, you can make use of the Search option in the Swatches Designs tab to find a specific swatch design in no time.

To style the common attributes,

Navigate to Swatches Options > Swatches Designs > Add New Design > Common Attribute Styling.
Enter the values in the corresponding fields.

Common Attribute Styling
Design Name	Enter a design name.
Icon Height	Enter the required height for the icon.
Icon Width	Enter the required width for the icon.
Icon Roundness	Set the roundness of the icon.
Icon Border Color	Choose a border color for the icon from the corresponding color picker.

You can pick one of the 6 display styles for displaying the swatches on the product page.

Display Options for Swatches
None	By default, every variation is displayed in a normal drop-down menu.
Swatch Dropdown	With the Swatch Dropdown style, color and image variations can be displayed in a dropdown form. It also has a search option to find any specific variation in the list.
Slider	It displays 3 variations at a time and you can view the rest of them by clicking on the left or right sliding arrows.
Accordion	Expand and collapse to view all the variations.
Horizontal Scroller	Scroll horizontally to view all the variations if the number of variations is high.
Vertical Scroller	Scroll vertically to view all the variations if the number of variations is high.

To style hover and border details,

Navigate to Swatches Options > Swatches Designs > Add New Design > Hover and Border Styling.
Provide the values in the corresponding fields.

Hover and Border Styling
Border Color On Hover	Choose a border color on the icon and hover from the corresponding color picker.
Border Color On Selected	Choose a border color for the selected icon from the corresponding color picker.
Border Width On Hover	Enter the required border width on the icon hover.
Border Width On Selected	Enter the required width for the selected icon.
Selection Hover Style	Choose the selection hover style from the corresponding dropdown.

To style the tooltip details,

Navigate to Swatches Options > Swatches Designs > Add New Design > Tooltip Styling.
Enter the required values in the corresponding fields.

Image Tooltip
Image Border Color	Choose the image border color from the corresponding color picker.
Image Height	Enter the required image height.
Image Width	Enter the required width for the image.
Term Tooltip
Term Name Text Color	Choose the text color for the term name from the corresponding color picker.
Term Name Background Color	Choose a background color for the term name from the corresponding color picker.
Term Name Font Size	Enter the required font size for the term name.
Description Tooltip
Description Text Color	Choose the desired text color for the tooltip description from the corresponding color picker.
Description Background Color	Choose a background color for the description from the color picker.
Description Font Size	Enter the required font size for the description.
Enable Description Shadow	Enable the option to add a description shadow.

To customize the swatch type,

Navigate to Swatches Options > Swatches Designs > Add New Design > Swatch Type Specific Styling.
Enter the required values in the corresponding fields.

Label Swatches
Label Font Size	Enter the required font size for the label.
Label Background Color	Choose a background color for the label from the corresponding color picker.
Label Text Color	Choose the desired text color for the label from the corresponding color picker.
Radio Swatches
Radio Inner Color on Hover	For radio swatches, choose the inner color on hover from the corresponding color picker.
Radio Outer Color	For radio swatches, choose the outer color from the color picker.
Radio Inner Color on Selected	Choose the radio inner color for the selected swatches.
Radio Outer Color on Selected	Choose the radio outer color for the selected swatches.
Choose Radio Style	Choose the desired radio style from the provided styles.
Select Swatches
Enable Select2 Style for Select Box	When the option is enabled, the default select options changes to Select2.
Color/Image Swatches
Enable Swatch Dropdown	Enable the option to display the color/image swatches as dropdown.

To customize swatches display,

Navigate to Swatches Options > Swatches Designs > Add New Design > Additional Display Styling.
Enter the required details in the corresponding fields.

Featured Swatches Styling
Featured Icon Height	Enter the required height for the featured icon.
Featured Icon Width	Enter the required width for the featured icon.
Featured Font Size	Provide the required font size.
Additional Info Swatches Styling
Additional Icon Height	Enter the icon height on additional information.
Additional Icon Width	Enter the icon width on additional information.
Shop Swatches Styling
Shop Icon Height	Enter the required height for the icon on the shop page.
Shop Icon Width	Enter the required width for the icon on the shop page.
Shop Font Size	Enter the required font size.

To style the attribute description,

Navigate to Swatches Options > Swatches Designs > Add New Design > Attribute Description.
Provide the required values in the corresponding fields.

Attribute Description Styling
Font Size	Enter the required font size.
Font Color	Choose the desired font color from the corresponding color picker.