Getting started

Most shops can show their first swatch in a few minutes. Swatch ships enabled — install, tune the defaults, assign colours.

Before you start

• WordPress 6.5 or newer
• WooCommerce active (variable products configured)
• PHP 8.1 or newer

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.

First configuration

Open WooCommerce → Swatch in wp-admin:

• Enable swatches — master switch.
• Default type — colour dots or button/label pills, used unless an attribute overrides it.
• Size and shape — swatch dimensions and corner style.
• Tooltip — show the term name on hover/focus.

Then on Products → Attributes, open a global attribute and choose its swatch type, and set a colour or label on each attribute term.

Verify on the storefront

1. Open a variable product that uses a 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.
3. Try a combination that is out of stock — the unavailable swatches should reflect that state.
4. Keyboard test — tab to the swatches and use arrow keys; focus rings should be visible and the choice should register.

Fallback behaviour

Attributes you have not configured keep WooCommerce’s standard dropdown. A colour-type attribute with no colours set falls back to the dropdown automatically, so nothing ever breaks.

Free vs PRO

The free edition covers colour and button/label swatches, per-attribute type, per-term colour/label and the settings page.

Swatch PRO (planned) adds image swatches, per-variation images, richer tooltips and swatches in shop/archive listings — not basic swatch rendering.

Need help?

• Swatch overview — features and fallback behaviour
• GitHub issues
• Swatch on plogins.com