Variation swatches

Version 3.14 comes with built-in variation swatches, the feature can be enabled in section  Advanced → WooCommerce

Preview

UX Swatches

Default WooCommerce (Type: Select)

Getting started

Creating a swatch attribute (swatch types)

While adding or editing an attribute in WooCommerce's attribute section Products → Attributes a "UX type" can be set for each attribute individual (UX Color, UX Image, UX Label). Other options for this specific attribute such as their size, shape, ... can also be set individually here.

'Use variation images?' By enabling this option the swatches will attempt to show a variation image that is coupled to it (as assigned in the single product attribute WooCommerce options). If no variation image is found or set, the swatch will fall back to its normal value.

Create or edit swatch attribute terms (swatch values)

After creating or editing attributes, each attribute will display its type respectively in the Type column. Its time to go ahead and Configure terms

In the add or edit term screen, a specific value (or values) can be chosen respectively for its type (In this case on the picture preview UX Color).
Straightforwardly UX Color allows setting a color (or colors). UX Image an image and UX Label label text.

In the terms screen, the value you have set for a specific swatch will be shown in the preview.

Swatches in action

Requirements

  • 3.14 or greater