=== KABAA Swatches for WooCommerce ===
Contributors: badrul007
Tags: woocommerce, variation swatches, color swatches, variations, product attributes
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
Stable tag: 0.8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Donate link: https://kazibadrul.com

Show WooCommerce variations as color, image and button swatches instead of dropdowns. Sold-out options stay marked on any product.

== 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.

https://www.youtube.com/watch?v=s-srg4spJ-g

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 `<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 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.

== 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).

== Frequently Asked Questions ==

= 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.

== Screenshots ==

1. 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.
2. 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.
3. Sold-out options marked on the shop card, on products of any size.
4. Swatches > Settings > Product page — shape, size, font size, tooltips and how a selected swatch is marked, with a live preview.
5. Swatches > Settings > Shop page — which attributes product cards show, in the order you drag them into, with a card preview.
6. The Swatches tab of a product — hide its card swatches, choose its attributes, or untick values the card shouldn't show.
7. A custom attribute made inside a product, shown as button swatches, set from that product's Swatches tab.
8. 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.
9. Hovering a tile previews its photo in the main product image.
10. Swatches > Settings > Product page — the tile price setting, with a preview of tiles drawn from a product in your store.
11. The Swatches tab of a product with an attribute set to Tile. Photos come from the variations; an image here is only a fallback.

== 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.

== Upgrade Notice ==

= 0.8.0 =
German translation included (Germany, Austria, Switzerland), used when the site language is
Deutsch. No settings change.

= 0.7.0 =
Help links to the setup guide on every Swatches screen, and a welcome screen for new installs.

= 0.6.0 =
New Tile swatch type: each option's photo with its price, and a gallery preview on hover.
Nothing changes until you set an attribute to Tile.

= 0.5.0 =
Swatches on shop and category pages, separate swatch width and height, and a font size
setting. Your current size carries over.

= 0.4.0 =
Swatches for custom product attributes, and color filled in from a color name.

= 0.3.3 =
Tooltips now show instantly on hover and keyboard focus. No settings change.

= 0.3.2 =
Maintenance release. No settings change.

= 0.3.1 =
Selected swatches look different: a ring outside the swatch instead of a thickened border, so
selection stays visible on dark colours. Set the selection style to Border to keep the old look.

= 0.2.0 =
Settings have moved to the new Swatches menu. Nothing needs reconfiguring.

= 0.1.0 =
First release.
