Add Stunning Image Swatches for Fabric, Pattern, and Material Variations

WooCommerce variation dropdowns work well for simple text choices, but they are less useful when customers need to compare fabrics, patterns, textures, or materials. A shopper may understand the words “Plaid,” “Oak,” or “Brown Leather,” but a small visual preview communicates much more than a text label.

This is where image swatches become useful. Instead of showing a dropdown, you can display a small image for each available option. Customers can click the fabric, pattern, or material they prefer and immediately see the matching product variation.

In this tutorial, you will learn how to add image swatches to WooCommerce variable products using a clear admin-to-frontend workflow. We will cover fabric swatches, printed patterns, wood finishes, leather textures, variation images, testing, and common setup mistakes.

What Are Image Swatches?

Image Swatches are clickable visual selectors used to represent product variation options. Each small thumbnail stands for a specific attribute term, such as a fabric type, pattern, finish, or material.

For example, a standard dropdown might show:

• Floral
• Plaid
• Striped

After adding image swatches, the customer sees a small floral preview, a plaid preview, and a striped preview directly on the product page.

The swatch is not the full variation image. It is the smaller selector that helps the customer choose an option. The full variation image is configured separately and can update the main product gallery after a customer clicks a swatch.

When Should You Use Image Swatches?

Use image swatches when a product option cannot be represented accurately by a single color or short text label.

They work especially well for:

• Fabrics
• Plaid and striped patterns
• Floral prints
• Leather textures
• Wood grains
• Marble and stone finishes
• Metal finishes
• Multicolor designs
• Decorative surfaces
• Product styles with visible differences

A solid color swatch is enough for Black, White, or Navy Blue. However, a single brown circle cannot show the difference between smooth leather, distressed leather, and suede. In that situation, image swatches give the customer a clearer visual comparison.

Image Swatches vs. Color Swatches

Color swatches and image swatches serve different purposes.

Use color swatches when the product option is a simple solid color. Use image swatches when texture, print, grain, or surface detail matters.

Product option	Recommended swatch
Solid black fabric	Color swatch
Black-and-white plaid	Image swatch
Navy blue	Color swatch
Floral navy print	Image swatch
Brown leather	Image swatch
Oak wood grain	Image swatch
Matte black finish	Image or color swatch
Marble surface	Image swatch

Choosing the correct swatch type makes the product page easier to understand and prevents misleading previews.

What You Need Before Adding Image Swatches

Before creating image swatches, prepare the following:

• WordPress and WooCommerce
• A variation swatches plugin that supports image-based terms like GS Variation Swatches
• A variable product
• One small swatch image for each fabric, pattern, or material
• One full product image for each visible variation
• Administrator access to the WordPress dashboard

For this tutorial, imagine a product named Premium Accent Chair with three upholstery options:

• Gray Linen
• Navy Velvet
• Brown Leather

Prepare a small square texture image for each option. Also prepare a full chair image showing each upholstery variation.

Recommended Image Size and Style

The image swatches should use consistent image dimensions and crops.

A practical setup is:

• Square aspect ratio
• Clear close-up crop
• Consistent lighting
• Similar zoom level
• Compressed image file
• No unnecessary text or watermark

The thumbnail should show the fabric or material clearly without becoming visually busy. Avoid uploading a full lifestyle photograph as the swatch. A close-up texture crop is easier to compare.

The full variation image can be larger and should show the complete product.

How to Add Image Swatches Step by Step

Step 1: Install and Activate the Swatches Plugin

The first step is to install a WooCommerce variation swatches plugin that supports image swatches.

From the WordPress dashboard, go to:

Plugins → Add New Plugin

Search for the required variation swatches plugin, install it, and activate it.

After activation, confirm that WooCommerce and the swatches plugin are both active under:

Plugins → Installed Plugins

Without WooCommerce, the product variations will not work. Without the swatches plugin, the attribute may continue appearing as a standard dropdown.

Step 2: Create a Global Attribute

To create reusable image swatches, go to:

Products → Attributes

Add a new attribute with the following details:

• Name: Upholstery
• Slug: upholstery
• Type: Image
• Default sort order: Custom ordering

Click Add attribute.

A global attribute is useful because you can reuse the same fabric or material terms across several products. For example, Gray Linen may appear on chairs, sofas, stools, and benches.

Step 3: Add the Fabric or Material Terms

Find the Upholstery attribute and click:

Configure terms

Create these terms:

• Gray Linen
• Navy Velvet
• Brown Leather

For each term, upload the matching texture thumbnail.

When configuring image swatches, use a swatch image that represents the option accurately. The “Navy Velvet” term should display a close-up of navy velvet, not a full photograph of the chair.

Check every term if the images are set perfectly.

Save each term before continuing.

Step 4: Create or Edit the Variable Product

Go to:

Products → Add New Product

Or edit an existing product.

Enter the product name:

Premium Accent Chair

Add the product description, category, featured image, gallery, and other normal product details.

Inside the Product data panel, select:

Variable product

A variable product is required because each swatch must connect to a purchasable WooCommerce variation.

Step 5: Assign the Attribute to the Product

Open:

Product data → Attributes

Select the global Upholstery attribute and click Add.

Choose:

• Gray Linen
• Navy Velvet
• Brown Leather

Enable:

• Visible on the product page
• Used for variations

Click Save attributes.

This step connects the reusable image swatches to the product. If “Used for variations” is not enabled, WooCommerce will not create selectable variations based on the terms.

Step 6: Generate the Variations

Open:

Product data → Variations

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

WooCommerce should create:

• Gray Linen
• Navy Velvet
• Brown Leather

Each variation now represents one purchasable upholstery option.

