---
title: How to Change the Size and Shape of WooCommerce Variation Swatches
description: "Change the size and shape of WooCommerce variation swatches with CSS: the classes to target, bigger swatches, and round color swatches."
url: "https://wpfactory.com/docs/style-and-resize-variation-swatches-css/"
updated: "2026-09-27"
category: How to
---

# How to Change the Size and Shape of WooCommerce Variation Swatches

To change the size and shape of swatches from Variation Swatches for WooCommerce - Color & Image Swatches, add CSS in Appearance > Customize > Additional CSS or your child theme's stylesheet. Target .alg-wc-civs-term for a single swatch, which defaults to 36px with a 2px solid #ccc border. The plugin has no appearance settings.

### Where to add the CSS

Put these rules in **Appearance > Customize > Additional CSS**, or in your child theme's stylesheet. Nothing here touches the plugin files, so updates will not overwrite your changes.

### The classes to target

| Selector | What it is |
| --- | --- |
| `.alg-wc-civs-attribute` | The container that holds one attribute's swatches |
| `.alg-wc-civs-term` | A single swatch. Defaults: `min-width` and `height` 36px, 2px solid #ccc border |
| `.alg-wc-civs-term.color` | A color swatch |
| `.alg-wc-civs-term.image` | An image swatch |
| `.alg-wc-civs-term.label` | A label (text) swatch. Default font size 17px |
| `.alg-wc-civs-term.active` | The currently selected swatch (darker border plus shadow) |
| `.alg-wc-civs-term.disabled` | A swatch dimmed by the Pro "Only valid combinations" option |
| `.alg-wc-civs-term-pointer` | The small underline shown under the selected swatch (Pro) |

### Make the swatches bigger

```
.alg-wc-civs-term {
    min-width: 48px;
    height: 48px;
    line-height: 44px; /* keep label text centered vertically */
}
```

### Make color swatches round

```
.alg-wc-civs-term.color {
    border-radius: 50%;
}
```

### Round image swatches with softer corners

```
.alg-wc-civs-term.image {
    border-radius: 8px;
}
```

### Restyle the label buttons

```
.alg-wc-civs-term.label {
    font-size: 15px;
    padding: 0 12px;
    border-radius: 4px;
    background: #f4f5f7;
}
```

### Change the selected-swatch highlight

```
.alg-wc-civs-term.active {
    border-color: #2271b1;
    box-shadow: none;
}
```

### Adjust the spacing between swatches

```
.alg-wc-civs-attribute .alg-wc-civs-term {
    margin-right: 10px;
}
```

**Note:** if a rule seems to have no effect, your theme's own styles may be more specific. Add the product-page context, for example `.single-product .alg-wc-civs-term { ... }`, or increase specificity rather than reaching for `!important`.

### Swatches only styled on product pages?

By default the plugin loads its CSS on single product pages only. If you want styled swatches on shop or category pages too, turn off **Scripts Only on Product Page** at **WooCommerce > Settings > Variation swatches**.

### Need a hand?

Our team answers every ticket on the [Variation Swatches support forum](https://wpfactory.com/support/item/color-or-image-variation-swatches-for-woocommerce/).

Related articles

- [Variation Swatches Settings Reference](https://wpfactory.com/docs/variation-swatches-settings-reference/)
- [Variation Swatches Developer Reference: Hooks, Meta Keys and CSS Classes](https://wpfactory.com/docs/variation-swatches-developer-reference/)
- [Troubleshooting Variation Swatches for WooCommerce](https://wpfactory.com/docs/troubleshooting-variation-swatches-for-woocommerce-color-image-swatches/)
- [Variation Swatches General Options and Pro Settings](https://wpfactory.com/docs/general-options-swatch/)
- [Getting Started with Variation Swatches for WooCommerce](https://wpfactory.com/docs/install-variation-swatches/)