B3 logoB3Docs

B3 Swatches Documentation

B3 Swatches docs

Reference docs for configuring B3 Swatches: swatch types, layouts, product overrides, sharing, and storefront behavior.

B3 Swatches replaces WooCommerce variation dropdowns with visual selectors and gives you control over swatch styling, per-product overrides, shop-loop output, and variation sharing. These docs track the current plugin UI and the storefront behavior it actually ships.

Browse docs

Start here

What B3 Swatches does

WooCommerce store owners, implementers, and support teams who need accurate setup and troubleshooting guidance for the current B3 Swatches plugin.

Start with setupInstall the plugin, enable dropdown conversion, and verify swatches on a real variable product.Assign swatch dataSet swatch types on attribute terms and use product-level overrides where a product needs different output.Configure sharingTurn selected variations into shareable URLs and style the built-in copy button beside add to cart.

Articles

Organized by workflow: setup, display, storefront behavior, and advanced configuration.

Basics

Getting Started

Install the plugin, enable dropdown conversion, assign swatch data, and verify the first storefront output on a variable product.

3 sections

Swatch Types

Use button, color, image, or number swatches, then add dual-color rendering when an option needs two tones.

3 sections

Layouts Overview

Choose between wrap, grid, scroll, pill, and slider layouts, then refine selector style, shape, and spacing.

3 sections

Configuration

Labels & Display Options

Control label visibility, clear behavior, image sizing, and how WooCommerce dropdowns are converted into swatches.

3 sections

Variation Chips & Container Styling

Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.

3 sections

Typography

Set font family, size, weight, and color for attribute headings and swatch text, using theme, local, or Google fonts as needed.

3 sections

Tooltips

Configure tooltip position, animation, colors, and the mobile disable toggle for term-name hints on hover.

3 sections

Animations

Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.

3 sections

Quantity Controls

Replace the native quantity field with styled controls, set limits and sizing, and tune stock messaging.

3 sections

Storefront

Shop Page

Enable swatches on the shop loop and understand the lighter archive output the plugin renders there.

3 sections

Share & Variation URLs

Generate variation-specific URLs, add the copy button beside add to cart, and style its messaging and icon.

3 sections

Support

Advanced

Set out-of-stock handling, enable dual-color support, and decide whether plugin data is removed on uninstall.

3 sections

Troubleshooting

Diagnose missing swatches, wrong output, shop-loop surprises, and share-button issues with simple symptom-to-check guidance.

3 sections

Changelog

The latest B3 Swatches releases.

freeManual

v1.0.1

Improved admin polish and frontend stability across the swatch settings experience.

proLegacy premium

v1.0.1

Improved Pro controls and previews for tooltips, quantity settings, share icons, Google Fonts, and the Flow layout preview.

freeManual

v1.0.0

Initial release.

Open changelog