Variation Swatches for WooCommerce Premium replaces standard variation dropdowns with interactive choices for variable products. Customers can see colors, sizes, styles, and other options as they browse, with each attribute using a display suited to its values.

Choose a swatch for each attribute

Use color, picture, button or label, and radio-style swatches. A product can show colors as swatches and sizes as buttons. When a variation has a featured image, the plugin can use it for the image swatch. Color-name matching can suggest a shade when lookup is enabled in options, and you can adjust the result. Text tooltips can show a name or description on hover; Premium image tooltips preview a variation. The selected variation name can appear beside its attribute label, such as Color: Ocean Blue.

Style product pages and catalog listings

Set swatch size and round or square shapes across the store, then override the shape for individual products. Premium also includes per-product color and image overrides, border and tooltip color styling, and a larger swatch size for a highlighted attribute. If a swatch does not fit an attribute, switch it back to a standard WooCommerce dropdown without losing its terms or values.

On shop, category, and archive pages, select whether product cards show all attributes or one selected attribute, then adjust swatch size and alignment. Set an attribute display limit with a MORE link, and show image tooltips so customers can preview variations from the catalog. Premium filter widgets display attribute choices as swatches. Quick View swatches are available when the theme or Quick View implementation works with the WooCommerce variation form.

Handle custom attributes and availability

Premium supports swatches for attributes created directly on an individual product, including options that are not shared across the catalog. Other controls include category and group swatches, dual- or multi-color swatches, gallery changes when an attribute is selected, direct variation links, and remaining stock display.

Unavailable variations can be crossed out, blurred, or hidden. Premium removes the free version’s 30-variation limit and the requirement to enable WooCommerce’s setting for hiding out-of-stock items from the catalog.

Store setup and compatibility

The extension supports WordPress Multisite, WPML, right-to-left languages, and WooCommerce High-Performance Order Storage. It also supports Gutenberg blocks and exposes color and image swatch data through the WooCommerce REST API. The plugin is tested with Elementor, Printful, AliDropship, and Dokan. Theme or Quick View behavior can vary, so some layouts may need adjustment.

Configure 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.