Product Variation Swatches for WooCommerce – Smart Swatches
| 开发者 |
shapedplugin
rubel_miah khalilu shamimmiashuhagh |
|---|---|
| 更新时间 | 2026年11月13日 21:47 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv3 |
| 版权网址: | 版权信息 |
详情介绍:
Dropdowns make shoppers guess. Swatches let them see.
Smart Swatches replaces WooCommerce's "Choose an option" dropdowns with clear, clickable color, image, button and radio swatches, on single product pages and right on your shop cards. A guided setup wizard gets your first swatches live in a few minutes, and a live preview shows every change before you save.
Documentation | Support | Upgrade to Pro
https://www.youtube.com/watch?v=9odyrcZKb-s
Why store owners choose Smart Swatches
- Quick to set up. The setup wizard scans your store, creates your first attribute and turns swatches on where you want them.
- Fits your theme. Adjust shape, size, spacing, borders, colors and padding, and watch the live preview update as you go.
- Light on your store. Assets load only on pages that show swatches, and products with many variations load availability on demand.
- Accessible by default. Show the selected value as text next to each attribute, so color is never the only cue (WCAG 1.4.1).
- Color swatches
- Image swatches
- Button / label swatches
- Radio button swatches
- Square, rounded and circle shapes, sized per attribute
- Turn attributes that still use the default dropdown, including custom per-product attributes, into swatches automatically
- Image swatches for options with their own variation image (like Color), buttons for everything else (like Size)
- Attributes you have already given a type are never changed
- Selected variation label, e.g. "Color: Navy"
- Swatches per view, with the rest available through a slider or scrollbar
- Swatch area max width and swatch spacing
- Separate styles for color and image swatches and for button swatches: border, border color, background, image size, inner padding, text color and font size
- The product gallery switches to the chosen variation
- Swatches on product cards in shop, category and tag pages
- Swatch position after the title, after the price or after Add to Cart
- Swatch alignment, and the attribute name shown above its swatches
- Reserve consistent swatch height, so titles, prices and buttons line up across a row
- Reuse your product page styles, or style shop swatches separately
- Disable out-of-stock variations
- Cross and Blur styles for unavailable swatches, with your own cross color
- Variation stock info
- Clear on reselect
- Variation threshold for products with lots of variations
- Text or image tooltips
- Tooltip position, colors, font size, max width and image size
- Additional CSS and developer filters
- Option to turn off the default stylesheet
- Roll back to a previous version, with your settings kept
- Optional removal of all plugin data on deletion
- Compatible with WooCommerce High-Performance Order Storage (HPOS)
- Image with Label and dual-color swatches
- Bulk add and edit terms, with colors and images filled in for you
- Import and export attributes and terms, with their colors and images
- Choose what shop cards show with attribute priority, max attributes per card and per-category rules
- Swatches over or below the product image on shop cards, shown always or on hover
- Hover to switch the card's photo and price
- Carry the shopper's pick from the shop card to the product page
- Wrap (+N more), slider and accordion display styles
- Variation URLs that open a product with the right options already selected
- Swatch filter widget and block with live results and product counts
- All five out-of-stock styles: cross, blur, blur + cross, grayscale and hide
- Text and image tooltips together, tooltip effects and attribute name placement
安装:
From your dashboard
- Go to Plugins › Add New Plugin.
- Search for Smart Swatches.
- Click Install Now, then Activate.
- Download the plugin ZIP from this page.
- Go to Plugins › Add New Plugin › Upload Plugin, choose the ZIP and click Install Now.
- Activate the plugin.
- Make sure WooCommerce is installed and active.
- Open Smart Swatches in your admin menu.
- Follow the setup wizard, or work through the Get Started checklist at your own pace.
屏幕截图:
常见问题:
Do I need WooCommerce?
Yes. Smart Swatches works with WooCommerce variable products, so WooCommerce must be installed and active.
How do I turn an attribute into swatches?
Go to Products › Attributes, edit an attribute and set its Attribute Type to Color, Image, Button/Label or Radio. Then click Configure terms to give each term its color or image. The setup wizard can create your first one for you.
Does it work with custom product attributes?
Yes. Attributes you add on a single product, and global attributes you haven't given a type yet, can be turned into swatches automatically under Fallbacks › Attributes Without a Type: image swatches when an option has its own variation image, buttons for everything else. Attributes you've already set up are never changed.
Can I use product photos as swatches?
Yes. Choose the Image type and pick a photo for each term, or let options that already have a variation image use it automatically. Shoppers can also see a larger image in the tooltip.
Can I show swatches on the shop and category pages?
Yes. Turn on Shop Page Swatches in the Shop / Archive tab. You can place them after the title, the price or the Add to Cart button, align them, and style them separately from the product page.
What happens to out-of-stock variations?
You choose. Under Out-of-Stock Variations, keep them selectable, disable them so they can't be picked, or hide them. Disabled swatches can show a cross or a blur, so shoppers see at a glance what's unavailable.
Can shoppers see how many are left?
Yes. Turn on Variation Stock Info to show a small stock count on each swatch. It has separate settings for the product page and shop cards, with your own colors for in stock, low stock and out of stock.
My products have lots of variations. Will it still work?
Yes. Products with many variations load their availability on demand, so pages stay fast. You can set the threshold under Variation Threshold.
Will it slow down my store?
It's built to stay light. Its scripts and styles load only on pages that show swatches, and you can turn off the default stylesheet if your theme handles the styling.
Is it accessible?
You can always show the selected value as text next to each attribute, so color is never the only cue (WCAG 1.4.1). The selected variation label, e.g. "Color: Navy", also tells shoppers what they've picked.
Will it work with my theme?
Smart Swatches works with themes that follow WooCommerce standards, including quick view popups. If something doesn't look right, let us know in the support forum and we'll help.
What's the difference between Free and Pro?
Free covers color, image, button and radio swatches on product and shop pages, with full styling, tooltips and stock info. Pro adds catalog tools (bulk editing, import and export), more control over shop cards, a swatch filter, variation URLs and extra swatch types. See the full list above.
更新日志:
2.0.0 – Nov 13, 2026
- New: Setup Wizard that configures your store in minutes. It picks the right swatch type for each attribute, fills term colors from their names, and pulls term images from your variation images, so there is far less manual setup.
- New: Get Started checklist on the settings screen that shows what's done and what's next, so you never miss an important step.
- New: Live preview of the product page and shop cards that updates as you change settings, so you see the result instantly without saving and reloading.
- New: Radio button swatches, a clean and familiar choice for attributes like sizes or plans.
- New: Image tooltips on swatches that show a larger preview on hover, helping shoppers choose with confidence.
- New: Variation Stock Info option that shows stock levels right on the swatches, with separate Product Page and Shop / Archive switches and custom Stock Badge Colors. Shoppers know what's available before they click, and low-stock badges can encourage faster decisions.
- New: Swatches Per View, Swatch Area Max Width, and Swatch Spacing options that give you precise control over the product page layout, so products with many variations stay tidy.
- New: Load Assets Only Where Swatches Appear option that keeps plugin files off pages that don't need them, for faster page loads.
- New: Keyboard navigation, screen-reader labels, and the Always Show Selected Value as Text option, making your store easier to use for everyone and more accessibility-friendly.
- New: Preview column and swatch fields in the Products › Attributes and Configure Terms screens, so you can check and edit swatches at a glance without opening each term.
- New: One-click installation of recommended tools from WordPress.org in the Setup Wizard, saving you time hunting for compatible plugins.
- Improved: Redesigned settings screen with General, Product Page, Shop / Archive, and Settings tabs, so every option is easier to find.
- Improved: The Disable Out of Stock Attribute switch is now the Out-of-Stock Variations option with Show as Usual, Disable, and Hide, giving you more control over how unavailable options appear and reducing shopper frustration.
- Improved: The Cross disabled style now draws a clear diagonal line on product pages and shop swatches, so unavailable options are obvious at a glance.
- Improved: The Clean-up Data on Deletion option is now Remove All Data on Deletion and removes all plugin data, leaving your database clean if you ever uninstall.
- Improved: Missing swatch image sizes are now generated in the background for older images, so existing swatches look sharp without slowing down your site or requiring manual regeneration.
- Fixed: The Disable Plugin Default Stylesheet option now works correctly, so you can fully style swatches with your own theme CSS.
- Updated: The language (.pot) file, keeping translations up to date.
- Tested: Compatible with WordPress 7.1.
- Tested: Compatible with WooCommerce 11.3.
- Improved: Removed the expired offer banner from the admin dashboard.
- Fixed: Enhanced plugin security with stronger data validation and output escaping.
- Tested: WooCommerce 11.2.2 compatibility.
- Improved: The Add / Upload Image option icon alignment on the product attribute page.
- Fixed: The Product Attributes type field showed the wrong label for the select option.
- Tested: WooCommerce 11.0.0 compatibility.
- New: Added a 'smart_swatches_ui_capability' hook to filter UI capability checks.
- Improved: Recommended plugins section now uses the plugins_api function for more reliable data.
- Improved: Hardened plugin security with proper capability checks.
- Updated: Revised readme content for clarity and accuracy.
- Tested: Compatibility confirmed with WooCommerce 10.9.1.
- Enhancement: Add checkmark after add to cart in the block theme.
- Fix: Some WPCS related warnings.
- Tested: WooCommerce 10.8.1 compatibility.
- Improved: Admin UI styling has been improved.
- Improved: Code maintainability has been improved.
- Tested: WordPress 7.0 compatibility.
- Tested: WooCommerce 10.6.2 compatibility.
- Fix: The hook conflict issue with the WooGallery plugin.
- Fix: The price did not change after variation selection in the case of the Flatsome theme.
- Tested: WordPress 6.9.4 compatibility.
- Tested: WooCommerce 10.6.0 compatibility.
- Improved: Help page has been redesigned to make it more user friendly
- Updated: The language (.pot) file.
- Tested: WooCommerce 10.4.3 compatibility.
- Tested: WordPress 6.9 compatibility.
- Tested: WooCommerce 10.3.5 compatibility.
- Improved: Enhanced plugin security and data validation.
- Fix: Some WPCS-related warnings.
- Tested: WooCommerce 10.2.1 compatibility.
- Fix: The Add Product page style issue along with the Avada theme.
- Fix: The Preselected default variation attributes did not get shown selected.
- Tested: WordPress 6.8.1 compatibility.
- Tested: WooCommerce 9.8.5 compatibility.
- New: The language (.pot) file was added to make the plugin translation ready.
- Improved: The shop page variation swatches style improved for the Astra theme
- Fix: The translation-related warning was found with WP 6.8.
- Fix: The help page recommended plugins logo URL not found issue.
- Tested: WordPress 6.8 compatibility.
- Tested: WooCommerce 9.8.1 compatibility.
- New: The plugin options tooltips are enhanced with video visuals.
- Improved: The swatch compatibility with the Betheme.
- Improved: The swatch compatibility with the Product Slider plugin.
- Fix: The tooltips font size option did not work.
- Tested: WordPress 6.7.2 compatibility.
- Tested: WooCommerce 9.7.0 compatibility.
- New: The Attribute Box Size option.
- New: The Cross Color option for the disabled attribute style.
- New: The Tooltip Text option.
- New: The Attribute Shape option.
- Improved: The Image Uploader style of the product attributes.
- Improved: The Shop Tab of the plugin is renamed to the Shop/Archive Tab.
- Fix: The Variation Swatches section style issue along with the Avada theme.
- Fix: The Variation Swatches Position issue along with the Woostify theme.
- Fix: The Variation Swatches Position issue along with the OceanWP theme.
- Fix: The warning was found in the terminal when the plugin was activated via the WP CLI command.
- Fix: Some WPCS-related warnings.
- Tested: WordPress 6.7.1 compatibility.
- Tested: WooCommerce 9.6.0 compatibility.
- First Release