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.