FAIR

Federated and Independent Repositories

B3 Swatches

Plugin Banner

B3 Swatches

by b3digital

Download
Description

B3 Swatches replaces standard WooCommerce variation dropdowns with clear color, image, button, number, and dual-color choices for variable products.

Image swatches are free. Number and dual-color swatches are free too. Free also includes every shape, every selection style, five layouts, mobile presentation controls, customizable tooltips, quantity buttons, hover and glow effects, copy-and-paste product settings, and a real-time settings preview.

Pro extends that product-page toolkit with shop and archive swatches, AJAX add to cart with custom cart notices, variation-specific links and sharing, custom typography with locally hosted Google Fonts, stock-text styling, and saved-settings restore.

Why choose this plugin?

  • Complete Free toolkit – image swatches, mobile presentation, quantity controls, and out-of-stock handling are included.
  • Focused assets – the plugin uses separate frontend and admin bundles and enqueues them only in relevant contexts.
  • WooCommerce-first behavior – B3 Swatches enhances the standard variation form and keeps the native dropdown as a fallback.
  • Modern admin – a React-powered settings screen with a true live preview, so you see swatches change as you tweak them.
  • HPOS-compatible – works with WooCommerce High-Performance Order Storage.
  • Clear Free/Pro boundary – Free covers product-page swatches and presentation; Pro adds archive, cart, sharing, typography, and restore tools.

Free Features

Everything below is included free, forever:

  • Color swatches for attribute terms
  • Button/label swatches for any attribute
  • Image swatches from the media library
  • Number swatches
  • Dual-color (split) swatches for two-tone options
  • Layouts: Wrap, Grid, Flow, Pill, and Slider
  • Shapes: Square, Soft, Rounded, Squircle, Circle, Diamond, and Hexagon
  • Selector styles: Underline, Outline (configurable border width), and Background highlight
  • Out-of-stock swatch handling (blur, cross out, or hide) with optional add-to-cart blocking
  • Low-stock “Only N left” text for the selected variation (customizable, optional)
  • Tooltips with animations, fade controls, position, colors, typography, and a mobile cutoff
  • Swatch width, height, and spacing controls
  • Internal and external layout padding
  • Show labels on color and image swatches
  • Selected chip color customization
  • Heading color and size controls, plus label font-size control
  • Global settings UI with a real-time live preview
  • Automatic dropdown-to-swatch replacement
  • Automatic main product-image swap to the selected variation’s image
  • Attribute-term swatch configuration (Products > Attributes > Configure terms)
  • Per-product swatch overrides
  • Fallback to the native select when JavaScript is unavailable
  • Optional uninstall cleanup when “Remove on uninstall” is enabled
  • Slider layout selector-padding control
  • Dedicated mobile layout, shape, style, and spacing overrides
  • Custom quantity (+/-) button controls (style, position, sizing, colors, typography)
  • Hover animations, glow effects, and quantity animations
  • Container background styling for variation chips
  • Custom sizing for button/label swatches
  • Show/hide clear button and clear-on-reselect toggle
  • Copy/paste swatch settings between products

Pro Features

We keep the free/Pro line honest. Pro adds advanced merchandising, conversion, and branding tools – it does not hold the basics hostage:

  • Swatches on shop and archive pages (category, tag, and search) with position, size, and limit controls
  • AJAX add-to-cart with full backend, frontend, and compatibility settings
  • Custom cart notifications (toast, banner, inline, and modal types with full color and position controls)
  • Custom cart button styling (colors, typography, padding, borders)
  • Variation URLs for deep-linking to a specific variation
  • Share button plus social-share links (Facebook, X, Pinterest, Email)
  • Custom typography for headings, labels, and stock text
  • Google Fonts integration (self-hosted for privacy)
  • Stock text styling
  • AJAX variation threshold controls
  • Saved settings restore after re-licensing

Requirements:

  • WordPress 6.8+
  • WooCommerce 6.8+
  • PHP 7.4+
  • Safari 16.4+, Chrome 111+, or Firefox 128+ for the Tailwind 4 interface

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

Pro users: include the email used for purchase or license activation so we can locate your account.

Third Party Services

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

Google Fonts API

When a site administrator selects a Google Font in the plugin typography settings (Pro feature), the plugin fetches font files from Google Fonts and stores them locally for self-hosted serving.

No visitor data is sent to Google at runtime. Fonts are fetched once by the admin and served from the local server.

B3 Commerce

