WooCommerce variable products are useful for selling one product in several colors, sizes, materials, patterns, or styles. However, the default product page normally presents these choices through dropdown menus.

A dropdown works, but it hides the available options until the customer opens it. Shoppers cannot immediately see which colors, sizes, patterns, or styles are available.

You can replace WooCommerce dropdowns with variation swatches to make product variation selection more visual and easier to understand. Colors can appear as clickable circles, sizes can appear as text buttons, and materials or patterns can appear as image thumbnails.

This complete tutorial explains how to replace WooCommerce dropdowns with variation swatches using GS Variation Swatches for WooCommerce.

You will learn how to:

• Choose between color, image, and label swatches
• Create global WooCommerce attributes
• Configure attribute terms
• Add attributes to a variable product
• Generate the product variations
• Add prices, inventory, and variation images
• Replace existing dropdowns safely
• Test the complete frontend experience

GS Variation Swatches supports Color, Image, and Button/Label attribute types, allowing standard WooCommerce variation selectors to appear as visual choices.

What Does It Mean to Replace WooCommerce Dropdown with Variation Swatches?

Replacing WooCommerce dropdowns with variation swatches means changing how product variation attributes appear on the frontend without replacing WooCommerce’s underlying product variation system.

WooCommerce still controls:

• Variation prices
• Stock quantities
• SKUs
• Product images
• Weight and dimensions
• Shipping classes
• Variation descriptions
• Add to Cart behavior

The swatches simply give customers a more visual way to select those variations.

For example, a default WooCommerce product might show:

Color: Select an option

After you replace WooCommerce dropdowns with variation swatches, the same attribute can show Black, Navy Blue, and Burnt Orange as clickable circles.

A Size dropdown can become S, M, L, and XL buttons. A Material dropdown can become Cotton, Leather, and Suede image swatches.

WooCommerce variable products allow individual variations to have separate prices, stock levels, SKUs, images, and other product data.

Why Replace WooCommerce Dropdowns with Variation Swatches?

You should replace WooCommerce dropdowns with variation swatches when customers benefit from seeing product options before interacting with the variation form.

A dropdown hides its values. Swatches display the available choices right away.

When you replace a dropdown with swatches, customers can:

• See available colors at a glance
• Compare patterns and materials visually
• Select a size with one click
• Recognize unavailable options more quickly
• Confirm a selection through the matching product image
• Navigate product options more comfortably on mobile

The goal is not to remove WooCommerce’s variation functionality. The goal is to present the same product information through a clearer and more useful interface.

Color vs. Image vs. Label Swatches

Before you replace WooCommerce dropdowns with variation swatches, choose the display type that best represents each attribute.

Product attribute	Recommended swatch type	Examples
Solid color	Color swatch	Black, Red, and Navy Blue
Size	Label or button swatch	S, M, L, XL
Pattern	Image swatch	Plaid, Floral, Striped
Material	Image or label swatch	Leather, Cotton, Suede
Product style	Image or label swatch	Crew Neck, V-Neck, Polo
Surface finish	Image swatch	Matte, Glossy, Brushed
Storage capacity	Label swatch	128 GB, 256 GB, 512 GB
Package quantity	Label swatch	Single, Pack of 2, Pack of 4
Simple text option	Label swatch	Standard, Premium, Deluxe

GS Variation Swatches adds Color, Image, and Button/Label options to the WooCommerce attribute type selector.

When to Use Color Swatches

Use the Color attribute type when you replace WooCommerce dropdowns with variation swatches for solid colors that can be represented accurately by a single color value.

Suitable options include:

• Black
• White
• Red
• Navy Blue
• Forest Green
• Burnt Orange
• Charcoal Gray
• Soft Pink

Color swatches work well for products such as:

• Clothing
• Shoes
• Bags
• Curtains
• Furniture
• Phone cases
• Cosmetics
• Jewelry
• Home accessories

Avoid using a single color swatch for plaid patterns, wood grains, marble surfaces, multicolor prints, or visible textures. Image swatches usually represent those options more accurately.

When to Use Image Swatches

Use the Image attribute type when replacing WooCommerce dropdowns with variation swatches for an option whose appearance cannot be communicated through one solid color.

