Swatch - Variation Swatches for WooCommerce
| 开发者 | motylanogha |
|---|---|
| 更新时间 | 2026年10月2日 19:41 |
| PHP版本: | 8.1 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Swatch replaces WooCommerce's default variation
<select> dropdowns with visual, accessible swatches on single product pages. Choose a swatch type per attribute (colour dots or button/label pills) and assign a colour or label per term.
The swatches drive WooCommerce's own variations form, so price, stock and the add-to-cart button update exactly as they do with the stock dropdowns. Selected and out-of-combination states are reflected automatically.
The full source lives on GitHub at github.com/wppoland/plogins-swatch if you want to read the code or report a problem.
Features
- Colour and button/label swatch types.
- Per-attribute type selection on the global attribute screen.
- Per-term colour (
sanitize_hex_color) and custom label, stored as term meta. - Wires into WooCommerce's native variations form, no jQuery, vanilla JS.
- Keyboard operable (radiogroup semantics, arrow keys) and screen-reader labelled.
- Focus-visible rings, sufficient contrast, reduced-motion friendly, no layout shift.
- Graceful fallback to the standard dropdown when an attribute has no swatch data.
- Swatches in shop and category listings too, off by default so your shop page does not change without you asking.
- Settings page under WooCommerce: enable/disable, default swatch type and the shop-listing switch.
安装:
- Install from Plugins > Add New by searching for Plogins Swatch, or upload the
plogins-swatchfolder to/wp-content/plugins/. - Activate it. WooCommerce must be active.
- Go to WooCommerce > Swatch to tune the defaults.
- On Products > Attributes, set a swatch colour or label on each attribute term.
屏幕截图:
常见问题:
Documentation and links
- Documentation: plogins.com/plogins-swatch/docs/
- Plugin page: plogins.com/plogins-swatch/
- Source code: github.com/wppoland/plogins-swatch
- Bug reports and feature requests: github.com/wppoland/plogins-swatch/issues
Does it require WooCommerce?
Yes. Swatch extends WooCommerce's variable products and does nothing without it.
What happens to attributes I have not configured?
They get the plugin's default swatch type (button swatches out of the box), the same as any attribute you have not given its own type. Only a colour attribute with no colours configured falls back to the dropdown automatically.
Does it work without jQuery?
Yes. The front-end is vanilla JavaScript that hooks WooCommerce's own variation events.
Can shoppers pick variations with a keyboard?
Yes. Swatches use radiogroup semantics, arrow-key navigation and visible focus rings.
Does it work on mobile?
Yes. Swatches stay in the native variations form with touch-friendly targets; no separate mobile app or script framework is required.
Does this plugin work on WordPress Multisite?
Yes. This plugin is compatible with WordPress Multisite. Network activate it or activate it on individual sites; each site keeps its own settings and data.
更新日志:
1.0.18
- Fixed: out-of-combination swatches were never disabled and the "Clear" link left the old swatches highlighted. WooCommerce fires its variation events through jQuery, which a native event listener never receives, so the swatches missed every update. They now subscribe through WooCommerce's own jQuery.
- Fixed: adding or saving any attribute term stored a black swatch colour, because a colour field always submits a value. A term you never gave a colour then showed a black dot, and a colour attribute could no longer fall back to the dropdown. A "No colour" checkbox now keeps a term without one; picking a colour unticks it. Terms saved black by earlier versions keep that colour until you tick "No colour" on them.
- The upgrade notice's "Coming soon" and "Get notified" labels are English source strings for every language; Polish sites used to get their own Polish source text, which translators in other languages then saw untranslated.
- Display name drops the "Plogins " prefix. The slug, the text domain and every option key are unchanged, so nothing on an existing install moves.
- The sidebar upgrade promo now follows the same dismissal as the banner. Dismissing the banner used to leave a full-height advert on the settings screen for good, which is not what the WordPress.org guideline on upgrade prompts means by used with moderation.
- Security (low): swatch markup is now passed through
wp_kses()with an explicit allowlist at the point it is printed. Every renderer escapes the values it writes, but each one ends in a filter, so what actually reached the page was whatever the last callback returned. An add-on, or anything else hooking those filters, could put unescaped markup on a storefront page. The allowlist covers the elements and attributes the swatches use, includingimgfor the paid edition's image swatches anddata-*for the values the script reads. - Note: an inline colour that is not a hex value is dropped by WordPress when the markup is filtered, so a callback returning
rgb(...)loses that colour. Colours saved on an attribute term are unaffected: they go throughsanitize_hex_color()on the way in and on the way out.
- Fixed: the PRO upgrade promo kept selling to people who had already bought the paid edition. Only the banner could be dismissed, so the sidebar promo and the locked feature cards followed a paying customer around for good. The promo now checks whether the paid edition is active and steps aside when it is.
- Fixed: arrow glyphs in the admin menu paths, and in the strings handed to translators. An arrow inside a translatable string makes the glyph every translator's problem and changes the layout in any locale that drops it.
- Fixed: the installation steps told you to upload a
swatchfolder. The package has unpacked toplogins-swatchsince the build started taking the folder name from the text domain, so following the readme put the plugin somewhere WordPress would not find it. - Fixed: the link to the attributes screen had an arrow glyph inside the translated string, which made the arrow every translator's problem rather than the layout's.
- Changed: the features list now mentions swatches in shop and category listings. They arrived in 1.0.8 and the description never said so.
- Changed: Polish, German and Spanish are complete again at 52 of 52 strings. Ten strings, the whole shop-listing section among them, had no translation in any locale.
- Fixed: deleting the plugin left the per-user "dismiss" flag from the PRO notice in the database. Uninstall now removes it for every user, not just the one who dismissed it.
- Fixed: the PRO notice on the settings screen still sold shop-loop swatches as a paid feature. They have been in the free plugin since 1.0.8, behind the Swatches in the shop loop checkbox. What PRO adds there is the term image in place of the colour chip, and the notice now says so.
- Changed: Swatches in the shop loop now shows that it hangs off the master switch above it. With Enable swatches off, the row goes quiet and says the listings will not render swatches yet, rather than taking a tick that does nothing. The state is rendered from the saved settings, so it is correct with JavaScript switched off, and the box stays reachable and saveable either way.
- Changed: both switches in that section tie their help text to the checkbox with
aria-describedby, so a screen reader reads the explanation with the control.
- New: Swatches in the shop loop, a setting on the Swatch screen. The archive renderer was always in this plugin, complete and working, but it was held shut by a hardcoded value that only the paid add-on ever flipped. That makes it a built-in feature the plugin refused to run, which the WordPress.org guidelines do not allow, so it is a setting now. Off by default, because it changes how your shop page looks.
- Colour and label swatches render in listings exactly as they do on the product page. Image swatches in listings are what the paid edition adds on top.
- Renamed to Plogins Swatch - Variation Swatches for WooCommerce so the name leads with the brand rather than a generic word, which is what the WordPress.org plugin review team asks for. The plugin slug is unchanged.
- Tested against WordPress 7.1. Verified by activating this build on a clean 7.1 install with WooCommerce 11.1, not by editing the header.
- Fixed the PRO promo on the settings screen quoting a price in PLN. PRO is priced and charged in EUR, so an admin on a Polish site was shown a zloty amount and then billed in euro, and the zloty figure was a fixed conversion that drifted from the real charge as the rate moved. The promo now shows the euro price that is actually taken.
- Translations: completed Polish, German and Spanish for the PRO upgrade panel.
- Added bundled Polish, German and Spanish translations for the plugin interface.
- First stable release.
- Renamed to Plogins Swatch for WooCommerce for a more distinctive plugin name.
- Swatch group filters
swatch/swatch_group_varsandswatch/swatch_group_classesfor PRO sizing and shapes.
- Per-swatch filters (
swatch/product_swatch_html,swatch/archive_swatch_html) andswatch/swatch_itemsfor PRO tooltips and add-ons.
- Add optional archive-loop swatch preview via
swatch/archive_enabledandswatch/archive_htmlfilters for add-ons.
- Add
swatch/variation_galleryfilter and exposeswatch_variation_galleryon variation JSON for add-ons.
- Initial release.