Free WooCommerce Variation Swatches Plugin

What Is the WooCommerce Variation Swatches Plugin?

The WooCommerce Variation Swatches plugin by Emran Ahmed (available free on WordPress.org as ‘woo-variation-swatches’) is one of the most popular attribute variation swatches plugins in the entire WordPress plugin directory. It transforms the default product variation select dropdowns into beautiful, interactive swatches — giving your customers a much faster and more visual way to pick the product option they want. Instead of a plain dropdown that says ‘Red, Blue, Green’, shoppers see clickable color circles. Instead of ‘S, M, L, XL’ in a dropdown list, they see styled text buttons they can tap or click instantly. The plugin supports color swatches, image swatches, text label buttons, and even dual-color swatches — all from the free version. What makes this plugin stand out is that it works across multiple pages. It shows swatches on your single product pages AND on your shop page, category pages, and archive pages — which is something many other plugins lock behind a paid upgrade. You can also configure global settings separately for product list pages versus individual product pages, giving you precise control over how swatches appear across your whole store.

Key Features of the Free Variation Swatches Plugin

Here is a quick rundown of what you get completely free with this plugin: – **Color Swatches:** Replace color attribute dropdowns with clickable color circles or squares using hex codes. No more guessing what ‘Midnight Navy’ looks like. – **Image Swatches:** Assign a product image to each variation so customers see an actual photo of that variant instead of reading text. – **Text Label Buttons:** Convert size or material attributes into styled clickable buttons — much easier to tap on mobile than a dropdown. – **Dual-Color Swatches:** Assign two colors to a single swatch, useful for products with multi-tone or mixed colorways. – **Tooltip Support:** When a customer hovers over a swatch, a tooltip can display more information about that variation — great for material details or size guides. – **Radio Buttons:** Create radio-button style selectors as an alternative to buttons or dropdowns. – **Out-of-Stock Handling:** The plugin can show a cross over unavailable swatches, blur them, or hide them entirely — so customers never click on something they cannot buy. – **Shop / Archive Page Swatches:** Display swatches directly on your shop and category listing pages, not just the single product page. – **Swatch Size & Shape Control:** Choose rounded or squared shapes, and control swatch dimensions to match your brand. – **Mobile-Responsive:** All swatches are fully responsive and touch-friendly — critical for mobile shoppers. – **Global Attribute Configuration:** Set your swatch types once at the attribute level and they automatically apply to all products using that attribute. No need to configure each product one by one. – **Elementor Compatible:** The plugin is compatible with Elementor page builder, which I use for almost every WooCommerce site I build.

Why You Should Replace Dropdowns with Swatches

WooCommerce’s default variation system puts all your product options into boring dropdown menus. Shoppers have to click the dropdown, scroll through text options, and make a selection — then do the same thing again for every attribute. On mobile, this is especially painful. Dropdowns are small, hard to tap, and give customers zero visual feedback about what they’re actually choosing. Visual swatches solve all of this. According to multiple UX studies, visual swatches can increase add-to-cart rates by 10–25% by making the selection process faster and more intuitive. Customers can see their options at a glance — the actual colors, the actual images, clearly labeled size buttons — and make a decision with a single tap or click. There’s another big benefit that store owners often overlook: out-of-stock handling. By default, WooCommerce does not visually indicate which variations are out of stock. With this swatches plugin, you can show a cross, a blur, or hide the unavailable option entirely — which prevents customer frustration and reduces support messages asking ‘why can’t I select this option?’. For my clients who sell physical products — clothing boutiques, gift shops, accessory stores — swatches are not a nice-to-have. They are a baseline expectation of a professional-looking store.

How to Install the Variation Swatches Plugin in WooCommerce

Installation takes about two minutes. Here are the steps: – Go to your WordPress dashboard and navigate to **Plugins > Add New**. – In the search box, type **WooCommerce Variation Swatches**. – Look for the plugin by Emran Ahmed (plugin slug: woo-variation-swatches) and click **Install Now**. – Once installed, click **Activate**. That’s it for the basic install. The moment you activate the plugin, it will automatically convert all of your existing variation select dropdowns into button swatches — no additional setup needed for that basic behavior. For color swatches and image swatches, you just need a quick two-step configuration at the attribute level, which I cover in the next section. You can also watch the full step-by-step video tutorial on Prashant’s YouTube channel (linked at the end of this article) to see the entire install and setup process in real time.

How to Configure Global Settings

After activation, head to **WooCommerce > Settings > Variation Swatches** in your WordPress dashboard. This is where you set up your global defaults — meaning the settings here will apply to all your products automatically. The key settings you will find here include: – **Enable/Disable Swatches on Shop Page:** Toggle swatches to also appear on your archive and category listing pages, not just the single product page. I always turn this on — it makes your shop page look much more polished. – **Swatch Width & Height:** Set a consistent size for all swatches across the store. – **Swatch Shape:** Choose rounded (circle) or squared style — pick whichever fits your store’s design. – **Tooltip:** Enable or disable tooltips. I recommend keeping tooltips on for color and image swatches — they give customers extra confidence. – **Disabled Attribute Style:** Choose how out-of-stock swatches appear — cross sign, blur, or hidden. I usually go with a cross sign, as it’s clear but still shows customers what variations exist. Once you have set your global defaults, navigate to **Products > Attributes** in your dashboard. Open any attribute (e.g. ‘Color’) and you will see a new option to set the attribute type — change it from ‘Select’ to ‘Color’, ‘Image’, or ‘Label’. After saving, every product that uses that attribute will automatically display the correct swatch type without any per-product editing.

