Colours on product cards

With LanternWP Companion, a product card can show the colours the product comes in, as small swatches beside its rating. When the colours are the product's variations, choosing a swatch on the card previews that variation's photo and price, and the card's links open the product with that colour chosen.

Turn on colour swatches in WooCommerce

The swatches use WooCommerce's colour swatches for attributes, which WooCommerce 11.1 still lists as an experimental feature.

1. Go to WooCommerce → Settings → Advanced → Features and turn on Color swatches for attributes, then save.
2. Go to Products → Attributes and edit your colour attribute, or add one. Set its Type to Color / image and save.
3. Select Configure terms for the attribute and give each colour its colour or image.

On the cards

A product shows swatches when it has at least two colours of such an attribute. Companion places its Product Swatches block on product cards for you; move or remove it in the Site Editor like any block.

When your store hides out-of-stock products, a colour in which no variation is available is left out.