How to Configure the Display Style of an Attribute Swatch
You configure display style for the Attribute on your product page. Themehigh WooCommerce Product Variation Swatches gives you 2 way of styling, Global Setting or from Swatch Properties. Global Settings (Default) for styling will be applied to all Product Variation Swatches if you haven’t overridden the style of any particular Variation Swatch from the Swatches Properties.
Configure from Global Settings (Default Style Settings)
Go to Products → Swatches Options → Global Settings → Attribute Settings.
- Attribute Settings
You can configure the default style for Swatches from this section.
(Unit Values accepted in px, em, % etc, if no unit mentioned would take px as default)
- Icon Border Color
- Icon Border Color On Hover
- Icon Border Color on Selection
Choose the color for all 3 status to define unique look to distinguish the user actions.
Other 2 sections that fall under Global Settings are,
- Tooltip Settings
- Other Settings
Refer Section 2(f) & 2(g)(h)(i) respectively to know more on these sections
Configure display style from Swatches Properties (Override Global Settings)
Go to Products → Swatches Options → Individual Attribute Settings(tab).
You can view the list of attributes already available in your woocommerce product website. Navigate to action column for the edit icon. On the edit screen for an attribute you can view/configure Swatches Properties/General Settings.
- Attribute Name (Not Editable): Attribute name would be same as the one you saved while creating the attribute.
- Attribute Type (Not Editable): Attribute type would be the same as the one you save while creating the attribute. Attribute type can have Color, Image, Label and Radio as value.
- Override Global Settings: You have a checkbox that would help you decide if you want to override the Global Settings
- Term Tooltip Type (Mandatory): Tooltip type allows you to choose the type of tooltip for the term. The available types are:
- Term Name
NOTE: If no data chosen for tooltip type, it would be None by Default.Based on the tooltip type chosen, the corresponding data should be added while a term is getting configured. Else, no data would be displayed on hover even when you choose a tooltip type.
- Icon height: Enter the height value
- Icon width: Enter the width value
- Icon roundness: Enter the value required border-radius.
NOTE: The icon properties will support px, em, % etc as units. If no unit is entered, it would use px.
- Default Border colour: Define the color for the Icon border.
- Border Color on Hover: Define the border color when the mouse is hovering over the icon.
- Border Color on selected: Define the border color when an item is selected.