The image swatches will act as the frontend selectors, while these variations control the price, stock, SKU, and product image.

Step 7: Configure Each Variation

Please open each variation and add the required product information.

At minimum, configure:

• Regular price
• Stock status
• Variation image

You may also configure:

• Sale price
• SKU
• Stock quantity
• Weight
• Dimensions
• Shipping class
• Variation description

For Gray Linen, please assign the full Gray Linen chair image. For Navy Velvet, please assign the full Navy Velvet chair image. For Brown Leather, assign the full Brown Leather chair image.

Step 8: Save and Publish the Product

After configuring the variations, click:

Save changes

Then click:

Publish

If you edited an existing product, click:

Update

Open the product page on the frontend. The Upholstery dropdown should now appear as image swatches.

Customers should see three visual options and be able to click the fabric or material they want.

Step 9: Test the Image Swatches

Test every option after adding image swatches.

Click Gray Linen and confirm:

• The swatch becomes selected
• The Gray Linen chair image appears
• The correct price loads
• The variation is available
• Add to Cart works

Repeat the same test for Navy Velvet and Brown Leather.

Also add each option to the cart and confirm that the correct variation name appears.

How the Swatch Image and Variation Image Work Together

The swatch image and the variation image have different roles.

The image swatches are small visual selectors. They help customers compare the available materials or patterns.

The variation image is the larger product image that appears after selection.

For example:

• Small linen texture swatch → Full Gray Linen chair image
• Small velvet texture swatch → Full Navy Velvet chair image
• Small leather texture swatch → Full Brown Leather chair image

Using both images creates a clearer product selection experience.

How to Add Image Swatches for Fabric Variations

For fabric products, create image swatches using close-up texture images.

Suitable examples include:

• Linen
• Velvet
• Cotton
• Canvas
• Wool
• Denim
• Suede
• Silk

Make sure each fabric image uses similar lighting and scale. If one swatch is heavily zoomed while another is too far away, customers may find the comparison confusing.

Fabric image swatches are especially useful for furniture, curtains, cushions, clothing, bedding, and upholstery products.

How to Add Image Swatches for Pattern Variations

Patterns should almost always use image swatches rather than solid colors.

Common pattern options include:

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

Crop each pattern so the design remains recognizable inside a small square thumbnail. Do not include too much empty background.

When a customer selects a pattern, the full product image should update to show how that pattern looks on the complete product.

How to Add Image Swatches for Material Variations

Material options may use labels, but image swatches are more useful when the surface appearance matters.

Good examples include:

• Smooth leather
• Distressed leather
• Suede
• Oak
• Walnut
• Marble
• Granite
• Brushed metal
• Glossy ceramic

A small material preview lets the shopper compare texture and finish before selecting the variation.

For stores selling furniture, flooring, countertops, bags, shoes, or decorative products, image swatches can communicate material differences more clearly than dropdown text.

Best Practices for Image Swatches

• Keep the Images Consistent: All image swatches should use the same dimensions, border style, crop, and visual scale. Consistency makes the selector look professional and easier to scan.
• Use Accurate Images: The swatch should match the actual variation. Do not use a light oak thumbnail for a dark walnut product.
• Make the Selected State Clear: Use a visible border, outline, checkmark, or background change so the customer can identify the active image swatch selection.
• Optimize the Files: Compress the thumbnails before uploading them. Swatch images do not need the same resolution as full product images.
• Add Tooltips: Tooltips can show names such as “Gray Linen” or “Brown Leather” when the user hovers over a swatch.
• Test on Mobile: Make sure the image swatches are large enough to tap and have enough spacing between them.

Common Image Swatch Problems

• The Product Still Shows a Dropdown: Check that the attribute type is set to Image and that the swatches plugin is active. Also confirm that the product uses the configured global attribute rather than a separate custom attribute.
• The Image Swatches Appear Blank: Open the attribute terms and confirm that each term has a swatch image assigned. Clear the website cache after uploading the images.
• The Product Image Does Not Change: Open each WooCommerce variation and assign the correct full product image. Remember that image swatches and variation images are configured separately.
• Add to Cart Is Disabled: Check that the selected variation has
  • A price
  • Valid stock status
  • The correct attribute term
  • An enabled variation
• The Swatches Look Blurry: Upload sharper source images and avoid enlarging very small thumbnails. Use consistent square images with a clear texture crop.
• The Wrong Variation Opens: Review the terms assigned to the product and ensure that each variation is mapped to the correct attribute term.

Add Image Swatches with GS Variation Swatches

GS Variation Swatches can help you replace a standard WooCommerce variation dropdown with visual image swatches for fabrics, patterns, textures, and materials.

Use it to create the Image attribute, upload reusable term thumbnails, assign those terms to variable products, and present each available option as a clickable visual selector.

Start with one test product and verify the complete selection, image update, cart, and mobile workflow before adding image swatches to the rest of the catalog.

Final Checklist

Before publishing a product with image swatches, confirm:

• The swatches plugin is active
• The attribute type is Image
• Every term has a clear thumbnail
• The product is variable
• Used for variations is enabled
• Every required variation exists
• Prices and stock are configured
• Full variation images are assigned
• The selected state is visible
• The product image updates correctly
• The cart shows the correct variation
• The swatches work on mobile

FAQs

Conclusion

Image Swatches are the best choice when customers need to compare fabrics, patterns, textures, or materials visually.

Create a reusable Image attribute, upload a clear thumbnail for each term, assign the terms to a variable product, generate the variations, and connect every option to the correct full product image.

The key is to keep the image swatches simple, accurate, consistent, and easy to select. Once the first product works correctly, you can reuse the same fabric, pattern, or material terms across other WooCommerce products.