B3 Swatches docs

Who this docs set is for

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

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.

Article map

• Getting Started: Install the plugin, enable dropdown conversion, assign swatch data, and verify the first storefront output on a variable product.
• Swatch Types: Use button, color, image, or number swatches, then add dual-color rendering when an option needs two tones.
• Layouts Overview: Choose between wrap, grid, scroll, pill, and slider layouts, then refine selector style, shape, and spacing.
• Labels & Display Options: Control label visibility, clear behavior, image sizing, and how WooCommerce dropdowns are converted into swatches.
• Variation Chips & Container Styling: Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.
• Typography: Set font family, size, weight, and color for attribute headings and swatch text, using theme, local, or Google fonts as needed.
• Tooltips: Configure tooltip position, animation, colors, and the mobile disable toggle for term-name hints on hover.
• Animations: Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.
• Quantity Controls: Replace the native quantity field with styled controls, set limits and sizing, and tune stock messaging.
• Shop Page: Enable swatches on the shop loop and understand the lighter archive output the plugin renders there.
• Share & Variation URLs: Generate variation-specific URLs, add the copy button beside add to cart, and style its messaging and icon.
• Advanced: Set out-of-stock handling, enable dual-color support, and decide whether plugin data is removed on uninstall.
• Troubleshooting: Diagnose missing swatches, wrong output, shop-loop surprises, and share-button issues with simple symptom-to-check guidance.