How to style WooCommerce variation swatches with CSS (size, shape, border, selected)

By the coffee4dev team, 13 November 2026. 5 min read.

The default swatches work, but they may not match your theme. Maybe the dots are too big, you want rounded squares, or the selected swatch needs a border that fits your brand colour.

Since version 2.0.0, C4D Variation Swatches & Gallery styles swatches with CSS instead of size, colour and border settings. That means you can change anything, and this guide gives you rules you can paste.

Where to put your CSS

1. Go to C4D Swatches › Custom CSS.
2. Paste your rules in the box and click Save Changes.
3. Reload a product page. Clear your caching plugin first if the change does not show.

Good to know:

• Only users who can edit unfiltered HTML can change the box. On a normal single site that means administrators. Other users see the CSS read-only.
• The CSS is printed on every front-end page, in a <style id="c4d-woo-vs-custom-css"> tag in the head. It comes after your theme’s stylesheets and the plugin’s own CSS, so when two rules have the same weight, yours wins.
• The plugin removes HTML tags from the box, so only plain CSS is kept.

The class names

On the product page, each attribute is one row of swatches. These are the classes you will use most:

On shop and category pages, the row is .c4d-woo-vs-box-colors and each swatch is .c4d-woo-vs-box-color.

A note on specificity

The plugin’s own CSS uses selectors with two to five classes. A rule with fewer classes loses even when it comes later. The examples below have enough classes to win without !important. If one seems to do nothing, check that your selector has at least as many classes as the one it should override, or add !important to the value.

Examples

Smaller or larger swatches

The default is 50 px with an 8 px margin.

.c4d-woo-vs-single-list-box.c4d-woo-vs-type-color .c4d-woo-vs-attribute,
.c4d-woo-vs-single-list-box.c4d-woo-vs-type-image .c4d-woo-vs-attribute {
  width: 36px;
  height: 36px;
  line-height: 36px;
  margin: 6px;
}

Rounded squares instead of circles

The Swatch shape setting on the Gallery & zoom tab only switches between a circle and sharp corners. A border-radius rule gives you anything in between.

.c4d-woo-vs-single-list-box.c4d-woo-vs-type-color .c4d-woo-vs-attribute,
.c4d-woo-vs-single-list-box.c4d-woo-vs-type-image .c4d-woo-vs-attribute {
  border-radius: 8px;
}

A thin border, so white swatches show on a white page

.c4d-woo-vs-single-list-box.c4d-woo-vs-type-color .c4d-woo-vs-attribute,
.c4d-woo-vs-single-list-box.c4d-woo-vs-type-image .c4d-woo-vs-attribute {
  border: 1px solid #d0d0d0;
}

Change the border of the selected swatch

The default is a 4 px green border.

.c4d-woo-vs-single-list-box.c4d-woo-vs-type-color .attribute-item.active .c4d-woo-vs-attribute,
.c4d-woo-vs-single-list-box.c4d-woo-vs-type-image .attribute-item.active .c4d-woo-vs-attribute {
  border: 3px solid #111;
}

Highlight a swatch on hover

.c4d-woo-vs-single-list-box .attribute-item:hover .c4d-woo-vs-attribute {
  opacity: 1;
  transform: scale(1.08);
}

Fade sold-out options

This works when Out of stock options is set to Show on the Product page tab. The second rule restyles the label.

.c4d-woo-vs-single-list-box .attribute-item.outstock .c4d-woo-vs-attribute {
  opacity: 0.35;
}
.c4d-woo-vs-single-list-box .attribute-item .out-stock {
  font-size: 11px;
  color: #b00020;
  border-color: #b00020;
}

Style the text buttons, such as sizes

The second rule colours the selected button.

.c4d-woo-vs-single-list-box.c4d-woo-vs-type-text .attribute-item .c4d-woo-vs-attribute {
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 38px;
  padding: 0 16px;
  text-transform: none;
  color: #333;
}
.c4d-woo-vs-single-list-box.c4d-woo-vs-type-text .attribute-item.active .c4d-woo-vs-attribute {
  border-color: #111;
  background-color: #111;
  color: #fff;
}

Set the colour of one option

Useful when your colour attribute is not called color. Replace pa_colour and sage with your attribute’s internal name and the option’s slug.

.c4d-woo-vs-single-list-box .c4d-woo-vs-attribute_pa_colour-sage {
  background-color: #9caf88;
}

Swatches on the shop page

The default is 12 px with a 5 px margin.

.c4d-woo-vs-box-colors .c4d-woo-vs-box-color {
  width: 20px;
  height: 20px;
  margin: 4px;
}

Find the right class yourself

For anything not listed here, use your browser’s inspector.

1. Open the page, right-click the thing you want to change and choose Inspect.
2. Look at the highlighted element and its parents for classes that start with c4d-woo-vs- or are called attribute-item.
3. In the box showing the CSS rules, check what the plugin or your theme already sets, such as width or border.
4. Write a selector with at least as many classes as the rule you want to beat.
5. Try your rule live in the inspector first, then paste it into the Custom CSS box.

If a rule does not work

• Clear your caching plugin and your browser cache.
• Check the selector in the inspector: the classes must match what you see.
• Some themes style swatches or add-to-cart forms with very specific selectors. Add !important to the value, or add a class from your theme to your selector.

What changed in 2.0

Before version 2.0.0, swatch size, colours, borders and fonts were settings. They were removed and replaced by CSS, so there is one place to style everything. If you updated from 1.x and had changed these, your old styles were copied into the Custom CSS box under a comment line. Upgrading from 1.x explains what was converted.

See it working

Open the everyday tee in the demo store and try the inspector on its swatches before you change your own shop.

Questions

Will my CSS survive a plugin update? It is saved in the plugin’s settings, not in the plugin’s files, so an update does not remove it.

Can I change the tooltip? Yes, with CSS. The CSS docs page has a rule for the tooltip text.

Does it cost anything? No. The plugin is free.

For the full list of settings, see the settings reference. If you also want a photo set per colour, see our gallery guide, or go to the plugin page.