View Categories

How to Change the Size and Shape of WooCommerce Variation Swatches

0:00 2:12
Table of Contents

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.