WooCommerce variable products use attributes and terms to define selectable options. Variation Swatches for WooCommerce Pro displays those configured choices as color, picture, label, or button swatches instead of standard select fields. Set up the attribute type and its terms first, then select how the swatches appear on product pages. Swatches are also supported in Quick View, with responsive layouts for mobile devices.

Show options in product listings

Pro includes swatches to archive, catalog, shop, category, and tag pages. Choose which attributes to show and set a catalog show limit. A more link can show two or three attributes while keeping the remaining choices hidden until a shopper opens the link.

Archive and shop pages have three display modes:

• Default: show swatches inline beneath each product.
• On hover: reveal swatches from the bottom of a product listing when a shopper hovers over it.
• Modal: keep the Select options button and open the swatches in a popup when clicked.

Pro also supports dual-color swatches and a dual-color Add to cart display on category and archive pages.

Group choices and set their appearance

Attribute terms can be organized into named groups instead of one long row. Assign groups globally from attribute terms or override them for an individual product. Renaming a group does not break its assigned terms.

Choose rounded or squared swatches and adjust product-page swatch size. Styling controls include colors, backgrounds, borders, font color and size, and border size. For out-of-stock options, choose a cross sign, blur, or hidden display.

Tooltips and product-specific options

Tooltips are available on product and product category pages, with controls for their appearance and size. Pro supports image variation tooltips on archive and shop pages, along with custom image or text tooltips. Text tooltip descriptions can be set for a product or attribute.

Custom attributes support products with different variation setups. Per-product overrides let you adjust presentation for an individual entry. The extension is described as compatible with popular WooCommerce themes and extensions; some themes may need CSS adjustments.

Configure and display swatches

Install and activate the plugin in WordPress, then choose a swatch type for each relevant variation attribute. Set the colors, images, labels, or buttons for its terms, followed by shape, size, and tooltip settings as needed. After product-page settings are in place, configure archive and shop display modes if you want swatches in catalog listings.