4 SWATCH TYPES
Using the Variation Swatches For WooCommerce plugin, you can create swatches of four types.
They are:
-
Color
-
Image
-
Button/Label
- Radio
For that,
-
Navigate to Products → Attributes.
-
From the Add New Attribute section, you can create attributes.
-
Provide the desired attribute name in the Name textbox.
-
The Slug field can either be left empty or can be added as per your preference.
-
Choose the attribute type from the Type drop-down and decide how the attribute’s value should be displayed.
-
Choose the required design from the Design Types dropdown.
-
Click on the Add Attribute button.
The attribute will be created with the provided attribute name and chosen attribute type. Once the attribute is created, click on the configure terms to add the related terms for the attribute.
DISPLAY BEHAVIOR OF UNAVAILABLE AND OUT-OF-STOCK VARIANTS
You can choose the display of unavailable and out of stock from the Global Settings of the plugin. Once the product is changed to out of stock, navigate to Global Settings.
From the Behaviour for Out of Stock Variation dropdown, choose the type that you want to display for the out of stock variation. The three types are:
-
Hide(Default)
-
Blur
-
Blur With Cross
Choose the one which is suitable for your store. Similarly, you can choose any of them for the Unavailable variation from the Behavior for Unavailable Variation dropdown.
TOOLTIPS FOR VARIATION SWATCHES
Under Swatches Design, choose your desired design and then select the Tooltip Styling option.
-
Enable the Tooltip option.
-
Pick a suitable Text Color for the Term Name from the color picker provided.
-
Pick a suitable Background Color for the Term Name from the color picker.
-
Click on the Save button.
Once all the changes have been made, go to the Product Page and hover over the variants to see the tooltip that has been generated.
DISPLAY SELECTED VARIATION NAME
To show the selected variation name, navigate to Swatches Options > Global Settings.
From the Global Settings, enable the Show Selected Variation Name Beside Attribute Label option.
Save the changes made.
CUSTOMIZE SWATCHES
To customize the swatch design,
-
Navigate to Swatches Designs and choose a design from the options.
-
In the Common Attribute Styling tab, you can edit the Design Name, Icon Height, Icon Width. And also choose the Icon Shape from the dropdown.
-
Using the color picker in the Hover And Border Styling tab, you can change the Border color on hover and the Border color on selected.
-
From the Tooltip Styling tab, you can configure the tooltip to be displayed on variants.
-
Swatch Type Specific Styling tab helps to customize the Label Swatches. You can edit the Icon Height, Icon Width, Font Size, Background Color, and Text Color of the label swatches.
-
Once the changes are done click on the Save button.
Go to the Product Page, hover over the variations to see the Border color on hover and the tooltip. Select any variation to see the Border color on selected.
Comments
0 comments
Please sign in to leave a comment.