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

# Product swatches

With LanternWP Companion, a product card can show the colors the product comes in, as small swatches beside its rating. When the colors 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 color chosen.

## Turn on color swatches in WooCommerce

The swatches use WooCommerce's color 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 color attribute, or add one. Set its **Type** to **Color / image** and save.
3. Select **Configure terms** for the attribute and give each color its color or image.

## On the cards

A product shows swatches when it has at least two colors of such an attribute. Companion places its **Product Swatches** block on product cards for you; it stands in the **Product Catalog** template (**Appearance → Editor → Templates**).

While a step above is missing, cards show no swatches, and the **Product swatches** row in **Appearance → LanternWP → Features** says which: "WooCommerce’s color swatches are off", "no product attribute has the Color / image type" or "no term of … has a color or an image", each with a link to where you set it.

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

## Turn it off

1. Go to **Appearance → LanternWP → Features**.
2. In the **Product swatches** row, turn the switch off and select **Save**.

Turned off, the swatches shows nowhere: Companion places its **Product Swatches** block in no template, including templates you add later, and a **Product Swatches** block already saved in a template or a page shows nothing in the store. In the Site Editor such a block says "Product swatches is off." with a link to turn it on. Turn the switch on again to bring it back where it was.

## Remove it from one template

To keep it on but leave it out of one template, select the **Product Swatches** block in that template in the Site Editor, open **Options** in its toolbar, choose **Delete** and select **Save**. The **Product swatches** row in **Features** then says **Removed from templates** with the template's name. To bring it back there, select **Restore in templates** in that row, then **Restore in templates** again to confirm: Companion puts the block back in those templates and keeps your other changes to them.