---
title: Colours on product cards
summary: Show the colours a product comes in as swatches on its card, and let shoppers choose one there.
url: https://lanternwp.com/docs/colour-swatches
updated: 2026-10-08
---

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