Swatch – Variation Swatches for WooCommerce

Description

Swatch replaces WooCommerce’s default variation <select> dropdowns with visual, accessible swatches on single product pages. Choose a swatch type per attribute (colour dots or button/label pills) and assign a colour or label per term.

The swatches drive WooCommerce’s own variations form, so price, stock and the add-to-cart button update exactly as they do with the stock dropdowns. Selected and out-of-combination states are reflected automatically.

The full source lives on GitHub at github.com/wppoland/plogins-swatch if you want to read the code or report a problem.

Features

• Colour and button/label swatch types.
• Per-attribute type selection on the global attribute screen.
• Per-term colour (sanitize_hex_color) and custom label, stored as term meta.
• Wires into WooCommerce’s native variations form, no jQuery, vanilla JS.
• Keyboard operable (radiogroup semantics, arrow keys) and screen-reader labelled.
• Focus-visible rings, sufficient contrast, reduced-motion friendly, no layout shift.
• Graceful fallback to the standard dropdown when an attribute has no swatch data.
• Swatches in shop and category listings too, off by default so your shop page does not change without you asking.
• Settings page under WooCommerce: enable/disable, default swatch type and the shop-listing switch.

Self-contained. No external services, no account, no third-party dependencies.

External Services

Swatch does not connect to any external services. It makes no outbound HTTP requests, loads no remote scripts, fonts or CDN assets, and sends no telemetry or analytics. There is no account or API key.

Everything is stored in your own database: the swatch type per attribute, the global defaults and a schema version are kept in the swatch_attribute_types, swatch_settings and swatch_db_version options, and each term’s colour and label are stored as the swatch_color and swatch_label term meta on your WooCommerce attribute terms. The plugin sends no email.

Translations

Plogins Swatch is fully translatable and ships the plogins-swatch.pot template. Translations are delivered by WordPress.org language packs from translate.wordpress.org, which is where Polish, German and Spanish are being contributed; the package itself carries no compiled translation files.

Technical details