HOW VARIATION SWATCHES WORK ON SMART BUNDLES
HOW TO USE THE WPC VARIATION SWATCHES PLUGIN
Step 1: Create a new custom attribute or edit the default attributes on your site:
Open the Plugins section, find the WPC Variations Swatches plugin or download it from this page for FREE.
There are two kinds of creating/editing attributes for your products:
-
Default attributes: Navigate to Products >> Attributes >> add a new attribute, configure a name & slug for the new attribute or use the existing attributes there. Default attributes can be used for multiple products.
-
Custom attributes: Attributes created specially for individual products under Product Data >> Attributes tab. Custom attributes are attached to the specified products only.
Step 2: Choose a swatch type
There are 5 different swatch types when you click on the Type options:
-
Select (default drop-down for all unspecified attributes)
-
Radio
-
Image
-
Button
-
Color
Step 3: Check the swatch type of existing attributes.
3.1 – Default Attributes
It’s only possible to specify a swatch type for the default attributes. Click on Edit to choose a type for each attribute under Products >> Attributes. Skip this if you have already configured the type for each attribute when you created them as in Step 2.
Except for the Color & Size attributes default by WooCommerce, users need to specify type for each attribute under Products >> Attributes.
3.2 – Custom Attributes
Custom attribures will apply the default Select (drop-down) type.
If you would like to set the Button type as default for all new custom attributes on your site, go to WPClever >> Variation Swatches, then choose “Yes” for the below option:
Step 5: Configure the thumbnails for the terms
There are cases when the color variations on your site are not properly displayed, only an empty button in the front-end. That is because you haven’t configured the values for each variation (terms) when the Color type is chosen for the swatches.
You can click on the Configure the terms button, then choose to Edit each term and set the values for them.
Images Swatches – Tooltips
Similarly, when choosing the Image type for the swatches, users need to add a different image for each term to show as the thumbnail for the buttons in the frontend.
Users can choose to use the Tippy.js for the tooltips to show a more straightforward preview of variation with image, description & attribute terms in a bigger size. The description shown in the tooltip is the description of that attribute under Products >> Attributes.
The short description of variation added from the Variations tab will be shown after customers make all the choices in the frontend.
Since version 3.2.0, there has been a new layout added to this plugin – STACKED. Users can also choose to change the URL or name/description of the product upon choosing variations or not.
