Title: KABAA Swatches for WooCommerce
Author: KABAA
Published: October 13, 2026
Last modified: October 18, 2026
---
Search plugins
# KABAA Swatches for WooCommerce
By [KABAA](https://profiles.wordpress.org/badrul007/)
[Download](https://downloads.wordpress.org/plugin/kabaa-swatches.0.8.0.zip)
[Live Preview](https://wordpress.org/plugins/kabaa-swatches/?preview=1)
* [Details](https://wordpress.org/plugins/kabaa-swatches/#description)
* [Reviews](https://wordpress.org/plugins/kabaa-swatches/#reviews)
* [Installation](https://wordpress.org/plugins/kabaa-swatches/#installation)
* [Development](https://wordpress.org/plugins/kabaa-swatches/#developers)
[Support](https://wordpress.org/support/plugin/kabaa-swatches/)
## Description
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.
Setup guide, every screen with a screenshot: [kazibadrul.com/kabaa-swatches/docs](https://kazibadrul.com/kabaa-swatches/docs/?utm_source=wordpress.org&utm_medium=listing&utm_campaign=readme&utm_content=description)
#### 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
* Tile swatches: each option’s own photo with its price underneath, following what
is already
chosen. Hovering a tile previews its photo in the product gallery
* Swatches on shop, category, tag and search pages too: pick options right on the
card, see that
option’s photo and price, and add the variation to the cart without
leaving the page
* Choose which attributes shop cards show and in which order, store-wide or per
product, which of
their values, their spacing and alignment, and whether they
sit before or after the add-to-cart button
* On a card, options with nothing in stock alongside your choice are marked as
you pick
* Works with custom attributes created inside a product, set from the product’s
own Swatches tab
* Name a term after a color (Navy, Tomato) and its swatch color fills itself
* Image swatches fall back to the variation’s own featured image when a term has
none
* Round or square, any width and height, and a text size for button swatches —
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, on product pages and
shop cards
* 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
* German included for Germany, Austria and Switzerland, used when the site language
is Deutsch
(WordPress 6.5 or newer)
#### Built to stay out of the way
* WooCommerce’s own `` 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 pages that show swatches. Shop cards never call back to the
server, so
they keep working on pages served from a full-page cache.
* Stores its settings in a single option, and custom attribute settings on their
own product.
No tracking and no external services.
## Screenshots
[⌊Image swatches on a product page. Each option shows its own picture, the chosen
one carries a ring, and the product photo follows the choice.⌉⌊Image swatches on
a product page. Each option shows its own picture, the chosen one carries a ring,
and the product photo follows the choice.⌉[
Image swatches on a product page. Each option shows its own picture, the chosen
one carries a ring, and the product photo follows the choice.
[⌊Swatches on a shop page product card. The chosen colour carries a ring, colours
that can't go with it are crossed out, and the price follows the choice.⌉⌊Swatches
on a shop page product card. The chosen colour carries a ring, colours that can't
go with it are crossed out, and the price follows the choice.⌉[
Swatches on a shop page product card. The chosen colour carries a ring, colours
that can’t go with it are crossed out, and the price follows the choice.
[⌊Sold-out options marked on the shop card, on products of any size.⌉⌊Sold-out options
marked on the shop card, on products of any size.⌉[
Sold-out options marked on the shop card, on products of any size.
[⌊Swatches > Settings > Product page — shape, size, font size, tooltips and how
a selected swatch is marked, with a live preview.⌉⌊Swatches > Settings > Product
page — shape, size, font size, tooltips and how a selected swatch is marked, with
a live preview.⌉[
Swatches > Settings > Product page — shape, size, font size, tooltips and how a
selected swatch is marked, with a live preview.
[⌊Swatches > Settings > Shop page — which attributes product cards show, in the
order you drag them into, with a card preview.⌉⌊Swatches > Settings > Shop page —
which attributes product cards show, in the order you drag them into, with a card
preview.⌉[
Swatches > Settings > Shop page — which attributes product cards show, in the order
you drag them into, with a card preview.
[⌊The Swatches tab of a product — hide its card swatches, choose its attributes,
or untick values the card shouldn't show.⌉⌊The Swatches tab of a product — hide
its card swatches, choose its attributes, or untick values the card shouldn't show
.⌉[
The Swatches tab of a product — hide its card swatches, choose its attributes, or
untick values the card shouldn’t show.
[⌊A custom attribute made inside a product, shown as button swatches, set from that
product's Swatches tab.⌉⌊A custom attribute made inside a product, shown as button
swatches, set from that product's Swatches tab.⌉[
A custom attribute made inside a product, shown as button swatches, set from that
product’s Swatches tab.
[⌊Tile swatches on a product page: each option's own photo with its price underneath.
Sale prices show struck through, and sold-out options are crossed out.⌉⌊Tile swatches
on a product page: each option's own photo with its price underneath. Sale prices
show struck through, and sold-out options are crossed out.⌉[
Tile swatches on a product page: each option’s own photo with its price underneath.
Sale prices show struck through, and sold-out options are crossed out.
[⌊Hovering a tile previews its photo in the main product image.⌉⌊Hovering a tile
previews its photo in the main product image.⌉[
Hovering a tile previews its photo in the main product image.
[⌊Swatches > Settings > Product page — the tile price setting, with a preview of
tiles drawn from a product in your store.⌉⌊Swatches > Settings > Product page —
the tile price setting, with a preview of tiles drawn from a product in your store
.⌉[
Swatches > Settings > Product page — the tile price setting, with a preview of tiles
drawn from a product in your store.
[⌊The Swatches tab of a product with an attribute set to Tile. Photos come from
the variations; an image here is only a fallback.⌉⌊The Swatches tab of a product
with an attribute set to Tile. Photos come from the variations; an image here is
only a fallback.⌉[
The Swatches tab of a product with an attribute set to Tile. Photos come from the
variations; an image here is only a fallback.
## Installation
1. Install and activate the plugin. A short welcome screen opens once, pointing to
where setup happens. Nothing changes on your store yet — every attribute starts
as a dropdown.
2. Go to **Swatches > Attributes** and set a swatch type on an attribute. The same
control is on each attribute’s own form under Products > Attributes.
3. For a colour attribute, edit its terms and give each one a colour. For an image
attribute, give each term an image, or leave it and let the variation image be
used. For an attribute created inside a product, use that product’s **Swatches**
tab instead.
4. Adjust shape, size, tooltips and out-of-stock display at **Swatches > Settings**.
Everything the plugin does lives under the **Swatches** menu: Settings, Attributes(
set the type for every attribute in one place), Terms (jump to the terms that need
a colour or image) and Status (read-only diagnostics for support).
Terms are edited on WordPress’s own screens rather than in a rebuilt copy, so you
keep its search, bulk actions and quick edit.
Step by step, with a screenshot of every screen: [the setup guide](https://kazibadrul.com/kabaa-swatches/docs/?utm_source=wordpress.org&utm_medium=listing&utm_campaign=readme&utm_content=installation).
## FAQ
### Is there a setup guide?
Yes: [kazibadrul.com/kabaa-swatches/docs](https://kazibadrul.com/kabaa-swatches/docs/?utm_source=wordpress.org&utm_medium=listing&utm_campaign=readme&utm_content=faq)
walks through
every screen with a screenshot — swatch types, term colours and images,
custom attributes, tile swatches, shop cards, out of stock and troubleshooting.
### Do I have to change my theme?
No. The plugin hooks a WooCommerce filter that classic themes already use.
### My theme has a custom variation form and I see dropdowns.
That theme renders its own markup and does not call the WooCommerce function this
plugin
filters. The product page keeps working normally; it just will not show
swatches.
### Does it work with custom attributes created inside a product?
Yes. Open the product’s Swatches tab, choose a swatch type for the attribute, and
give each
value a color or image. The settings belong to that product only.
### Does it work with more than 30 variations?
Yes, including out-of-stock marking.
### Do I need “Hide out of stock items from the catalog” switched on?
No. That setting has no effect on swatches here.
### Does it send anything to a third party?
No.
### Does it work on shop and category pages?
Yes: the shop, categories, tags, search results, product shortcodes and related
products. Each
variable product card shows its swatches before or after the add-
to-cart button. Shoppers can pick options on the card and, when the card shows every
option, add the variation to the cart there, whatever the number of variations.
Otherwise the product opens with the options already chosen.
### Can I choose which products show swatches on the shop page?
Yes. Swatches > Settings > Shop page chooses the attributes for every card (automatic,
all, or the
ones you pick), or turns card swatches off. A product’s own Swatches
tab can choose different attributes for that product, or hide its swatches on shop
pages.
### My theme’s product cards look different. Will it work?
The plugin finds each card’s image and add-to-cart button on its own. If your theme
lays out cards
unusually, Swatches > Settings > Advanced lets you name them with
a CSS selector.
### What happens if I delete the plugin?
It removes only what it created: its settings, the colours and images you set on
attribute
terms, and the swatch settings saved on products (custom attributes and
the shop card choice). It never deletes an attribute, a term, a product, a variation,
or anything in your media library. A swatch image is a reference to a file in your
media library — deleting the plugin removes the reference, never the file. Your
store keeps working with WooCommerce’s normal dropdowns.
Deactivating is different again: that changes nothing at all, so you can switch
the plugin off
and back on without losing any setup.
## Reviews
There are no reviews for this plugin.
## Contributors & Developers
“KABAA Swatches for WooCommerce” is open source software. The following people have
contributed to this plugin.
Contributors
* [ KABAA ](https://profiles.wordpress.org/badrul007/)
[Translate “KABAA Swatches for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/kabaa-swatches)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/kabaa-swatches/), check
out the [SVN repository](https://plugins.svn.wordpress.org/kabaa-swatches/), or
subscribe to the [development log](https://plugins.trac.wordpress.org/log/kabaa-swatches/)
by [RSS](https://plugins.trac.wordpress.org/log/kabaa-swatches/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 0.8.0
* **German translation included.** When the site language is Deutsch (Germany,
Austria or
Switzerland), the plugin’s admin screens, swatches and shop-card
buttons are in German, in Swiss spelling on Swiss sites. Needs WordPress 6.5
or newer. An approved translation from translate.wordpress.org replaces it automatically.
#### 0.7.0
* A short welcome screen on a new install, listing the swatch types and leading
to
Swatches > Attributes, where setup happens. It shows once, and never on update.
* Help links on every screen: Docs and Support on the Plugins list, and a link
to the matching
section of the setup guide on Settings, Attributes, Terms, Status
and the product Swatches tab.
#### 0.6.0
* **Tile swatches.** A new swatch type for global and custom attributes: each option
shows its
variation’s own photo with its price underneath. The price follows
the options already chosen, as one price or a range, with sale prices struck
through and sold-out options marked, on products of any size.
* Hovering or tabbing to a tile previews its photo in the main product image, and
a chosen tile
keeps its photo before the other options are picked.
* New Tile width and Tile price settings in Swatches > Settings > Product page.
The live preview
shows tiles from one of your own products.
* On shop cards, a tile attribute shows as an image swatch.
#### 0.5.0
* **Swatches on shop and category pages.** Pick options on the product card: the
image follows
your choice, options out of stock alongside it are marked, and
a complete choice can be added to the cart right there, on products of any size.
Sold-out options are marked beyond 30 variations too.
* The card’s price follows your choice, and its button reads “Add to cart” from
the start: pressed
before every option is picked, the card shows which ones
are missing.
* Choose the card attributes in Swatches > Settings > Shop page (automatic, all,
or chosen), or
per product in its Swatches tab, where a product can also hide
its card swatches or choose which of their values the card shows. Sort attributes
into the order cards show them, set the spacing and alignment, and place them
before or after the add-to-cart button. Long rows collapse behind a “+N” control,
and card swatches stay easy to tap on phones.
* Swatches > Settings is reorganised into Product page, Shop page and Advanced
sections, with a
live preview of your swatches and of a shop card.
* Swatch width and height are now set separately, for every shape. A round swatch
with a
different width and height is an oval; a sample on the settings screen
shows the result as you type.
* New font size setting for button swatches, and for color or image swatches shown
as their
name. Leave it empty to keep following the theme.
* A size saved by an earlier version is used as both width and height, so swatches
look the
same after updating.
* For theme developers: the `--kabaa-swatch-size` CSS variable is replaced by
–
kabaa-swatch-width and `--kabaa-swatch-height`.
#### 0.4.0
* Custom attributes created inside a product can now be swatches. A new Swatches
tab on
variable products sets the swatch type and each value’s color or image.
* Name a term after a color (Navy, Tomato, Dark Olive Green) and an empty swatch
color fills
itself. A color name typed into the color field becomes its hex
value. Worked out by the browser; nothing is sent anywhere.
#### 0.3.3
* Tooltips now appear instantly on hover and on keyboard focus, and read “Attribute:
Term”
(for example “Colour: Ocean Blue”). Tapping a swatch on a phone shows
its tooltip too.
* Swatches no longer carry a `title` attribute, so the browser’s own delayed tooltip
is gone.
#### 0.3.2
* The stylesheet now loads in the page head on product pages through WordPress’s
asset system;
the plugin no longer prints any inline style tag.
* Write requests now accept the security token only from the submitted form, never
from the URL.
* Readme rewritten to describe only what this plugin does.
* Translation template regenerated with every string.
#### 0.3.1
* **Selected swatches now show a ring drawn outside the swatch.** The previous
thickened border
was invisible on a black swatch and hard to see on any dark
one.
* Added a selection style setting — automatic, ring, fill or border — and a selection
colour.
Automatic uses a ring for colour and image swatches and a fill for button
swatches.
* The label colour on a filled swatch is now worked out from the selection colour
so it stays
readable.
* The out-of-stock stroke is now legible on dark swatches, light swatches and images
alike.
* Keyboard focus is now a dashed outline, distinct from the selection ring.
* If you preferred the old appearance, set the selection style to Border.
#### 0.2.0
* The plugin now has its own **Swatches** menu, with Settings, Attributes, Terms
and Status screens.
* Swatch types for every attribute can be set on one screen instead of one at a
time.
* Settings moved out of WooCommerce > Settings > Products into Swatches > Settings.
Your saved
settings carry over untouched.
* Added a Settings link on the Plugins screen.
* Deleting the plugin now cleans up its own data and nothing else.
#### 0.1.0
* First release: colour, image and button swatches on the single product page.
* Out-of-stock marking correct above WooCommerce’s variation preload threshold.
* Out-of-stock display independent of the catalog visibility setting.
## Meta
* Version **0.8.0**
* Last updated **24 hours ago**
* Active installations **Fewer than 10**
* WordPress version ** 6.0 or higher **
* Tested up to **7.1.3**
* PHP version ** 8.0 or higher **
* Tags
* [color swatches](https://wordpress.org/plugins/tags/color-swatches/)[product attributes](https://wordpress.org/plugins/tags/product-attributes/)
[variation swatches](https://wordpress.org/plugins/tags/variation-swatches/)[variations](https://wordpress.org/plugins/tags/variations/)
[woocommerce](https://wordpress.org/plugins/tags/woocommerce/)
* [Advanced View](https://wordpress.org/plugins/kabaa-swatches/advanced/)
## Ratings
No reviews have been submitted yet.
[Your review](https://wordpress.org/support/plugin/kabaa-swatches/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/kabaa-swatches/reviews/)
## Contributors
* [ KABAA ](https://profiles.wordpress.org/badrul007/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/kabaa-swatches/)
## Donate
Would you like to support the advancement of this plugin?
[ Donate to this plugin ](https://kazibadrul.com)