B3 Swatches replaces WooCommerce variation dropdowns with fast, modern, and responsive swatches for variable products.

This version includes the feature set: color and button swatches, base layout and sizing controls, tooltip toggles, and per-product overrides.

Features

Color swatches for attribute terms
Button/label swatches for any attribute
Wrap layout for swatch display
Square swatch shape
Underline selector style
Swatch width and height controls
Internal and external layout padding
Show labels on color swatches
Selected chip color customization
Heading color and size controls
Label font-size control
Global settings UI with a live preview
Basic tooltip support (enable/disable)
Automatic dropdown-to-swatch replacement
Attribute-term swatch configuration (Products > Attributes > Configure terms)
Per-product swatch overrides for shared swatch types
Fallback to native select when JavaScript is unavailable
Optional uninstall cleanup when “Remove on uninstall” is enabled

Requirements:

WordPress 6.8+
WooCommerce 6.8+
PHP 7.4+

Support

If you need help, please start by checking the FAQ below.

To request support, use the support channel where you installed the plugin (for example, the WordPress.org support forum or the support channel on the plugin website).

When contacting support, please include:

WordPress version
WooCommerce version
Theme name
A short list of other active plugins
Steps to reproduce (and the product URL if possible)

Supported:

Standard WooCommerce variation forms and templates
Most properly-coded themes that do not replace the variation form markup
Configuration questions (global settings, attribute terms, per-product overrides)

Not supported:

Custom themes/builders that replace or heavily rewrite the WooCommerce variation form
Debugging issues caused by custom code snippets that modify variation selection behavior

Third Party Services

This plugin connects to the following external services under certain conditions:

Freemius SDK

This plugin uses the Freemius SDK for optional usage analytics. When a site owner opts in during onboarding, limited site and usage data may be sent to Freemius servers.

The plugin also includes assets/freemius-pricing.css and assets/freemius-account.css, which are styling companions for the Freemius SDK pricing/account screens. They are part of the Freemius integration surface and do not add swatch, cart, share, or other plugin feature logic.

Freemius homepage: https://freemius.com
Freemius Terms of Service: https://freemius.com/terms/
Freemius Privacy Policy: https://freemius.com/privacy/

Source Code & Build Tools

This plugin includes pre-built JavaScript and CSS files in the dist/ directory. The original source code is included in the src/ directory. To build from source:

Install Node.js dependencies: npm install
Install PHP dependencies: composer install
Build for production: npm run build

The build process uses Vite (vite.config.ts) and TypeScript (tsconfig.json). See package.json for all available scripts.