The Pro build connects to https://b3.digital only for license activation, entitlement refresh, account links, and signed update discovery/downloads. Activation sends the entered key and a site installation identifier. No visitor or storefront customer data is sent by this integration.

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:

  1. Install Node.js dependencies: npm install
  2. Install PHP dependencies: composer install
  3. 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.

  1. Install the Free plugin from WordPress.org, or upload a B3 Swatches ZIP through Plugins > Add New > Upload Plugin.
  2. Activate the plugin.
  3. Go to “B3 Swatches” to configure global settings with the live preview.
  4. Configure attribute term swatches under Products > Attributes > Configure terms (for example, set Color terms to color swatches or upload images for image swatches).
  5. Edit a variable product to override swatches per product when needed.
  6. If you use Pro, open the License panel and activate the key from your B3 Software account.
  1. Free image swatches on a variable product, with price, image, and add-to-cart updates.

    Free image swatches on a variable product, with price, image, and add-to-cart updates.

  2. Free dual-color swatches on a variable product.

    Free dual-color swatches on a variable product.

  3. The Free General settings and layout controls with the live preview.

    The Free General settings and layout controls with the live preview.

  4. Combine shapes and selection styles in Wrap, Grid, and Flow. Pill has a fixed shape; Slider uses its own outline.

    Combine shapes and selection styles in Wrap, Grid, and Flow. Pill has a fixed shape; Slider uses its own outline.

  5. Five free layouts - wrap, grid, flow, pill, and slider.

    Five free layouts - wrap, grid, flow, pill, and slider.

  6. Out-of-stock handling - blur, cross out, or hide unavailable variations.

    Out-of-stock handling - blur, cross out, or hide unavailable variations.

  7. Color, button, and size swatches make variation choices easier to scan on the product page.

    Color, button, and size swatches make variation choices easier to scan on the product page.

  8. Free includes five layouts, seven shapes, mobile presentation controls, quantity buttons, animations, and copy tools.

    Free includes five layouts, seven shapes, mobile presentation controls, quantity buttons, animations, and copy tools.

  9. Button, size, and number swatches - show S/M/L/XL or numeric options as tappable buttons.

    Button, size, and number swatches - show S/M/L/XL or numeric options as tappable buttons.

  10. Pro adds shop and archive swatches, AJAX cart tools, variation links, sharing, custom typography, and saved-settings restore.

    Pro adds shop and archive swatches, AJAX cart tools, variation links, sharing, custom typography, and saved-settings restore.

  11. Choose six motion styles plus Glow; None is also available when no hover effect is wanted.

    Choose six motion styles plus Glow; None is also available when no hover effect is wanted.

Are image swatches free?

Yes. Image swatches are included in the free version, along with color, button/label, number, and dual-color swatches.

What’s free vs Pro?

The free version covers all swatch types, all shapes, all selected styles, five layouts (Wrap, Grid, Flow, Pill, Slider), out-of-stock handling, tooltips with animations, per-product overrides, and the live-preview admin. Pro adds shop/archive swatches, AJAX add-to-cart with custom cart notices, variation share URLs and social sharing, custom typography with self-hosted Google Fonts, and saved-settings restore. Font management and heading/label typography remain Pro; quantity typography and tooltip font-family selection are Free.

Is it fast? Will it slow down my store?

The plugin uses separate frontend and admin bundles and conditionally enqueues assets in relevant product and settings contexts. Store performance also depends on the theme, extensions, hosting, caching, and the number and structure of product variations, so test representative products on your own stack.

Does it work with my page builder or theme?

B3 Swatches enhances the standard WooCommerce variation form. Themes or builders that replace that markup may require compatibility work. If swatches do not appear, switch temporarily to a default WooCommerce-compatible theme to confirm whether the variation template is the cause.

Is it compatible with WooCommerce HPOS?

Yes. The plugin is compatible with WooCommerce High-Performance Order Storage (HPOS).

How do I set up swatches for an attribute?

  1. Go to Products > Attributes.
  2. Create or edit an attribute (for example, Color or Size).
  3. Click “Configure terms”.
  4. Set the swatch type (color, image, button, number, or dual-color) and values for each term.

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.

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.

My swatches aren’t showing. What should I check?

  • 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_settings WordPress option. Attribute swatch data is stored as term meta (b3_wvs_type, b3_wvs_color, b3_wvs_label, etc.). Per-product overrides are stored as post meta (_b3_wvs_overrides), and Pro can also store restore metadata, variation URLs, and local font files. Data is kept by default when you uninstall the plugin unless you enable the “Remove on uninstall” setting. On multisite, that choice is honored independently for each site.

How do I activate my Pro license?

After installing and activating the Pro build, open the License panel in B3 Swatches and enter the activation key from your B3 Software account. B3 Commerce validates a signed entitlement for this site and delivers signed updates. Your existing free settings are preserved.

What are Variation URLs and how do I use them?

Variation URLs let you share a link that preselects a specific variation on page load. Enable Variation URLs in the Pro settings, then copy the generated link for the variation you want to share.

1.1.1

  • Update dependencies used by the plugin’s build and packaging tools.
  • Fix a Composer autoloader conflict during packaging.
  • Verify compatibility with WordPress 7.1.3 and WooCommerce 11.2.1.

1.1.0

Major free-tier expansion plus accessibility, performance, and reliability fixes.

  • Replaced the legacy licensing integration with B3 Commerce for Pro entitlement and signed updates. Existing customer licenses do not require migration.
  • Free tier expanded: image, number, and dual-color swatches; all shapes (including Circle, Diamond, and Hexagon); the Outline and Background selector styles; the Grid, Flow, Pill, and Slider layouts; out-of-stock handling; and tooltip animations are now included free.
  • Accessibility improvements: associated labels/accessible names for sliders, color pickers, and the shape/style/layout pickers; a polite live region for admin notices; and fixes for select controls.
  • Performance and reliability: capped the admin usage-stats scan, batched archive term lookups, fixed React rendering edge cases, hardened AJAX add-to-cart de-duplication, and validated self-hosted font downloads.
  • Hardened uninstall cleanup so plugin data is removed across all sites on multisite networks.
  • Tested up to WordPress 7.1 and WooCommerce 11.1.

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 options links being intercepted by AJAX add-to-cart handling.
  • Improved Pro controls and previews for tooltips, quantity settings, share icons, Google Fonts, and the Flow layout preview.
  • Fixed several Pro-only interaction issues, including touch hover states, quantity button injection when the default quantity style is selected, and other premium layout/animation regressions.

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.
  • Added the Pro launch feature set: image, number, and dual-color swatches; advanced layouts, shapes, and styling; archive swatches; variation URLs; AJAX add to cart; share tools; extended cart and quantity controls; Google Fonts; and saved-settings restore.
Back to top