Smartly Show Selected Color or Size Names Beside WooCommerce Swatches

WooCommerce variation swatches make product choices easier to understand visually. Customers can click a color circle, image, or size button instead of using a standard dropdown.

But there is one common usability problem. After clicking a swatch, shoppers may see which option is selected visually, yet they may not clearly know the actual color or size names they chose.

Showing those names beside the swatches makes the selection much clearer, especially when colors look similar or size buttons use abbreviations.

Here is how to handle it properly.

Why Showing Selected Variation Names Matters

Visual swatches are useful because customers can quickly scan available options.

However, visual feedback alone is not always enough.

Imagine a product with colors such as:

• Navy Blue
• Midnight Blue
• Royal Blue
• Sky Blue

The swatches may look different, but the difference between them can still be difficult to understand.

Displaying the selected color or size names beside the variation label removes that confusion.

Instead of seeing only the following:

Color

the customer could see the following:

Color: Navy Blue

The same idea works for sizes:

Size: Large

This small improvement gives customers stronger confirmation before they add the product to their cart.

1. Check Whether Your Swatches Plugin Supports Selected Labels

Before adding custom code, check your variation swatches plugin settings.

Many modern WooCommerce swatches plugins already include an option for displaying selected variation values.

Look through settings related to:

• Selected attribute name
• Selected variation label
• Show selected value
• Variation title
• Attribute label
• Selected term
• Tooltip or label display

The wording will depend on the plugin you use.

If there is already a built-in option to show color or size names, using it is usually the safest solution.

Built-in functionality is easier to maintain because you do not need to worry about custom JavaScript breaking after a WooCommerce or theme update.

2. Check the Individual Attribute Settings

Some plugins control selected labels globally, while others let you configure them separately for each attribute.

Go to:

Products → Attributes

Then edit the relevant attribute, such as:

Color

or:

Size

Check whether the plugin adds additional settings for that attribute.

For example, you may discover options such as the following:

• Show selected term
• Display value beside label
• Label position
• Tooltip text
• Attribute title format

If you want color or size names to appear beside the swatches, ensure that the selected value option is enabled.

Please save the attribute and then test the product page again.

3. Make Sure Your Attribute Terms Have Clear Names

Displaying selected variation values only helps when the attribute terms themselves are meaningful.

For example, avoid vague term names such as the following:

• Color 1
• Color 2
• Dark
• Light

Instead, use customer-friendly names such as the following:

• Forest Green
• Rose Pink
• Charcoal Black
• Ocean Blue

The same applies to size attributes.

Instead of relying solely on short labels such as S, M, and L, you can use clearer names when appropriate:

• Small
• Medium
• Large
• Extra Large

Your swatches can still display compact buttons, while the selected color or size names provide clearer feedback beside the attribute label.

4. Global Attributes Usually Work Better

If the swatches plugin cannot correctly detect the selected value, check whether you are using global WooCommerce attributes.

Global attributes are created from:

Products → Attributes

You can create:

Color

and then add terms such as

• Red
• Blue
• Green
• Black

You can do the same for Size.

Some swatch plugins work better with global attributes because each term has a consistent WooCommerce taxonomy.

Custom attributes created manually inside individual products may not provide the same level of control.

If color or size names are not appearing correctly, switching to global attributes is worth testing.

5. Show the Selected Value Beside the Attribute Label

A useful layout is to display the current choice directly beside the attribute name.

For example:

Color: Black

or:

Size: Medium

This works well because customers naturally look at the variation label before reviewing the options below it.

When they click another swatch, the selected text should update immediately.

For example:

Color: Black

becomes:

Color: Red

without refreshing the page.

This provides customers instant confirmation that WooCommerce registered their selection correctly.

6. Keep the Label Close to the Swatches

Placement matters.

If you show color or size names far away from the actual swatches, shoppers may not immediately understand what the text represents.

The selected name should ideally appear as follows:

• Beside the attribute label
• Directly above the swatches
• Directly below the selected swatch area

For most product pages, placing it beside the attribute label is the cleanest solution.

You should also avoid adding unnecessary headings or large text because the selected value is supporting information, not the main product title.

A simple structure works best:

Color: Lavender

● ● ● ●

7. Make Sure the Name Updates When Customers Change Options

One important detail is dynamic updating.

Suppose a customer selects:

Blue

and then changes the choice to:

Green

The displayed text should update immediately to Green.

If it remains Blue, the interface becomes misleading.

Variation swatches usually use JavaScript to track selections. Your plugin needs to update the displayed color or size names whenever a swatch changes.

Test several combinations before considering the feature complete.

Try:

• Changing Color multiple times
• Changing Size multiple times
• Changing both Color and Size
• Resetting variations
• Selecting unavailable combinations

The selected text should always match the active variation.

8. Handle Reset Variation Properly

WooCommerce variable products often have a Clear or Reset variations option.

When the customer resets the product, the selected label should also reset.

For example:

Before reset:

Color: Blue

After reset:

Color

or:

Color: Choose an option

If the page still displays Blue after the selection has been cleared, customers may think that Blue is still selected.

This is another reason why using your swatches plugin’s native selected-value feature is preferable when available.

9. Test Mobile Product Pages

Do not check the feature only on desktop.

On smaller screens, long color or size names can wrap onto another line or push the swatches out of alignment.

For example:

Color: Limited Edition Midnight Blue

takes considerably more space than:

Color: Red

Open the product page on different screen sizes and confirm that the selected name remains readable without damaging the layout.

A simple responsive label usually works better than a heavily styled badge.

10. Avoid Making the Interface Too Busy

The purpose of displaying color or size names is clarity.

It should not complicate the variation section.

Avoid combining too many visual elements at the same time, such as:

• Large tooltips
• Multiple labels
• Badges
• Icons
• Long descriptions
• Popups

If the customer clicks a red swatch, it simply shows the following:

Color: Red

is usually enough.

Good WooCommerce product design helps customers make decisions without forcing them to consider the interface itself.

FAQs

Conclusion

Showing color or size names beside WooCommerce swatches is a small change that can make variation selection much clearer.

Start by checking whether your swatches plugin already supports selected labels. Then review the attribute settings, use clear global attribute terms, and make sure the selected value updates correctly when customers change or reset their options.

The goal is simple: let shoppers see exactly what they selected without adding unnecessary complexity to the product page.