Product Card Swatches

Product Card Swatches displays variation options — like colors or sizes — on product cards so customers can switch between them without opening the product page.

Turn on Product Card Swatches

1. Go to Milano Dashboard → Modules.
2. Find Product Card Swatches and turn the toggle on.

How it works

When enabled, product cards in the shop loop show swatches for the primary attribute (for example, Color). Hovering or clicking a swatch updates the product image on the card to show that variation.

The module works with:

• WCBoost Variation Swatches — The swatches you define per attribute appear on product cards.
• Variation images — If you upload images to individual variations, those images show as swatches on the card.

Configure

1. Go to Milano Dashboard → Settings.
2. Under Product Card Swatches, choose:
   • Attribute to use — Select which attribute drives the card swatches (for example, Color).
   • Swatch style — Circle or square.
   • Image source — Use the variation image or the swatch color/image from WCBoost Variation Swatches.
3. Click Save Changes.

Requirements

• WooCommerce must be installed and active.
• Variable products must have at least one attribute with defined variations.