Image swatches work well for:

• Plaid patterns
• Floral prints
• Wood finishes
• Marble surfaces
• Leather textures
• Fabric samples
• Shoe styles
• Product shapes
• Multicolor designs

The small image acts as the variation selector. The full product image assigned to the variation then shows the complete product.

WooCommerce lets each variation use its own primary image. When configured correctly, selecting an image swatch can update the main product image.

When to Use Label or Button Swatches

Use a button/label when you replace WooCommerce dropdowns with variation swatches for options that customers understand more easily as text.

Common examples include:

• Small, Medium, Large
• S, M, L, XL
• 128 GB, 256 GB, 512 GB
• Single, Pack of 2, Pack of 4
• Standard, Premium, Deluxe
• Round, Square, Rectangle
• Short Sleeve, Long Sleeve

Label swatches are usually clearer than colors or images for sizes, capacities, quantities, packages, and other text-based options.

How to Replace WooCommerce Dropdowns with Variation Swatches Step by Step

For this tutorial, we will use a variable product named:

Classic Cotton Hoodie

The product will have two attributes:

Color

• Black
• Navy Blue
• Burnt Orange

Size

• Small
• Medium
• Large
• Extra Large

The Color attribute will appear as clickable color swatches. The Size attribute will appear as label buttons.

Step 1: Install GS Variation Swatches

The first step to replace WooCommerce dropdowns with variation swatches is to install and activate GS Variation Swatches for WooCommerce.

From the WordPress dashboard, go to:

Plugins → Add New Plugin

Search for:

GS Variation Swatches for WooCommerce

Click Install Now and then click Activate.

After activation, go to:

Plugins → Installed Plugins

Confirm that both of the following plugins are active:

• WooCommerce
• GS Variation Swatches for WooCommerce

Without WooCommerce, product variations will not work. Without GS Variation Swatches, the variation attributes will normally continue appearing as standard dropdowns.

Step 2: Review the Existing WooCommerce Product

Before you replace WooCommerce dropdowns with variation swatches, review the product you want to modify.

Go to:

Products → All Products

Open the Classic Cotton Hoodie and check:

• Product type
• Existing product attributes
• Existing variations
• Variation prices
• Stock quantities
• SKUs
• Variation images
• Default selections

If the product is already live, do not immediately delete the existing attributes or variations.

For a new product, open the Product data dropdown and select:

Variable product

WooCommerce uses product attributes such as Color and Size to create the individual combinations of a variable product.

Step 3: Create the Global Color Attribute

To replace WooCommerce dropdowns with variation swatches for colors, create a global WooCommerce attribute.

Go to:

Products → Attributes

Enter:

• Name: Color
• Slug: color
• Type: Color
• Default sort order: Custom ordering

Click:

Add attribute

The Type field is important. GS Variation Swatches adds Color, Image, and Button/Label choices alongside the default attribute types.

A global attribute can be reused across multiple products, allowing the same Black, Navy Blue, or Burnt Orange term to remain consistent throughout the store.

Step 4: Add the Individual Color Terms

The next step to replace WooCommerce dropdowns with variation swatches is to configure the individual color terms.

Find “Color” in the attribute table and click:

Configure terms

Create the following terms.

Black

• Name: Black
• Slug: black
• Color value: #000000

Navy Blue

• Name: Navy Blue
• Slug: navy-blue
• Color value: #1D3557

Burnt Orange

• Name: Burnt Orange
• Slug: burnt-orange
• Color value: #CC5500

Choose color values that match the actual product as closely as possible.

A Navy Blue swatch should not look royal blue, and a Burnt Orange swatch should not look bright red. The swatch should set the correct visual expectation before the customer selects the variation.

Step 5: Create the Global Size Attribute

To replace WooCommerce dropdowns with variation swatches for product sizes, create a second global attribute.

Go to:

Products → Attributes

Enter:

• Name: Size
• Slug: size
• Type: Button/Label
• Default sort order: Custom ordering

Click:

Add attribute

Next, click “Configure terms” and add:

• Small
• Medium
• Large
• Extra Large

You may display the complete names or use shorter labels:

