How to Set Up Multiple Swatches per Product in WooCommerce

Ever feel like your product pages look too plain? You're not alone. Many store owners use the default dropdown for selecting product variations like color or size — and it works, but it's not always the most intuitive for your customers.

That’s where variation swatches for WooCommerce come in. Instead of dropdowns, you can display options like colors, sizes, and styles as clickable radio buttons, images, or labels. It’s a better way to show off what your product offers and help customers make quicker decisions.

In this guide, we’ll walk you through setting up multiple swatches for your WooCommerce products using the Variations as Radio Buttons for WooCommerce plugin by Extendons.

Table of Contents

• What Are WooCommerce Swatches?

• Why Use Variation Swatches for WooCommerce?

• Overview of the Plugin by Extendons

• How to Install the Plugin

• Setting Up Multiple Swatches per Product

  • Step 1: Define Product Attributes

  • Step 2: Configure Global Swatches

  • Step 3: Customize Swatches Per Product

  • Step 4: Display Swatches on Shop and Product Pages

• Customization Options

  • Shapes, Sizes, and Layout

  • Tooltips and Borders

  • Handling Out-of-Stock Variations

• Best Practices

• FAQs

What Are WooCommerce Swatches?

Swatches in WooCommerce let you show product variation options — like color or size — in a visual format. Instead of a dropdown, you can display options as:

• Radio buttons

• Images

• Color blocks

• Text labels

With WooCommerce swatches, customers don’t have to click through dropdowns to compare. They can see their options at a glance, which can make shopping easier and faster.

Why Use Variation Swatches for WooCommerce?

Here’s why using swatches can make a big difference:

• Visual navigation: Makes it easier for customers to understand and pick product variations.

• Fewer clicks: Customers don’t need to open dropdowns to compare colors or sizes.

• Better conversion chances: When shopping is easier, people are more likely to finish the purchase.

The woocommerce swatches plugin by Extendons is built specifically to help with this. It replaces dropdowns with swatches and gives you full control over how they look and work.

Overview: Variations as Radio Buttons for WooCommerce by Extendons

This plugin lets you:

• Display variation swatches as radio buttons, images, text, or colors

• Customize swatch shapes (round or square)

• Set different sizes for product and shop pages

• Show or hide swatches for out-of-stock items

• Link directly to specific product variations

• Change product images when customers hover over or click a swatch

The flexibility of this plugin means you can tailor your swatches to match your store’s theme and your customer’s needs.

How to Install the Plugin

Here’s a quick setup:

1. Go to your WordPress admin dashboard.

2. Navigate to Plugins > Add New.

3. Search for "Variations as Radio Buttons for WooCommerce by Extendons" or upload the plugin zip if you purchased it.

4. Click Install Now, then Activate.

Once activated, you’ll find a new section in your WooCommerce settings for swatches.

Setting Up Multiple Swatches per Product

Step 1: Define Product Attributes

Start by setting up your product attributes, which are the base for your variations.

1. Go to Products > Attributes.

2. Add a new attribute (e.g., Color, Size).

3. Click Configure terms and add specific options (e.g., Red, Blue, Small, Medium).

Step 2: Create Variable Product

When adding a product:

1. Choose Product data > Variable product.

2. Under Attributes, select your predefined attributes and check “Used for variations.”

3. Go to the Variations tab to add variations for each combination.

Step 3: Configure Global Swatches

Now let’s turn those dropdowns into swatches:

1. Head to WooCommerce > Swatch Settings.

2. Choose how each attribute should appear — radio button, color swatch, image, or text.

3. You can upload icons or select colors for each term.

These settings will apply to all products using those attributes.

Step 4: Customize Swatches Per Product

Want unique swatches for a specific product? You can override global settings at the product level.

1. Edit the product.

2. Scroll down to the Swatch Settings tab.

3. Choose how each attribute should display.

4. Set individual swatch sizes and styles for that product.

Display Swatches on Shop and Product Pages

This plugin allows you to show swatches directly on the shop and product pages. Customers can see all available options without opening the product — a small touch that can make browsing easier.

You can choose:

• Whether to show swatches on both pages or just one

• What swatch type to use (radio buttons, colors, images, etc.)

• Whether to display variation images on hover or click

Customization Options

Shapes, Sizes, and Layout

You can pick between round or square radio buttons and define custom sizes:

• Choose width and height

• Use different sizes for shop and product pages

• Match the shape and size to your store's look

Tooltips and Borders

Add tooltip text to each swatch to describe what it is (e.g., “Dark Blue” or “Polyester”). You can also:

• Add borders

• Change border radius for softer edges

Handling Out-of-Stock Variations

Instead of showing all variations as selectable, you can:

• Hide out-of-stock swatches

• Blur them

• Cross them out

This helps keep your product pages clean and avoids customer confusion.

Best Practices

• Use images or color swatches for visual choices (like t-shirt colors).

• Use text labels or radio buttons for technical options (like memory size or material).

• Keep your swatches consistent across products for a cleaner look.

• Don’t clutter: Only use swatches where it adds real value.

Frequently Asked Questions (FAQs)

Q1. What is the benefit of replacing dropdowns with swatches?
Using swatches provides a quicker, more intuitive way for customers to choose product options.

Q2. Can I use different types of swatches for the same product?
Yes, you can mix and match — use color swatches for color, text labels for sizes, and images for patterns.

Q3. Do these swatches work on the shop page too?
Yes. With this plugin, you can display variation swatches right on the shop page as well as the product page.

Q4. What happens when a variation goes out of stock?
You can choose to hide, blur, or cross out that swatch so it’s clear that the option isn’t available.

Q5. Can I customize the swatches for individual products?
Yes. The plugin allows product-level swatch customization, which overrides global settings.

Q6. Who is behind this plugin?
The plugin is developed by Extendons, a company known for creating user-friendly WooCommerce solutions.

Final Thoughts

Setting up multiple swatches per product in WooCommerce isn’t just about looks — it’s about making the shopping experience smoother for your customers. The Variation Swatches for WooCommerce plugin by Extendons gives you the tools to display variations in a more user-friendly way.

Whether you’re selling clothes, electronics, or handmade items, adding swatches makes your store easier to navigate and more interactive. With full control over the style, size, and visibility of each swatch, you can customize your product pages to match your brand perfectly.

So if you're still using those old dropdown menus, maybe it’s time to upgrade how your product variations are shown.