Variation swatches

Variation swatches 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

Single product

Catalog

Out of stock only works on some products?

By default, if a Variable product has fewer than 30 variations, the dropdowns for selecting variations on the frontend will be dynamic. For example, with a T-shirt that has “Size” and “Color” attributes, after the customer selects a Size, the Color dropdown will be updated via AJAX to only display options that are available with the chosen Size ...
Read more: Change Limit on Number of Variations for Dynamic Variable Product Dropdowns / Swatches

Requirements

• 3.14 or greater