View Categories

How to Add Label (Text) Swatches to WooCommerce Products

0:00 2:03
Table of Contents

To add label swatches with Variation Swatches for WooCommerce – Color & Image Swatches, go to Products > Attributes, add an attribute such as Size, and set its Type to Label. Then click Configure terms, type the swatch text for each term in the Label field, and use the attribute on a variable product.

Before you start #

  • WooCommerce, active.
  • Variation Swatches installed and enabled.
  • A variable product to attach the attribute to.

Step 1: create a Label attribute #

  1. Go to Products > Attributes.
  2. Click Add new attribute, give it a Name such as Size, and set a Slug.
  3. In the Type dropdown, choose Label.
  4. Click Add attribute.

Step 2: set the label text on each term #

  1. Next to the attribute, click Configure terms.
  2. Enter a Name for the value, for example Large.
  3. In the Label field, type the text to show on the swatch, for example L. This field is added by Variation Swatches and is stored in the term meta key alg_wc_civs_term_label_label.
  4. Save the term and repeat for every option.

Tip: keep label text short, one to three characters or a single word, so the buttons stay a consistent size. You can restyle them with CSS: see How to change the size and shape of variation swatches.

Step 3: use the attribute on a variable product #

  1. Edit a product and set Product data to Variable product.
  2. On the Attributes tab, add the Label attribute, select its values, tick Used for variations, and save.
  3. Create the variations, then view the product: the text buttons replace the variation dropdown.

Mix swatch types #

You can combine types on one product, for example color swatches for the shade and label swatches for the size. Each attribute is styled by its own type.

Troubleshooting #

  • Empty buttons: a term has no label text. Edit the term and fill in the Label field.
  • Swatches do not appear: confirm the attribute Type is Label, the attribute is Used for variations, and Enable Plugin is ticked at WooCommerce > Settings > Variation swatches.

Do more with your swatches #

Label swatches are free. Variation Swatches for WooCommerce – Color & Image Swatches Pro adds only-valid-combination filtering, gallery images, and Select2 dropdowns. See what Pro unlocks.