Product Variation Swatches for WooCommerce

Product Variation Swatches for WooCommerce replaces the standard WooCommerce variation dropdowns with beautifully designed color, image, and label swatches, offering a more intuitive and engaging experience for your customers.

By transforming the boring dropdown into interactive visual swatches, this plugin helps shoppers quickly identify their desired product variations, ultimately reducing friction, enhancing store aesthetics, and boosting conversions.

Whether you’re selling apparel, electronics, cosmetics, or custom products, visual variation swatches give your store a modern edge and allow customers to make faster, more confident buying decisions.

View Demo & Upgrade to Pro for Product Variation Swatches for WooCommerce

💻 Demo | 🚀 Get The PRO Version | 🛠 Support | 📄 Documentation

✨ Key Features

Free Version

• Replace variation dropdowns with clickable color/image/label swatches
• Supports color, image, and text/label swatch types
• Add unlimited terms under each product attribute
• Choose among round, square, or rounded corner swatch styles
• Customize swatch width and height
• Enable/disable plugin’s default stylesheets
• Configure tooltip options (font size, text color, background color)
• Toggle visibility of tooltips for each attribute
• Apply custom border styles for swatches
• Set the border width to control thickness.
• Choose a border type: Solid, Dashed, Dotted, or Double.
• Pick a border color to match your style
• Disable, cross out, or blur unavailable variation options.
• Set the position where you want to show the variation label.

PRO Version

• Swatches on archive/shop pages globally or per product
• Show or hide variation labels on shop/catalog pages
• Show or hide attribute names on single product pages, and shop/catalog pages
• Choose swatch label position: inline, stacked (left), or stacked (center)
• Catalog swatches position: after product title and price
• Tooltip image previews and hover effects
• Premium support and frequent updates

Coming Soon

• Limit Attribute number in shop/catalog pages
• Swatches in quick view and popups
• Accessibility enhancements
• Support for popular page builders (Elementor, Divi)

Benefits

• Deliver a visually appealing shopping experience
• Help customers make faster, more confident decisions
• Reduce cart abandonment caused by confusing dropdowns
• Manage variation styles easily without coding
• Increase conversions and build customer trust

How It Works

1. Go to Products > Attributes and create a new attribute
2. Choose swatch type: Color, Image, or Label
3. Add terms with color codes, images, or text labels
4. Assign attributes to a variable product and create variations
5. Save the product and view swatches on the product page

Read the full description on the official page →