• S
• M
• L
• XL

Choose one naming system and use it consistently across related products.

Step 6: Add Color and Size to the Product

Now edit the Classic Cotton Hoodie to replace WooCommerce dropdowns with variation swatches on the actual product page.

Inside the Product data panel, open:

Attributes

Select the global Color attribute and click Add.

Choose:

• Black
• Navy Blue
• Burnt Orange

Enable:

• Visible on the product page
• Used for variations

Next, add the global Size attribute.

Choose:

• Small
• Medium
• Large
• Extra Large

Enable the same two settings.

Click:

Save attributes

The “Used for variations” option is essential. Without it, WooCommerce will not use the attribute values to create purchasable variations.

Step 7: Generate the Product Variations

The next step to replace WooCommerce dropdowns with variation swatches is to generate the actual variations.

Open:

Product data → Variations

Choose the option to create or generate variations from all attributes.

WooCommerce can create combinations such as:

• Black / Small
• Black / Medium
• Black / Large
• Black / Extra Large
• Navy Blue / Small
• Navy Blue / Medium
• Navy Blue / Large
• Navy Blue / Extra Large
• Burnt Orange / Small
• Burnt Orange / Medium
• Burnt Orange / Large
• Burnt Orange / Extra Large

Review every generated combination.

If a particular combination is not available, such as Burnt Orange / Small, you can remove or disable that variation without affecting the valid combinations.

Step 8: Add Price, Stock, and SKU Information

Visual swatches do not make an incomplete product variation purchasable.

After you replace WooCommerce dropdowns with variation swatches, each valid variation still needs its normal WooCommerce information.

Open each variation and configure:

• Regular price
• Sale price, when applicable
• SKU
• Stock status
• Stock quantity
• Weight
• Dimensions
• Shipping class
• Tax class
• Variation description

At minimum, every sellable variation should have:

• A valid price
• An in-stock or purchasable status

A swatch may appear correctly but leave the Add to Cart button disabled when the connected variation is missing required product data.

Screenshot 8: Show one Color and Size variation expanded with its price and stock details.

Step 9: Add the Matching Variation Images

To effectively replace WooCommerce dropdowns with variation swatches, connect each color variation to the correct product image.

For example:

• Black / Small → Black hoodie image
• Black / Medium → Black hoodie image
• Navy Blue / Large → Navy blue hoodie image
• Burnt Orange / Extra Large → Burnt orange hoodie image

Open each variation and click its image placeholder.

Upload or select the matching product image.

WooCommerce supports assigning a primary image to each individual variation.

If every size of a particular color looks the same, assign the same color image to all size variations of that color.

The swatch and variation image perform different jobs:

• The swatch is the small selector that customers click.
• The variation image is the full product image displayed after selection.

Step 10: Save and Publish the Product

After you replace WooCommerce dropdowns with variation swatches, save the variation settings.

Click:

Save changes

Then click:

Publish

For an existing product, click:

Update

Open the product page in a new tab.

You should now see:

• Black, Navy Blue, and Burnt Orange color swatches
• Small, Medium, Large, and Extra Large buttons
• The correct variation price
• Stock information
• The main product image
• The Add to Cart button

Screenshot 10: Show the completed frontend product selector.

Step 11: Test Every Valid Combination

The work is incomplete until you test the product.

After you replace WooCommerce dropdowns with variation swatches, select every valid color and size combination.

Confirm that:

• The selected color has a clear active state
• The selected size has a clear active state
• The product image updates correctly
• The price updates when necessary
• Stock information is accurate
• Invalid combinations are disabled
• Add to Cart works
• The cart contains the correct attributes

For example, select:

Navy Blue / Large

Add the product to the cart and confirm that the cart shows:

Color: Navy Blue
Size: Large

Also test the product on desktop, tablet, and mobile devices.

Which Swatch Type Fits Each Product Attribute?

The most important decision when you replace WooCommerce dropdowns with variation swatches is choosing the display type that communicates each option clearly.

Color Attributes

Use Color for solid visual choices such as:

• Black
• Blue
• Red
• Green
• Gold
• White
• Gray

A color swatch should resemble the real product. Use an image swatch when a single color cannot represent the variation accurately.