How to Set Up Swatches on a Product (Step-by-Step Example)

Let’s walk through a real-world example — a T-shirt product with color and size variations. This is probably the most common scenario I encounter when setting this up for clients. **Step 1: Install and activate the plugin** (as covered above). **Step 2: Configure global attribute types.** Go to **Products > Attributes**. Click into your ‘Color’ attribute and change the Type from ‘Select’ to ‘Color’. Save. Do the same for ‘Size’ — set it to ‘Label’ or ‘Button’. **Step 3: Set your default swatch types.** In **WooCommerce > Settings > Variation Swatches**, set ‘Color’ and ‘Text’ as your default swatch types and save. **Step 4: Edit your product.** Go to **Products**, open your T-shirt product, and scroll down to the **Attributes** and **Variations** sections. If you have already set up attributes and variations, you should now see the swatches are automatically displaying based on your global settings. **Step 5: Assign colors to attribute terms.** Go back to **Products > Attributes > Color > Configure Terms**. For each color term (e.g. ‘Red’, ‘Blue’), click Edit and you will now see a color picker field to assign the actual hex color. For image swatches, you can assign a product image thumbnail instead. **Step 6: Preview your product.** Visit the product page on the front end and you should see your beautiful color circles and text buttons instead of dropdowns. Test on mobile too!

Best Practices for Using WooCommerce Variation Swatches

After setting this up on dozens of WooCommerce stores, here are the practices that make the biggest difference: **Use high-quality images for image swatches.** If you are using the image swatch type, make sure every variation has a clear, well-lit product photo. Blurry or inconsistent thumbnails will hurt rather than help the shopping experience. **Keep your swatch design consistent.** Set the same size, shape, and border style across all your attributes. A consistent design looks professional and trustworthy. Use the global settings to enforce this rather than customizing per product. **Write short, clear text labels.** For size or material swatches using the label type, keep the text brief — ‘S’, ‘M’, ‘L’, ‘XL’ rather than ‘Small Size’, ‘Medium Size’, etc. Swatches are meant to be scannable at a glance. **Always enable tooltips.** Tooltips give extra context when a customer hovers over a swatch — especially useful for colors with unusual names or materials. Enable them in your global settings and let them do the work. **Handle out-of-stock clearly.** Never let a customer click on an unavailable variation and get an error. Configure your out-of-stock display to show a cross sign or blur so shoppers know upfront. This single change dramatically reduces frustration and support queries. **Test on mobile before going live.** Most of your shoppers are on their phones. Make sure your swatches are large enough to tap comfortably and that the layout does not break on smaller screens.

Frequently Asked Questions

Is the WooCommerce Variation Swatches plugin really free?

Yes, the core plugin by Emran Ahmed is completely free and available on WordPress.org. It includes color swatches, image swatches, text labels, tooltip support, and shop-page display — all at no cost. A Pro version exists with additional advanced features, but the free version is more than sufficient for most small business stores.

Will this plugin work with my WooCommerce theme?

The plugin is designed to work with any WooCommerce-enabled theme, including popular ones like Astra, Flatsome, OceanWP, and Storefront. It is also fully compatible with Elementor page builder. That said, it is always a good idea to test the plugin on a staging site before activating it on your live store.

Can I use different swatch types for different product attributes?

Yes, absolutely. You can set one attribute (like ‘Color’) to display as color swatches, while another attribute (like ‘Size’) uses text label buttons, and another (like ‘Material’) uses image swatches. Each attribute is configured independently, giving you full flexibility across your product catalog.

How does the plugin handle out-of-stock variations?

The plugin gives you three options for displaying unavailable variations: a cross/strikethrough over the swatch, a blur effect, or hiding the swatch entirely. The free version supports this for up to 30 variations with a cross sign, while the Pro version allows unlimited variations. I recommend the cross sign option as it communicates unavailability clearly without hiding available choices.

Are WooCommerce variation swatches mobile-friendly?

Yes — the plugin generates fully responsive swatches that display correctly and are easy to tap on all devices, including smartphones and tablets. Given that the majority of online shoppers now browse on mobile, this is one of the most important reasons to use swatches over standard dropdowns.

Can I show variation swatches on the WooCommerce shop page, not just the product page?

Yes, this plugin supports displaying swatches on your shop page, category pages, and archive pages — not just the individual product page. You enable this in WooCommerce > Settings > Variation Swatches by toggling on the shop/archive page option. This is a feature that many other plugins only offer in their paid versions.

Do I need to configure swatches for every product individually?

No — that is one of the best things about this plugin. Once you configure your attribute types at the global level (via Products > Attributes), all products using those attributes will automatically display the correct swatch type. You only need to go per-product if you want to override the global settings for a specific item.

Final Thoughts

That covers everything you need to know to get up and running with the free WooCommerce Variation Swatches plugin. It’s one of those small changes that makes an immediately visible difference to how professional your store looks — and how easy it is for your customers to make a purchase. I’ve set this up on countless WooCommerce stores for clients across the USA, UK, and Australia, and it never gets old seeing a product page transform from a clunky form into a clean, visual shopping experience. If you are a visual learner, make sure to watch the full video tutorial on my YouTube channel — I walk through the entire setup from install to live product page, and you can pause and follow along at your own pace. If you have any questions about your specific setup, drop a comment below and I’ll do my best to help. And if you would rather have someone set this up for you, feel free to reach out to me directly through the contact page at paramfreelance.com — I’m always happy to help local businesses get their WooCommerce stores working properly.