How to add swatches fields in WooCommerce

Enhancing your WooCommerce product pages with color swatches can dramatically improve the shopping experience. Instead of standard dropdowns, shoppers can select product colors visually through color or image swatches. With WCB Configurator Builder, adding both types of swatches is quick and intuitive.

In this guide, you’ll learn step-by-step how to add color and image swatches fields using WCB Configurator Builder. No coding required.

What are swatches in WooCommerce?

Swatches are interactive visual selectors that replace traditional dropdowns or radio buttons for product attributes like color, material, or style. Instead of reading through text-based options, customers can see and click the option they want. This makes the selection process easier and more engaging.

There are two main types of swatches:

Color swatches

Color swatches are small colored boxes that represent a specific shade or hue. These are commonly used for products like clothing, accessories, or home decor where the exact color matters to the buyer.

Example: Red, Blue, Green color blocks for a T-shirt.

• Helps customers quickly identify color options
• Reduces confusion caused by vague color names
• Can be styled as circles or squares

Image swatches

Image swatches are small thumbnails or previews of a texture, pattern, fabric, or style. These are ideal when color alone doesn’t tell the whole story—like in cases of patterned fabrics, leather types, or product finishes.

Example: A swatch showing denim texture, wood grain, or floral fabric.

• Provides more context than flat colors
• Useful for showcasing material, pattern, or style
• Can reflect real product appearance more accurately

Why use color swatches in WooCommerce?

1. Visual selection
   Helps customers choose colors more intuitively
2. Improved UX
   Eliminates the need for text-based color lists
3. Higher engagement
   Interactive elements boost customer interest
4. More professional look
   Great for fashion, accessories, decor, and custom products

How to add color and image swatches in WooCommerce

Now that you know what swatches are and how they improve UX, let’s dive into how to add them in your WooCommerce store using WCB Configurator Builder.

Prerequisites

Before getting started, make sure you have the following:

• A WooCommerce store set up
• The WCB Configurator Builder plugin installed and activated
• A few simple products set up to link swatches fields to

Step 1: Create a color or image swatches field

Let’s create a new field in WCB:

1. Log in to your WordPress Dashboard.
2. Head over to WCB > Choices and click the button “Add new”
3. On the edit choice page, select Swatches as the field template.
4. Set a Label (e.g., “Choose a Color” or “Select a Fabric”).
5. Choose the type:
   • Color for flat color blocks
   • Label for pattern previews or real product thumbnails

Step 2: Add color or image swatches options

To set up color-based swatches:

1. Click Add option.
2. Set the Label (e.g., “Red”).
3. Choose the Color code (e.g., #FF0000 for red).
4. Repeat for each color.

To use image swatches instead of flat colors:

1. Choose type of Label and make sure field thumbnails are enabled
2. For each swatch option:
   • Set the Label (e.g., “Leopard Print”).
   • Set the Value (must match WooCommerce attribute).
   • Upload an Image that visually represents the option (fabric, pattern, texture, etc.).
3. Make sure the images are optimized (ideally 100x100px or similar) for fast loading.

Image swatches are great for stores selling fashion, furniture, or any visually distinct styles!

Step 3: Create your WCB configuration

1. Navigate to WCB > Configurations.
2. Edit an existing configuration or click Add New.
3. In the builder interface, add a new Choice block
4. Select your newly created Swatches field

Step 4: Link configuration to products

To make swatches appear on your product pages:

1. On the configuration page, scroll down to “Configurator data” section
2. For display type, select Product instead of Shortcode
3. Select the products you want the swatches field to appear on
4. Click Save Configurator.

Step 5: Update product visuals (optional)

You can also update the product image(s) based on the selected swatches options

1. Head over to WCB > Visuals
2. Create a new visual group
3. Upload your visual images
4. Link the image to the field swatch option
5. Save the visual group

Step 6: Save and test

1. Visit your product page.
2. Test both color and image swatches to ensure they work on desktop and mobile.

Tips for better color swatches

• Use rounded or square swatch styles based on your brand look.
• Add labels to swatches for accessibility and SEO (e.g., “Royal Blue”).
  You can show labels by enabling the swatch summary in WCB > Choice > Details tab
• Optimize swatch layout for mobile users.
• Combine with image change triggers for a better preview experience.

Final thoughts

Adding a color swatches field in WooCommerce with WCB Configurator Builder is one of the easiest ways to elevate your online store’s user experience.

Whether you’re selling apparel, customizable products, or tech accessories, color and image swatches add professionalism and clarity to the product selection process.

With WCB Configurator, the entire process is visual, intuitive, and flexible. Perfect for store owners who want customization without code.