WooCommerce Product Variation Swatches

The WooCommerce Product Variation Swatches allows you to configure & display product variations visually. The plugin gives the following swatch types

  • Radio
  • Color
  • Image/Icon
  • Label/Button

You can access the WooCommerce Product Variation Swatches settings from Dashboard → Products → Swatches options after installing & activating the plugin.

woocommerce-variation-swatches

Product Variation Attribute

Attribute for a Product Variation is decided by following fields.
  1. Attribute Name – The field name to identify an attribute. It should be unique.
  2. 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.
  3. 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.
  4. 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)
  5. Border Colour: The border color for each attribute item can be custom decided.
  6. Border Color on Hover: The border color when the mouse hover.
  7. Border Color on selected: The border color when a selection is made.

Swatches Types

The WooCommerce Variation Swatches display variations of products based on the type of attribute.

The swatches types are listed below.

  1. 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.woocommerce-variation-swatches-color-swatches
  2. 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.image-swatches-woocommerce
  3. 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.woocommerce-variation-swatches-radio
  4. 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.woocommerce-checkout-field-editor-radio

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,

  • Image
  • Description
  • Label Name
  • None
WooCommerce-swatches-image-tooltip SWATCHES-TOOLTIP-TEXT woocommerce-variation-description-swatches

Each of the above need to be added to a variation term when they are getting added. Refer Section 3 (b)

Advanced Options

  1. 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. woocommerce-variation-swatches-stock-left
  2. 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
      variation-swatches-for-woocommerce
    • Just blur it out the unavailable variation swatchvariation-swatches-for-woocommerce
    • Hide the unavailable variation swatchwoocommerce-variation-swatches-product-artibutes
  3. Variation Swatches on Shop page Using the plugin, you can display the variation on the Shop page along with the Product Page.

Configure a Custom Swatch Type for an Attribute

  1. Go to Products → Attributes.
  2. Using the Add New Attribute Section, you can add in the new attribute. Fill in desired attribute name
  3. The slug field can either be left empty or can be added as per your preference.
  4. Choose the attribute type from the type drop-down. You can choose any other attribute type (Color/Image/Label/Radio) from the drop-down menu.By default, the value would be Select.
  5. Click on Add Attribute button to add the attribute.
Product-Attribute-Variation-Swatches

After Saving the new Attribute type, you are now ready to configure the terms for attribute.

Configure a term for an attribute

  1. Go to Products → Attributes
  2. You can view the available attributes already created or can create a new attribute [Refer Section 2(a)]
  3. Select Configure term from the newly created attribute to create variations of the attribute.variation-swatches-for-woocommerce
  4. For a term, you have following fields to update/edit:
    1. Name
    2. Slug
    3. Description
    4. Term Image
    5. Tooltip Image
    6. Tooltip Description
  5. Tooltip Image and Term Image can be uploaded by Upload/Add Image button. You can then choose the term images from the media library or drag-n-drop the image to media library from your computer.
  6. Click on Update button after adding in the respective data to save the term.
woocommerce-product-variations plugin

Note:When the attribute type is Color, instead of Term Image it will be Term Color

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.

  • Icon
    • Height
    • Width
    • Roundness

(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.

color and image swatches for variable product attributes

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)

woocommerce product color plugin

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

  1. Attribute Name (Not Editable)Attribute name would be same as the one you saved while creating the attribute
  2. 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.
  3. Override Global SettingsYou have a checkbox that would help you decide if you want to override the Global Settings
  4. Term Tooltip Type (Mandatory)Tooltip type allows you to choose the type of tooltip for the term. The available types are
    • Image
    • Term Name
    • Description
    • None

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 Properties
      1. Icon height: Enter the height value
      2. Icon width: Enter the width value
      3. 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.

Configure a Product Variation

  1. Go to Products → All Products → Add New.woocommerce change variation drop down
  2. Go to Attribute, section click on the Custom Product Attribute drop down. In this drop-down choose the attribute that you have been created earlier that is global attribute. ( For eg: Image).WooCommerce Variation Swatches
  3. Select the attribute and click on Add button.
  4. Click on Select All button to select all variations of the image attribute or Click on Select None button to deselect all variations.WooCommerce Variation Swatches
  5. Click on Save Attributes button after making necessary changes
  6. Navigate to Variations tab. Choose to Create variation from all attributes from the drop down and click on Go button all available variations will be listed. Set the variation image by clicking the image icon and uploading the image from the media library.Product Attribute Variation Swatches
  7. Set variation price and other variation details and Click on Save changes Button after making all necessary changes.Add all required details in each variation.
Product Attribute Variation Swatches

Adding a Local Attribute (used for Variation), can also be done from the Product Page. But this would have Default Woocommerce function, and type of attribute would beSelect.

Note:Adding a Product Variation works as default woocommerce functionality.

Add a new term for an Attribute from Product Page

  1. From Products → Edit Product Attribute Variation Swatches
  2. Go to Attribute, choose the Attribute to which you want to add the new term.
  3. Click on Add New, fill in the Term name and Term Image/Color (based on the attribute type)WooCommerce Variation Swatches
  4. Click on “Save Attributes” button after making necessary changes

To configure the Tooltip Configurations for the term, you will need to navigate to Products → Attributes → Configure Term

Product Attribute Variation Swatches

Choose the newly added Term & Upload the hover image, Hover description etc and Update to Save changes

woocommerce variation swatches

Configure Tooltip Styling

Woocommerce Product Variation Swatches lets you customise Hover Image-Border color & Term name-Background color.

  1. Go to Products → Swatches Options → Global Settings → Tooltip Settingswoocommerce variation swatches
  2. Tooltip Border Color → Choose the color from the Color picker
  3. Tooltip Term Name Background Color → Choose a background for the hover tooltip term name.
  4. Save changes to confirm the change made

Enable minimum stock available label

Minimum stock left label can be displayed with the custom swatch types.

  1. Go to Products → Swatches Options → Global Settings → Other Settingswooswatches woocommerce color or image variation swatches
  2. Enable the check box to get this functionality activated.
  3. Save changes to Update the change made

By default, a min stock value is set to 5. You can decide on when to show min stock left by changing the min. stock value.

Minimum value stocks left alert, add in desired value

Customise the Out of Stock label for Product Variations

When a product is out of stock or variation not available. You can have that displayed with particular styles.

  1. Go to Products → Swatches Options → Global Settings → Other Settings → Behaviour for unavailable variationmultiple images variation woocommerce
  2. From the drop-down, you can pick the required style. Available styles are,
    • Blur with Cross
    • Blur
    • Hide

Enable Product Variation Swatches on Shop Page

You can enable the variation swatches on Shop page,

  1. Go to Products → Swatches Options → Global Settings → Other Settings → Enable CheckboxWooCommerce Variation Swatches
  2. Click on Save

This would display swatches on Shop page.