WooCommerce Variation Swatches Pro

WooCommerce Variation Swatches Pro transforms the default WooCommerce variation dropdown menus into visual swatch selectors. Instead of text-only dropdown lists for attributes like color, size, and material, customers interact with visual elements that make product selection more intuitive and engaging.

Swatch Types

The plugin supports multiple swatch presentation styles, each suited to different attribute types. You can mix swatch types within a single product to match the nature of each attribute — colors shown as colored circles, sizes as text labels, and patterns as image thumbnails.

Visual Options

• Color swatches — display attributes as colored circles or squares matching the actual product color
• Image swatches — show product images or pattern thumbnails as selectable options
• Label swatches — present text labels as clickable buttons with customizable styling
• Radio buttons — offer radio-style selectors as an alternative to dropdowns

Product Page Integration

Swatches replace dropdowns on individual product pages and can also appear on shop/category pages for quick attribute selection without visiting the product detail page. This enables add-to-cart actions directly from product listing pages.

Styling & Customization

Configure swatch size, shape (circle, square, rounded), border styles, selected state appearance, and out-of-stock display behavior. Disabled or unavailable variations can be shown as crossed out, dimmed, or hidden based on your preference.

Tooltip Support

Add hover tooltips to swatches showing attribute names, enlarged images, or custom text. Tooltips provide additional context for small swatches, helping customers make informed selections without additional clicks.