WooCommerce Product Variations Swatches – Customize Attribute Display with Style

WooCommerce Product Variations Swatches is a robust and flexible plugin that transforms the standard WooCommerce variation dropdowns into visually engaging swatches. By offering multiple display types, styling options, and responsive customization features, this plugin gives store owners full control over how product variations—like size, color, image, or type—are shown on both product pages and product lists.

Designed to improve user experience and encourage faster purchasing decisions, this plugin enhances how your customers view, interact with, and choose variations, making the selection process more intuitive and visually appealing.

🌟 Overview

Gone are the days of bland dropdowns. With WooCommerce Product Variations Swatches, you can present your variation attributes as buttons, colors, images, radios, or even variation thumbnails, styled precisely to match your brand. The plugin allows global or custom attribute settings, tooltip customization, product image swapping, swatch profiles, and full control over where and how swatches appear across your store.

This visual upgrade not only improves aesthetics but also boosts usability and conversions by making it easier for customers to explore variations and complete purchases.

🖼️ Display Variation Attributes Your Way

Display Types Supported:

• Button

• Color

• Image

• Variation Image

• Radio

• Select (standard dropdown)

Display Styles:

• Horizontal layout

• Vertical layout

Swatches on Product Pages and Product Lists:
Choose where to show swatches:

• Single product pages

• Shop/category pages

• Product lists

• Widgets

Tooltip Support:
Add tooltips with customizable color, border, font size, and position to help customers identify swatches easily.

🧩 Global & Custom Attribute Management

Global Attribute Customization:
Manage and customize all WooCommerce global attributes directly through the plugin settings:

• Search for global attributes

• Choose display type and style

• Assign swatch profiles

• Decide to show/hide swatches on product lists

• Edit attribute terms with color or image

• Enable product image change when selecting attributes

Custom Attribute Rules:
Set up display rules for non-global (custom) attributes based on:

• Attribute Name

• Product Category

Assign settings such as:

• Display Type & Style

• Swatch Profile

• Show on product list

• Product image change upon selection

• Clone or remove rules for faster configuration

🎨 Swatch Profile Builder – Create Unlimited Swatch Styles

Out-of-the-Box Profiles:
Comes with 3 pre-defined swatch profiles you can edit, duplicate, or delete.

Create Unlimited Profiles:
Design as many swatch profiles as needed to match different types of attributes or product lines.

Swatch State Customization:

• Default State: Customize text color, background, size, and borders

• Hover State: Apply color changes, background styling, border effects, and box shadows

• Selected State: Define how a swatch appears once chosen

• Tooltip Styling: Control tooltip text, background, border, and position

Clone & Delete:
Quickly replicate profiles or remove unused ones to streamline the design process.

🔧 Control Swatch Display on Product Listings

From the Swatches on Product List tab, you can define:

• Whether to show the Add to Cart button after attribute selection

• Show/hide attribute names

• Choose or customize positioning on shop, category, or custom pages

• Enable or disable tooltips

• Limit how many swatch items show per attribute

📱 Responsive & Mobile Friendly

• Fully mobile compatible – ensures a seamless swatch selection experience across devices

• Designed with a responsive layout for various screen sizes and touch interactions

🚀 Additional Features

• 🔁 Auto-Update: Enter your license to receive automatic updates

• 🎯 Works with custom CSS for fine-tuned control over every element

• 🧰 Easy to use: Intuitive admin panel with a friendly UI and clear organization

• ⚙️ Fully compatible with default WooCommerce functionality and themes

Use Cases

• 🧥 Fashion stores: Color and size swatches for clothing

• 🎮 Gadget or electronics: Variation images for different models

• 🧴 Cosmetics or health products: Color dots for shade selection

• 🛋️ Furniture stores: Fabric, material, or finish previews

• 📱 Mobile accessories: Thumbnails for design options

🧾 Feature Summary

• 🎨 Multiple display types: Button, Color, Image, Variation Image, Radio, Select

• 📐 Horizontal or vertical layout styles

• 🗂️ Customize global and custom attributes

• 🔄 Automatically change product images on swatch selection

• 🧱 Unlimited swatch profiles with full style control

• 🖱️ Tooltip customization

• 🛒 Show/hide swatches and Add to Cart on product lists

• 🏷️ Show/hide attribute names

• 💡 Limit displayed attribute items

• 🔧 Fully responsive & works on mobile

• 📥 Auto-update with license key

• 🧩 Easy integration into any WooCommerce store

WooCommerce Product Variations Swatches is the ultimate plugin to bring style, clarity, and interactivity to your product variation displays. Whether you want to enhance usability, improve aesthetics, or increase conversions, this plugin delivers an elegant and flexible solution that works seamlessly across your entire WooCommerce store.