Style swatches with CSS

Updated 13 November 2026

Since version 2.0.0, swatch size, borders, colours and fonts are styled with CSS instead of settings. You add your CSS on the Custom CSS tab, and it changes how swatches look on every page of your shop.

Where to add 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 doesn’t show.

Good to know:

• Only users who can edit unfiltered HTML can change this box. On a normal single site that’s administrators. Other users see the CSS read-only and can’t change it.
• The CSS is printed on every front-end page, in a <style id="c4d-woo-vs-custom-css"> tag in the page head. It comes after the 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 and any </style text, so only plain CSS is kept.
• If you updated from 1.x and had changed colours, sizes or borders, those styles are already in this box. See Upgrading from 1.x.

The class names

On the product page, each attribute becomes one row of swatches with this structure:

<div class="c4d-woo-vs-single-list-box c4d-woo-vs-type-color c4d-woo-vs-box-shape-circle">
  <label>Color</label>
  <div class="attribute-item active">
    <div class="out-stock">Out Of Stock</div>
    <div class="c4d-woo-vs-attribute c4d-woo-vs-attribute_pa_color-red">Red</div>
    <div class="multi-field"><input class="attribute-qty"></div>
  </div>
  ...
</div>

On shop and category pages, the swatches use these classes:

To find the class of anything else, right-click it on your site and choose Inspect.

A note on specificity

The plugin’s own CSS uses selectors of two to five classes. A rule with fewer classes loses even though it comes later. If a rule below 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. The examples below are written to win without !important.

Examples

Make the swatches smaller or larger

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 only switches between a circle and sharp corners. A border-radius rule gives you anything in between, and it wins over both shapes.

.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 with Out of stock options set to Show. 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 text buttons such as sizes

The second rule colours the selected button. The border width and style keep their defaults.

.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 isn’t called color, or for one swatch only. 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;
}
.c4d-woo-vs-box-colors .c4d-woo-vs-box-viewmore {
  font-size: 13px;
  align-self: center;
}

Tooltip text

The tooltip shows the option name. These rules change its size, padding and text colour on the product page and on shop pages.

body .c4d-woo-vs-single-theme.tippy-tooltip[data-size=small],
body .c4d-woo-vs-category-theme.tippy-tooltip[data-size=small] {
  font-size: 14px;
  padding: 6px 10px;
  color: #fff;
}

Quantity boxes of Multi Orders

.c4d-woo-vs-single-list-box .multi-field {
  width: 70px;
  height: 36px;
}

The attribute label above the swatches

.c4d-woo-vs-single-list-box label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

If a rule doesn’t work

• Clear your caching plugin and your browser cache.
• Check the selector with Inspect in your browser: 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.