Turn boring dropdowns into color, image, and label swatches that make product choices faster and more engaging.
Product Variation Swatches replaces WooCommerce’s standard dropdown menus with visual swatches that shoppers can click. Instead of scrolling through plain lists, customers can instantly see colors, patterns, or sizes before making a choice. This helps them decide quickly and gives your store a polished, professional look.
For stores that sell fashion, cosmetics, electronics, or any product with multiple variations, this change makes a big difference. WooCommerce dropdowns are functional, but they lack visual cues. With swatches, customers don’t have to guess, they can clearly see what they’re selecting, reducing hesitation and speeding up the buying process.
The plugin is highly flexible. You can set swatches as round or square, control their width and height, and style borders with different colors and line types such as solid, dashed, dotted, or double. Tooltips add extra detail on hover, with options to customize font size, background, and text color. Swatches can also be shown before or after product titles and prices on shop pages, and you can decide whether attribute names should appear on product pages. Options like attribute behavior help you manage unavailable variations in a clean and user-friendly way.
Upgrading to the Pro version unlocks more advanced controls. You can display swatches across catalog pages globally or on individual products, choose inline or stacked label positions, enable tooltip image previews and hover effects, and get priority support.
How It Works
Installing and configuring Product Variation Swatches is pretty easy.
- Install and Activate – Add the plugin to your WordPress site via the Plugins → Add Plugin page (for the free version) or upload the ZIP file for the Pro version. Activate the plugin and, for Pro users, activate your license to unlock premium features.
- Create Product Attributes and Variations – Go to Products → Attributes to create attributes. For each attribute, choose the swatch type: Color, Image, or Label. Add terms with color codes, image uploads, or text labels. Assign these attributes to a variable product and create your variations. Once saved, the default dropdowns are replaced by the swatches you’ve defined.
- Configure Swatch Settings – Navigate to Products → Variation Swatches in the dashboard. From here, you can enable or disable the plugin’s default stylesheet for complete styling control, toggle Attribute Behavior to Cross, Blur, or Hide to blur unavailable variations, show or hide attribute names on product and shop pages.
- Customize Swatch Appearance – Decide where swatches appear on catalog pages (before or after product titles/prices), choose between round or square shapes, set width and height, adjust border styles (solid, dashed, dotted, double), and configure tooltip behavior, including font size, background color, and text color.
- Save and Preview – Save changes and preview your product pages to see the updated swatches in action.
Key Features
Product Variation Swatches includes a set of core features that replace dropdowns with clear, visual options. They are built to make shopping easier, align with your store’s design, and increase conversions.
Replace boring dropdowns with clickable swatches that display colors, images or text labels. Each attribute term becomes a visual element, helping customers identify their desired variation instantly. You can mix and match swatch types on the same product.
Choose between round, square or rounded swatch styles. Set custom widths and heights to match your design. Adjust border width, type (solid, dashed, dotted or double) and color for consistent branding. These shape and size adjustments ensure your swatches blend seamlessly with your theme.
Decide where swatches appear on shop/catalog pages, before or after product titles and prices. On product pages, choose whether to show attribute names and set the swatch label position to inline or stacked (left or center). The Pro version lets you manage these settings globally or per product, giving you granular control over swatch placement.
Highlight available options while de-emphasizing unavailable ones. With Attributes Behavior, you can blur or cross out disabled variation options, making it clear which choices are selectable. This feature keeps the interface clean and reduces customer confusion.
Enable tooltips to display additional information when shoppers hover over a swatch. Customize the font size, background color and text color to fit your brand. The Pro version introduces image previews and hover effects, giving customers a preview of the variation when they pause over a swatch.
Show variation swatches directly on catalog pages so customers can select options without visiting the product page. Set global rules or override settings per product. This speeds up the shopping experience and increases engagement.
Replace variation dropdowns with color swatches
To transform dropdowns into swatches, first create attributes under Products → Attributes and assign a swatch type (Color, Image, or Label). Add terms with color codes or images. Then assign the attribute to a variable product and configure variations. The plugin automatically replaces dropdowns with swatches on the frontend. Customers can click to select their desired option without using a list.
Customize swatch shape and size
Go to Variation Swatches settings and under shape settings, choose your preferred style: round, square, or rounded corner. Set the width and height values (in pixels) to control the swatch dimensions. Under border settings, pick a width and type (solid, dashed, dotted, or double) and select a color that matches your theme. These settings apply globally and give your swatches a professional look.
Disabled Attribute Behavior for variation swatches
To improve clarity, choose attribute behavior among Cross, Blur, or Hide in the plugin’s General settings. Depending on your settings, unavailable variations will appear blurred, crossed out, or completely hidden. This guides customers to available options and prevents them from clicking choices that aren’t in stock. It’s especially useful for products with many combinations where some combinations are sold out.
Display swatches on shop pages
Want your catalog pages to show swatches? In the Pro version, enable the option to display swatches on archive pages. Choose whether they appear before or after the product title and price. You can also decide to show or hide variation labels and attribute names. These settings help customers select variations directly from the product grid, speeding up the path to purchase.
Customize variation swatch tooltip
Tooltips give context. In the settings, enable tooltips for each attribute and customize their appearance. Set the font size, pick a background color and choose a text color. If you need a more minimal look, disable tooltips entirely. Pro users can add image previews or hover effects that show a larger version of the swatch when a user hovers over it.
Additional Features
Upcoming updates will let you limit how many attributes show on shop pages, add swatches to quick views and popups, improve accessibility for screen readers, and work smoothly with page builders such as Elementor and Divi. Premium support is available for help with setup and customization. The plugin is built with a lightweight codebase, so it runs efficiently and works with most WooCommerce themes.
Use Cases
Visual swatches benefit many types of stores. Here are a few scenarios where this plugin enhances the shopping experience:
Apparel Store
A clothing retailer replaces dropdowns with color and image swatches for sizes and patterns. Customers see exactly how each color or pattern looks, reducing returns. CrossBlurHide highlights available sizes while blurring sold‑out combinations. Swatches appear on both product pages and catalog pages, speeding up selection.
Cosmetics Brand
A beauty brand sells lipsticks in dozens of shades. They use round swatches to display colors and labels to show shade names. Tooltips show descriptive text, and image previews in the Pro version display the lipstick on a model. The border color matches the brand’s palette for consistent styling.
Electronics Retailer
A gadget store offers phone cases in multiple designs. They choose image swatches to show each pattern. On the shop page, customers can choose their preferred design without opening the product page. Disabled cases are crossed out so buyers know which designs are out of stock.
Handmade Crafts Marketplace
A craft marketplace features items with unique materials and finishes. Sellers use label swatches with stacked positions on product pages to display wood types and finishes. Pro settings allow sellers to disable swatches on specific catalog items or show only a limited number of attributes per product.
Integrations & Compatibility
Product Variation Swatches requires WooCommerce 6.0 or later and WordPress 5.8+. It supports PHP 7.4 and higher. The plugin is compatible with most WooCommerce themes, including popular options like Astra, OceanWP, Flatsome, and Storefront. It works with page builders that rely on standard WooCommerce templates, and future updates will add deeper integration for Elementor and Divi.
The plugin’s CSS can be disabled if you prefer to handle styling yourself. It’s optimized for performance and doesn’t add noticeable overhead. For best results, use high-quality images or clearly defined colors in your swatches. Regular updates ensure compatibility with new versions of WooCommerce. If you experience conflicts, test with a default theme and deactivate other product images or variation plugins.
Frequently Asked Questions
How do I replace variation dropdowns with color swatches in WooCommerce?
Create attributes under Products → Attributes, assign each one a swatch type (Color, Image, or Label), add terms with color codes, images, or text, and attach the attribute to a variable product. The plugin will replace dropdowns with swatches on the product page automatically.
Can I display color, image, and text swatches together?
Yes. You can mix and match swatch types on any product. For example, use color swatches for one attribute and image or label swatches for another.
How do I customize the shape and size of variation swatches?
Go to the Variation Swatches settings and choose round, square, or rounded corners. Set your desired width and height, adjust border width and type (solid, dashed, dotted, or double), and pick a border color. These settings apply globally.
What is Attribute Behavior, and how does it work?
Attribute Behavior is an option that highlights available variation options and blurs or crosses out unavailable ones. Enable it in the display settings to improve clarity and prevent customers from selecting out‑of‑stock variations.
Can I display swatches on the shop or archive pages?
In the Pro version, you can enable swatches on catalog pages. Choose where they appear relative to the product title and price, and decide whether to show labels and attribute names. This lets customers pick options without opening each product page.
Are tooltips customizable?
Yes. You can enable or disable tooltips per attribute and set the font size, background color, and text color. The Pro version adds image previews and hover effects for richer tooltips.
Are there upcoming features?
Yes. The roadmap includes limiting attribute numbers on shop pages, adding swatches to quick views and popups, accessibility enhancements, and support for page builders like Elementor and Divi. Premium users receive these updates as part of their subscription.
You must log in to submit a review.
