KABAA Swatches for WooCommerce

WooCommerce shows product variations as dropdown menus. A shopper choosing a colour reads
the word “Ocean Blue” instead of seeing it, and on a phone the dropdown opens a picker that
takes them off the page entirely.

KABAA Swatches replaces those dropdowns with swatches a shopper can see and tap.

Works with classic themes that use WooCommerce’s standard variation form.

Out-of-stock handling

Works on products with many variations.

WooCommerce sends variation data to the browser only up to a threshold (30 variations by
default). Below it, the plugin uses that data and adds no extra request. Above it, the plugin
fetches availability sized to the number of swatches on screen, not the number of variations,
and keeps sold-out combinations marked as the shopper chooses.

Independent of catalog visibility.

Out-of-stock swatches work the same whether WooCommerce’s “Hide out of stock items from the
catalog” option is on or off, so you can keep sold-out products visible in your shop.

What it does

• Color, image and button swatches on the single product page
• Image swatches fall back to the variation’s own featured image when a term has none
• Round or square, with an adjustable size — no CSS to write
• Selection shown as a ring outside the swatch, so it stays visible on a black swatch
• Choose ring, fill or border, and the colour, or leave it to pick per swatch type
• Tooltips on hover and on keyboard focus
• Shows the selected term’s name beside the attribute label
• Marks sold-out terms as crossed out, blurred, or hidden
• Any attribute can be switched back to a plain dropdown, keeping its colours and images
• Correct for products with any number of variations
• Backorders count as purchasable, because they are

Built to stay out of the way

• WooCommerce’s own <select> stays in the form and stays in charge. The plugin writes to it
  and listens to it; it never resolves variations or touches add to cart.
• Swatches are real radio inputs, so keyboard navigation, focus and selected state come from
  the browser itself.
• No template is overridden. If a theme renders its own variation markup, you get WooCommerce’s
  normal dropdowns and the product page keeps working.
• Assets load only on product pages that use swatches.
• Stores its settings in a single option. No tracking and no external services.