Zum Inhalt springen
WooCommerce & WordPress Plugin Docs

Getting started

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Swatch ships enabled. Once WooCommerce is active and a global attribute has colours or labels set, the swatches appear on your variable products, most shops are showing colour swatches within a few minutes.

Before you start

Section titled “Before you start”
  • WordPress 6.5 or newer
  • WooCommerce active, with at least one variable product built from a global attribute (Products → Attributes), not a product-level custom attribute
  • PHP 8.1 or newer

The colour/label fields attach to global attribute taxonomies (pa_color, pa_size, …). Custom attributes typed directly into a single product have no taxonomy and no terms, so they always use the dropdown.

Install

Section titled “Install”
  1. Install WooCommerce and make sure it is active.
  2. Install Swatch from the plugin directory (when live on WordPress.org) or upload the swatch folder to /wp-content/plugins/.
  3. Activate the plugin. No setup wizard runs, the defaults work immediately.

Set the store default

Section titled “Set the store default”

Open WooCommerce → Swatch. The settings screen has exactly two controls:

  • Enable swatches, the master switch (on by default). When off, no swatch styles or scripts load and every attribute reverts to the standard dropdown. Your per-term colours and labels are kept.
  • Default swatch type, Button / label or Colour, applied to any attribute you have not given its own type.

There is no size, shape or tooltip setting; sizing and colours are CSS custom properties you can re-theme from your stylesheet (see Configuration).

Choose the type per attribute and add colours

Section titled “Choose the type per attribute and add colours”

On Products → Attributes, open a global attribute (for example Colour):

  1. Set its Swatch type, Use plugin default, Button / label, or Colour.
  2. Open the attribute’s terms (Configure terms). On each term set a Swatch colour (a hex value, used by colour swatches) and/or an optional Swatch label (short text for button swatches; defaults to the term name).

A typical store sets Colour to the colour type with a hex per term, and leaves Size on button/label.

Verify on the storefront

Section titled “Verify on the storefront”
  1. Open a variable product that uses the configured attribute, the dropdown should be replaced by swatches.
  2. Select a swatch, price, stock and the add-to-cart button should update like the native dropdown, and re-clicking the active swatch clears it.
  3. Pick a combination so another attribute has invalid options, those swatches should grey out with a diagonal strike.
  4. Keyboard test, Tab to the group, move with arrow keys, choose with Space/Enter; the focus ring should be visible throughout.

Fallback behaviour

Section titled “Fallback behaviour”

Attributes you have not configured keep WooCommerce’s standard dropdown. A colour-type attribute with no colours set on any term falls back to the dropdown automatically, so a half-finished attribute never breaks the page. You can roll Swatch out one attribute at a time.

Need help?

Section titled “Need help?”