Add to Cart Widget with WPC Variation Swatches
You should install and activate WPC Variation Swatches for WooCommerce plugin that offers a variety of predefined styles for attributes of variable products, with the ability to use different selector types on a single product page and position tooltips at the best position for a great match with the theme.
To display attributes correctly they should be added in the Products/Attributes tab where you can set the needed type for the attribute.
You can set the Attribute type displaying in the corresponding tab of the Add to Cart widget.
To see the mentioned tab please make sure that in the plugin settings “Button swatch by default” option is enabled.
Please note that when WPC Variation Swatches for WooCommerce plugin is activated settings for Variations and Tooltip tabs are changed in comparison with the default Add to Cart widget.
Style
Variations
Type: Choose between Horizontal and Vertical types for Desktop, Table Portrait and Mobile Portrait modes.
Spacing: Set a spacing between variations and the “”Add to Cart” button.
Item
Space Between: Set a space between items for Desktop, Table Portrait and Mobile Portrait modes.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Type: Choose the desired border type from the dropdown and set it.
Label
Hide: Slide to YES to hide labels.
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired label color.
Width: Set the label width for Desktop, Table Portrait and Mobile Portrait modes.
Gap: Set a gap between label and variations for Desktop, Table Portrait and Mobile Portrait modes.
Reset
Alignment: Choose between left, center and right alignment.
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired reset color.
Hover Color: Set the reset hover color.
Gap: Set a gap between labels and reset for Desktop, Table Portrait and Mobile Portrait modes.
Attribute Type
Settings for Button
Type: Choose between Horizontal and Vertical types for Desktop, Table Portrait and Mobile Portrait modes.
Selected Icon: Slide to YES to enable icon when some attribute is selected.
Space Between: Set a space between buttons for Desktop, Table Portrait and Mobile Portrait modes.
Normal Mode
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired text color.
Background Color: Set the button background color.
Border Color: Set the needed border color.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Text Shadow: Choose desired settings from the dropdown.
Box Shadow: Choose desired settings from the dropdown.
Border Type: Choose the desired border type from the dropdown and set it.
Hover/Active Mode
Color: Set the desired text color.
Selected Icon Color: Set the selected icon color.
Background Color: Set the button background color.
Selected Icon Background Color: Set the selected icon background color.
Border Color: Set the needed border color.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Text Shadow: Choose desired settings from the dropdown.
Box Shadow: Choose desired settings from the dropdown.
Settings for Color
Selected Icon: Slide to YES to enable icon when some attribute is selected.
Size: Set the color button size for Desktop, Table Portrait and Mobile Portrait modes.
Space Between: Set the space between colors for Desktop, Table Portrait and Mobile Portrait modes.
Normal Mode
Background Color: Set the color button background color.
Border Color: Set the needed border color.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Border Type: Choose the desired border type from the dropdown and set it.
Hover/Active Mode
Selected Icon Color: Set the selected icon color.
Background Color: Set the color button background color.
Selected Icon Background Color: Set the selected icon background color.
Border Color: Set the needed border color.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
icon background color.
Border Color: Set the needed border color.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Settings for Image
Selected Icon: Slide to YES to enable icon when some attribute is selected.
Size: Set the image size for Desktop, Table Portrait and Mobile Portrait modes.
Space Between: Set the space between images for Desktop, Table Portrait and Mobile Portrait modes.
Normal Mode
Background Color: Set the image background color.
Border Color: Set the needed border color.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Border Type: Choose the desired border type from the dropdown and set it.
Hover/Active Mode
Selected Icon Color: Set the selected icon color.
Background Color: Set the color button background color.
Selected Icon Background Color: Set the selected icon background color.
Border Color: Set the needed border color.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Settings for Radio
Type: Choose between Horizontal and Vertical types for Desktop, Table Portrait and Mobile Portrait modes.
Selected Icon: Slide to YES to enable icon when some attribute is selected.
Space Between: Set the space between radio buttons for Desktop, Table Portrait and Mobile Portrait modes.
Label Gap: Set the label gap for Desktop, Table Portrait and Mobile Portrait modes.
Normal Mode
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired color.
Background Color: Set the background color.
Border Color: Set the needed border color.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Border Type: Choose the desired border type from the dropdown and set it.
Hover/Active Mode
Color: Set the desired color.
Background Color: Set the needed background color.
Selected Icon Background Color: Set the selected icon background color.
Border Color: Set the needed border color.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Tooltip
Typography: Set a Typography using settings from the dropdown.
Color: Set the desired tooltip color.
Background Color: Set the tooltip background color.
Border Color: Set the needed border color.
Padding: Set paddings for Desktop, Table Portrait and Mobile Portrait modes.
Border Radius: Set a border radius for Desktop, Table Portrait and Mobile Portrait modes.
Box Shadow: Choose desired settings from the dropdown.
Border Type: Choose the desired border type from the dropdown and set it.
Arrow
Color: Set the desired arrow color.
Advanced
Set the Advanced options that are applicable to this widget