Size Attributes

Use a button/label for:

• S, M, L, XL
• 6, 7, 8, 9
• 30, 32, 34, 36
• Twin, Queen, King

Customers understand sizes as text. Label buttons are usually clearer than colors or images for these options.

Material Attributes

When you replace WooCommerce dropdowns with variation swatches for materials, choose the type based on whether customers need to see the material.

Use labels for simple material names:

• Cotton
• Polyester
• Wool
• Leather

Use image swatches when appearance matters:

• Fabric weave
• Leather grain
• Wood texture
• Stone surface
• Brushed metal
• Glossy ceramic

Pattern Attributes

Use the image for patterns such as:

• Plaid
• Floral
• Striped
• Polka dot
• Camouflage
• Geometric
• Abstract print

Patterns usually need visual thumbnails because their text names may not clearly communicate the design.

Style Attributes

Use an image or Button/Label for product styles such as:

• Crew Neck
• V-Neck
• Polo
• Slim Fit
• Regular Fit
• High Top
• Low Top
• Round Frame
• Square Frame

Use an image swatch when the styles look noticeably different. Use a label when the terms are familiar and easy to understand without a thumbnail.

How to Replace Existing WooCommerce Dropdowns Safely

When you replace WooCommerce dropdowns with variation swatches on an existing product, preserve the current product and inventory structure.

Use this workflow:

• Back up the website
• Test the changes on a staging site
• Record the existing attributes and terms
• Review variation IDs and SKUs
• Record variation prices and inventory
• Create or update the global attributes
• Change the attribute display type
• Confirm the original terms remain assigned
• Review every existing variation
• Update the product
• Test the cart and checkout

Changing the visual attribute type should not require deleting valid variations.

The goal is to change the frontend selector, not to rebuild working inventory without a reason.

How to Replace WooCommerce Dropdowns with Image Swatches

To replace WooCommerce dropdowns with variation swatches that use images:

• Go to Products → Attributes
• Create or edit the required attribute
• Choose Image as the Type
• Open Configure terms
• Add the required terms
• Upload a small image for each term
• Assign the attribute to a variable product
• Enable Used for variations
• Generate or review the product variations
• Add the full product image to every variation
• Update and test the product

Use a small, clear crop for the selector image. Use a larger, high-quality product image for the full variation display.

For example:

• Plaid thumbnail → Plaid shirt image
• Oak thumbnail → Oak table image
• Brown leather thumbnail → Brown leather bag image

How to Replace WooCommerce Dropdowns with Label Swatches

To replace WooCommerce dropdowns with variation swatches that display text buttons:

• Go to Products → Attributes
• Create or edit the required attribute
• Choose Button/Label as the Type
• Add the text terms
• Assign the attribute to the variable product
• Enable Used for variations
• Generate or review the variations
• Save the product
• Test every label on the frontend

Label swatches are ideal for:

• Sizes
• Capacities
• Quantities
• Package types
• Familiar style names
• Subscription periods
• Storage options

How to Combine Color, Image, and Label Swatches

You can replace WooCommerce dropdowns with variation swatches using more than one swatch type on the same product.

For example, a pair of shoes might use:

• Color: Color swatches
• Material: Image swatches
• Size: Label swatches

A furniture product might use:

• Fabric: Image swatches
• Leg color: Color swatches
• Size: Label swatches

Each attribute should use the type that communicates its values most clearly.

However, be careful when generating variations from many attributes. A product with five colors, four sizes, and three materials can create 60 combinations.

Only create combinations you can actually sell and manage.

Swatch Design Best Practices

After you replace WooCommerce dropdowns with variation swatches, the selector must remain clear, accessible, and easy to use.

Make the Selected State Obvious

Use a visible:

• Border
• Outline
• Checkmark
• Background change
• Inner ring

Customers should immediately understand which variation is selected.

Keep Swatches Large Enough to Tap

Tiny swatches may be difficult to select on mobile devices.

Use enough size and spacing so customers do not repeatedly tap the wrong option.

Use Tooltips When Needed

Tooltips can help customers identify similar options, such as:

