Variation Swatches for WooCommerce Premium presents variable-product choices as interactive swatches instead of standard dropdowns. Customers can select colors, sizes, styles, and other options on product pages, with the show tailored to each attribute.

Choose a display for each attribute

Use color, image, button or label, and radio-style swatches. For example, a product can show color choices as swatches and sizes as buttons. If a dropdown suits an attribute better, switch it back without losing its terms or values.

When a variation has a featured image, the plugin can use it for the image swatch. Color-name matching can suggest a shade after you enable the lookup in settings, and you can refine the result afterward. Text tooltips can show a name or description on hover. Premium image tooltips preview a variation when clients hover over a swatch.

The selected variation name can appear beside its attribute label, such as Color: Ocean Blue, to identify the current choice. Premium also includes controls for swatch borders and tooltip colors, along with options such as dual or multi-color swatches.

Set product and catalog layouts

Adjust swatch size on product pages and choose round or square shapes across the shop. Premium lets you override the shape for an individual product and includes further product-level display controls, such as highlighting an attribute with a larger swatch.

On shop, category, and archive pages, display swatches on product cards so customers can inspect or select options while browsing. Choose whether to show all attributes or one selected attribute, then adjust swatch size and alignment. Premium image tooltips can also show variation previews on archive pages. Filter widgets can present attribute choices as swatches, and archive controls include an attribute display limit and a “MORE” link.

The plugin works with Quick View swatches when the theme or Quick View implementation loads a compatible WooCommerce variation form. Premium also includes direct variation links, gallery changes when an attribute is selected, and remaining-stock displays.

Handle custom attributes and unavailable options

Premium supports swatches for custom attributes added directly to an individual product, including one-off choices that are not shared across the catalog. Global attributes can also use swatches.

For out-of-stock variations, choose to cross out, blur, or hide unavailable swatches. Premium removes the free version’s 30-variation limit and the requirement to enable WooCommerce’s catalog setting for hiding out-of-stock items.

Set up swatches

1. Install and activate the plugin.
2. Go to Products > Attributes and choose an attribute type, such as Color, Image, Button/Label, or Radio.
3. Edit the attribute terms and assign the relevant color, image, or label.
4. Save the settings, then review the swatches on product pages and catalog layouts.