Description
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.
Screenshots
Variation swatches displayed on a variable product page. 
Admin settings screen for global swatch options.
Installation
- Upload the plugin folder to
/wp-content/plugins/or install via the Plugins screen (ZIP). - Activate the plugin.
- Go to “B3 Swatches” to configure global settings.
- Configure attribute term swatches under Products > Attributes.
- Edit a variable product to override swatches per product when needed.
FAQ
-
Does it work without JavaScript?
-
Yes. The original WooCommerce variation dropdowns remain in the markup as a fallback. B3 Swatches enhances the form when JavaScript is available.
-
Can I override swatches per product?
-
Yes. You can set global defaults, override per-attribute term (Products > Attributes > Configure terms), and override per-variable product.
-
Will it work with my theme?
-
B3 Swatches is designed to work with properly-coded WooCommerce themes. It hooks into the standard variation form and enhances the dropdown selects.
If your theme or builder heavily customizes variation templates, try temporarily switching to a default WooCommerce theme to confirm whether the issue is theme-specific.
-
How do I set up swatches for an attribute?
-
- Go to Products > Attributes.
- Create/edit an attribute (e.g., Color).
- Click “Configure terms”.
- Set the swatch type and values for each term.
-
My swatches aren’t showing. What should I check?
-
Common causes:
- The product must be a Variable product with variations.
- The attribute must be used for variations.
- A caching/minification plugin may be delaying scripts; test with caching disabled.
- Some themes replace the variation form markup; test with a default theme to confirm.
-
What data does the plugin store?
-
Settings are stored in the
b3_wvs_settingsWordPress option. Attribute swatch data is stored as term meta (b3_wvs_type,b3_wvs_color, etc.). Per-product overrides are stored as post meta (_b3_wvs_overrides). Data is kept by default when you uninstall the plugin unless you enable the “Remove on uninstall” setting. -
Does the plugin clean up after itself?
-
Yes, when “Remove on uninstall” is enabled. By default the plugin keeps its data on uninstall. If you turn that setting on, deleting the plugin through the WordPress admin removes options, term meta, post meta, transients, and uploaded font files.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“B3 Swatches” is open source software. The following people have contributed to this plugin.
Contributors
“B3 Swatches” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “B3 Swatches” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.1
- Improved admin polish and frontend stability across the swatch settings experience.
- Added explicit WooCommerce dependency metadata and tightened package/build handling for more reliable releases.
- Fixed custom swatch-type selectors in the product and term editors, including better global attribute editing for Button swatches.
- Fixed frontend swatch runtime regressions, including grouped-product
Select optionslinks being intercepted by AJAX add-to-cart handling.
1.0.0
- Initial release.
- Added the free launch feature set: color and button swatches, wrap layout, square swatches, sizing controls, basic tooltip support, attribute-term controls, and per-product overrides.