• Black
• Charcoal
• Slate
• Navy
• Heather Gray

They are also useful for image swatches that may not be completely understandable at a small size.

Show Disabled Options Clearly

Unavailable combinations should appear disabled rather than broken.

Depending on the design, unavailable swatches may appear:

• Faded
• Crossed out
• Muted
• Partially transparent
• Non-clickable

Customers should understand that the option exists but is not currently available with the selected combination.

Keep the Interface Consistent

Use consistent:

• Swatch sizes
• Border styles
• Spacing
• Shapes
• Selected states
• Disabled states

A consistent selector is easier to scan and understand.

Do Not Use Images When Text Is Clearer

A picture containing the letter “M” is less useful than a clean Medium button.

Choose the simplest swatch type that accurately communicates the product choice.

Common Problems After Replacing WooCommerce Dropdowns

The Product Still Shows a Dropdown

If you tried to replace WooCommerce dropdowns with variation swatches but the dropdown still appears, check:

• GS Variation Swatches is installed and active
• The global attribute uses Color, Image, or Button/Label
• The product uses the configured global attribute
• The attribute terms are correctly assigned
• All website and browser caches are cleared

The GS Variation Swatches documentation notes that products may still show dropdowns if their attributes are not configured with a suitable visual type.

Swatches Appear but Cannot Be Selected

Check that:

• Product data is set to Variable product
• Used for variations is enabled
• Variations have been generated
• Each variation has a valid price
• Stock status is correct

The Product Image Does Not Change

The swatch image and variation image are separate settings.

The swatch represents the option. The image inside the WooCommerce variation controls the main product display.

Open each variation and assign its correct primary image.

Some Combinations Are Missing

Review the Color, Size, Material, or other terms assigned to the product.

Confirm that:

• Every required term is selected
• Used for variations is enabled
• The missing combination has been generated
• The variation is enabled
• The variation has a price and valid stock status

“Add to Cart” Remains Disabled

Make sure the customer has selected a complete and valid combination.

Also check whether the connected variation:

• Has a price
• Is enabled
• Is in stock
• Contains all required attribute values

Swatches Look Incorrect on Mobile

Review:

• Swatch width and height
• Space between options
• Multi-line wrapping
• Selected-state visibility
• Tooltip positioning
• Disabled-state design
• Product image loading
• Add to Cart behavior

Test the page on a real phone whenever possible.

FAQs

Final Checklist

Before publishing after you replace WooCommerce dropdowns with variation swatches, confirm:

• WooCommerce is active
• GS Variation Swatches is active
• Product data is set to Variable product
• Global attributes are configured
• Each attribute uses the correct swatch type
• Color terms have accurate color values
• Image terms have clear thumbnails
• Label terms use consistent names
• Used for variations is enabled
• Every valid variation exists
• Variation prices are configured
• Inventory information is correct
• Variation images are assigned
• The selected state is visible
• Invalid combinations are handled
• Mobile layout works
• Add to Cart works
• The cart displays the selected attributes correctly

Install or Upgrade GS Variation Swatches

GS Variation Swatches allows store owners to replace standard WooCommerce variation dropdowns with Color, Image, and Button/Label swatches.

Install or upgrade GS Variation Swatches when you need to:

• Turn color names into clickable color circles
• Display patterns and materials as image selectors
• Present sizes as clean-label buttons
• Make product options more visual
• Improve variation selection on desktop and mobile

After installation, start with one test product and verify the complete product-to-cart workflow before updating the rest of the store.

Conclusion

You can replace WooCommerce dropdowns with variation swatches to make product choices easier to see, compare, and select.

Use:

• Color swatches for solid colors
• Image swatches for materials, patterns, finishes, and visual styles
• Label swatches for sizes, quantities, capacities, and familiar text options

GS Variation Swatches adds Color, Image, and Button/Label attribute types to the WooCommerce product workflow, while WooCommerce continues managing the underlying prices, inventory, SKUs, images, and cart behavior.

Start with one variable product, select the correct swatch type for each attribute, test every valid combination, and confirm that the selected options appear correctly in the cart.

Once the first product works correctly, you can replace WooCommerce dropdowns with variation swatches across the other variable products in your store.