PlugIndex

Directory / plugin

B3 Swatches

v1.1.2 · by b3digital

Turn WooCommerce dropdowns into color, image, button, number, and dual-color swatches. Image swatches and live preview are free.

View on WordPress.orgHomepage

About this plugin

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.

Plugin tags