WooCommerce Product Variation Swatches
The WooCommerce Product Variation Swatches allows you to configure & display product variations visually. The plugin gives the following swatch types
You can access the WooCommerce Product Variation Swatches settings from Dashboard → Products → Swatches options
after installing & activating the plugin.
Product Variation Attribute
Attribute for a Product Variation is decided by following fields.
- Attribute Name - The field name to identify an attribute. It should be unique.
- Attribute Type - By default for Woocommerce the available type is SELECT. Using Woocommerce Product Variation Swatches, you can choose the different type of attributes. Available types are Color, Image, Label and Radio.
- Term Tooltip Type - Tooltip type allows you to choose the type of tooltip for a term. The available types are Image, Term Name, Description and None.
- Icon Properties - The display icon for each attribute can be styled. You can decide on
- Icon height
- Icon width
- Icon roundness (If you need a round or soft curved square icon)
- Border Colour - The border color for each attribute item can be custom decided.
- Border Color on Hover - The border color when the mouse hover.
- Border Color on selected - The border color when a selection is made.
The WooCommerce Variation Swatches display variations of products based on the type of attribute.
The swatches types are listed below.
- Color swatches for product variation attributes:
Color swatches would give you the color picker to decide a color (Red, Blue, Green etc) for the terms.
On the website front-end it would be displayed as a color palette for each variations.
- Image/Icon swatches for product variation attributes:
Image swatch would give you the image upload option, where you can upload a product variation image or icon.
On the website front-end, the uploaded image/icon will be displayed as swatch for the product variation.
- Label/Button swatches for product variation attributes:
Label swatch would give you the Label name to be used as a swatch. Giving a background color (styling) will also let you display the label as a button.
- Radio Swatches for product variation attributes:
Radio swatch would give you the radio button style for the variation. You can give Label name for Radio button.
Tooltips for Product Variation Swatches
Using the WooCommerce Variation Swatches, you can now set Hover element for each WooCommerce product variations.
The hover style can have any of the below type,
- Label Name
Each of the above need to be added to a variation term when they are getting added. Refer Section 3 (b)
- Stock Left Label: If you wish to alter your customer on minimum stock of any of your product is left. You can use this feature to set the Stock left label along with the count that is left. Stock Left label works for single level product variation as well as multi-level product variations.
- Out-of-stock information display style: You can choose on how to display when a product variation is not available. Using the plugin you can decide to have,
- Blur the variation swatch along with a red cross
- Just blur it out the unavailable variation swatch
- Hide the unavailable variation swatch
- Variation Swatches on Shop page: Using the plugin, you can display the variation on the Shop page along with the Product Page.