KABAA Variation Swatches for WooCommerce – Color, Image & Button Swatches
| 开发者 | badrul007 |
|---|---|
| 更新时间 | 2026年11月4日 19:26 |
| 捐献地址: | 去捐款 |
| PHP版本: | 8.0 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
KABAA Variation Swatches for WooCommerce turns variation dropdowns into color swatches, image
swatches, button (label) swatches and radio swatches, on the single product page and on shop,
category and search pages. Free on WordPress.org.
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
Why stores switch
Sold-out options marked correctly, on every product.
A t-shirt in 6 colours and 8 sizes has 48 variations. Past 30, WooCommerce stops loading
variation data with the page, and many swatch plugins stop marking sold-out options. Shoppers
pick a combination that can't be bought, and the cart says no.
KABAA Swatches marks sold-out options on products with any number of variations. Below
WooCommerce's threshold it uses the data already on the page and adds no request. Above it, it
fetches availability sized to the swatches on screen, not to the number of variations. And it
works the same whether WooCommerce's "Hide out of stock items from the catalog" option is on or
off, so you never have to hide sold-out products across your whole store to get it.
Pick options and add to cart from the shop page.
Swatches on shop, category, tag and search pages. A shopper picks a colour on the product card,
sees that colour's photo and price, and adds the variation to the cart without opening the
product. One page fewer between browsing and buying.
See the product, not a colour dot.
Tile swatches show each option's own photo with its price underneath, following what is already
chosen. Hovering a tile previews its photo in the main product image. With WooCommerce's classic
product gallery, the main photo also follows the first choice: pick Red and the red product shows,
before a size is picked.
Also included
- One click to swatches. Turn every dropdown into button swatches from the welcome screen, with no per-attribute setup. Undo is one click too
- Shareable variation links. A link that opens the product on one exact colour and size
- Custom attributes created inside a product get swatches too, set from the product's own Swatches tab, not only global attributes
- Radio swatches, for plans, warranties and names too long for a button
- Two-colour swatches for two-tone products ("Navy / White" fills both colours itself)
- Colours fill themselves from term names (Navy, Tomato)
- Group swatches under headings ("Kids", "Adults", "Plus size")
- A Larger option for the attribute that decides the sale
- Tooltips on hover and keyboard focus, with your own text and colour, or the option's photo
- Selection as a ring, fill or border; round or square; any size; no CSS to write
- Sold-out options crossed out, blurred or hidden, on product pages and shop cards
- Choose which attributes and values shop cards show, in which order, store-wide or per product
- Image swatches fall back to the variation's own image when a term has none
- The selected option's name beside the attribute label
- Any attribute can go back to a plain dropdown, keeping its colours and images
- Backorders count as purchasable, because they are
- A live preview on every setup screen, and a built-in Tutorial
- German included for Germany, Austria and Switzerland (WordPress 6.5 or newer)
/product/tee/?attribute_pa_color=navy&attribute_pa_size=large. Anyone who opens that link
lands on the product with Navy and Large already chosen. Good for an ad or newsletter that
should open on the exact colour, and for support pointing a customer at one variation.
- Partial choices work too: pick only the colour and the link carries only the colour
- Anything already in the address, such as campaign tags, is kept
- No browser history is added, so Back still leaves the product page
- No extra request and no extra database query
- An optional Copy link button, off until you switch it on
- 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.
安装:
- 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.
- 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.
- 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.
- Adjust shape, size, tooltips, out-of-stock display and shareable links at Swatches > Settings.
屏幕截图:
常见问题:
Is there a setup guide?
Yes: kazibadrul.com/kabaa-swatches/docs 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 support size swatches and label swatches?
Yes. Button swatches show any attribute as a text label, for example S/M/L sizes, materials or pack sizes.
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.
Can I link to a specific variation, such as one colour or size?
Yes. As a shopper picks options, the page address gains one argument per attribute, like
?attribute_pa_color=navy&attribute_pa_size=large. Copying that address gives a link that
opens the product with those options already selected. Switch on Swatches > Settings >
Product page > Copy link button to give shoppers a button that copies it for them.
Links that carry only some of the options work too, and a link made this way is read by
WooCommerce itself, so it keeps working if you ever turn the plugin off.
Is the shareable variation link feature free?
Yes. Direct variation links are usually a paid upgrade in variation swatch plugins. In KABAA Swatches they are part of the free plugin.
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.
更新日志:
0.12.0
- The product photo follows each choice. Pick a colour and the main product photo shows that colour straight away, before a size is chosen; each further choice narrows it. Works on products of any size, with no extra request. On for new stores; existing stores switch it on at Swatches > Settings > Product page > Follow each choice. Needs WooCommerce's classic product gallery.
- New Tutorial section showing the photo following the choice.
- Every dropdown as buttons in one click. A new store-wide default shows every attribute you have not given a swatch type as button swatches. One button on the welcome screen or Settings, with Undo. Attributes you set to Dropdown stay dropdowns.
- Two-colour swatches. Give a colour term a second colour and its swatch splits on the diagonal, on product pages and shop cards. Name a term "Navy / White" and both colours fill in.
- Group headings. Split a long list of options under headings such as Kids and Adults. Type the heading on the term; headings follow your term order.
- Your own tooltip text and colour. Replace a swatch's tooltip with your own words, read out by screen readers too, and pick the tooltip colour for your theme.
- Larger attribute. Tick Larger for the attribute that decides the sale and its swatches show a quarter bigger.
- New Tutorial screen. Every feature with an example in your own swatch style, a few steps and a button to the screen that sets it up.
- Redesigned settings. Tabs and cards like WooCommerce's own settings, picture choices for shape, selection and sold-out display, size presets, and a live preview on every term screen.
- Radio swatch type. A list of choices, one per line, each with a radio and its name beside it. Made for plans, warranties, delivery options and names too long for a button. It takes your selection colour and font size, and shows as buttons on shop cards. Set it per attribute at Swatches > Attributes, or per product for custom attributes.
- Photos in tooltips. Hover a colour or button swatch and its tooltip shows the photo of that option's variation; image swatches show their own picture, larger. On product pages and shop cards. A photo downloads only when a shopper first hovers its swatch, so pages stay as light as before. Off until you switch it on at Swatches > Settings > Product page.
- Shareable variation links. As a shopper picks options, the page address follows the selection, so a link copied from the address bar opens the product on that exact variation. Part-way choices work too, query arguments the page already carried are kept, and no browser history is added. Usually a paid feature in variation swatch plugins; it is in the free plugin here.
- Optional Copy link button below the variation form, off until you switch it on. It copies the link without leaving the page, and still works on stores served over plain HTTP.
- Both are set at Swatches > Settings > Product page. Neither adds a database query, and the button adds nothing to your pages until it is enabled.
- 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.
- 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.
- 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.
- 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-sizeCSS variable is replaced by--kabaa-swatch-widthand--kabaa-swatch-height.
- 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.
- 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
titleattribute, so the browser's own delayed tooltip is gone.
- 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.
- 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.
- 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.
- 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.