Skip to content

Product variations and swatches

Milano gives you multiple ways to present product variations — from the default WooCommerce dropdown to visual swatches.

WooCommerce variable products show each attribute as a <select> dropdown. Milano expands “Any” attribute values into concrete combinations so customers see every available option.

Pre-selection works automatically when you set default attributes in WooCommerce. The matching variation loads its image, price, and stock status without a page reload.

The Variation Compare module adds a modal to single product pages. It lets shoppers browse variation images by a primary attribute (for example, Color).

How it works:

  • Image swatches appear in the modal.
  • Clicking a swatch updates the main product image.
  • Customers can browse through variations without closing the modal.

When the WCBoost Variation Swatches plugin is active, Milano integrates with it automatically. No extra configuration is needed.

The integration:

  • Registers the swatches feature in the theme.
  • Maps term meta so swatches render on both product cards and single product pages.

For detailed setup instructions — including how to configure swatch types (color, image, label), assign them to attributes, and troubleshoot common issues — refer to the WCBoost Variation Swatches documentation.