Getting Started

Install B3 Swatches like any other WordPress plugin, then open its admin screen and confirm the settings tabs load without errors. That tells you the plugin is active and ready to style WooCommerce variation selectors.

1. 1
   Go to `Plugins` → `Add New`, upload the plugin zip or install it from the directory, then activate it.
2. 2
   Open `B3 Swatches` in the WordPress admin and confirm the main tabs are visible.
3. 3
   Keep one variable product open on the storefront so you can verify each setting against a live example.

B3 Swatches uses three setup surfaces, not just one settings screen. The main plugin page controls global behavior, attribute terms store the default swatch data, and the product data panel can override that output for one product.

B3 Swatches settings

Use the tabs for global layout, chip styling, animations, typography, tooltips, quantity and stock, shop output, share URLs, and advanced options.

Attribute terms

Set the default swatch type and option data on the attribute term itself: color, image, button text, or number.

Product data → Swatches

Override type, label text, color, image, number, or hide-text behavior for one variable product without changing the global term.

On a variable product, switch on Auto Convert Dropdowns in the General tab and make sure the attribute terms already have swatch data assigned. If the product still shows a plain dropdown, either conversion is off or the product has not been set up with swatch data yet.

Next, decide what each option should render as in

. Once the right data is showing, move to

to control how the selector occupies space.