Description
MBTech Variant Swatches for WooCommerce replaces the default WooCommerce variation dropdown selects with visually rich swatches, giving your customers a more intuitive and engaging product selection experience.
Features
- Color Swatches — Display product variations as colored circles or squares with a hex color picker.
- Image Swatches — Show variation images using the WordPress Media Library.
- Label/Button Swatches — Display text-based buttons for sizes, materials, etc.
- Checkbox Swatches — Styled checkbox/radio UI for variation selection.
- Enhanced Dropdown — Improved select dropdown with color/image previews.
- Drag & Drop Sorting — Reorder swatch display order per product.
- Per-Product Overrides — Override global swatch type on individual products.
- Out of Stock Control — Cross out, blur, or hide unavailable variations.
- Tooltips — Hover tooltips for color and image swatches.
- Responsive & Accessible — Mobile-friendly, keyboard navigable, ARIA attributes.
- Theme Override Support — Theme developers can override swatch templates.
- HPOS Compatible — Fully compatible with WooCommerce High-Performance Order Storage.
How It Works
- Go to Products Attributes and edit an attribute (e.g., Color).
- Choose a Swatch Type (Color, Image, Label, Checkbox, or Dropdown).
- Edit individual attribute terms to set their color, image, or label.
- Swatches automatically replace the default dropdown on the product page.
Requirements
- WordPress 6.0 or higher
- WooCommerce 7.0 or higher
- PHP 7.4 or higher
Installation
- Upload the
mbtech-variant-swatchesfolder to/wp-content/plugins/. - Activate the plugin through the Plugins menu in WordPress.
- Make sure WooCommerce is installed and activated.
- Go to Products Attributes to configure swatch types for your attributes.
- Configure global settings under WooCommerce Settings Variant Swatches.
FAQ
-
Does this work with any theme?
-
Yes, the plugin uses standard WooCommerce hooks and should work with any WooCommerce-compatible theme. Theme developers can also override swatch templates.
-
Can I set different swatch types for different attributes?
-
Yes, each attribute can have its own swatch type. You can also override the type per product.
-
Does it support custom product attributes?
-
The plugin works with global (taxonomy-based) product attributes. Custom per-product attributes use the standard dropdown.
-
Will it slow down my site?
-
No, CSS and JavaScript are loaded conditionally only on product pages where they are needed.
Avis
Il n’y a aucun avis sur cette extension.
Contributeurs & développeurs
« MBTech Variant Swatches for WooCommerce » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.
Contributeurs
Traduisez « MBTech Variant Swatches for WooCommerce » dans votre langue.
Le développement vous intéresse ?
Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.
Historique des changements
1.0.5
- Added functionality to show the hover tooltip inline at the end of the variants wrapper.
- Added support for image swatch tooltips in addition to color swatches.
1.0.4
- Added functionality to display the selected variation name next to the attribute label.
- Ensured tooltips correctly retrieve and display the option name.
- Fixed an infinite loop (« Maximum call stack size exceeded ») when selecting an option from a dropdown or checkbox.
- Fixed a DOMSubtreeModified infinite loop caused by continuous attribute label updates.
1.0.3
- Fixed an issue where the « Default Select » option appeared duplicated in the swatch type dropdown on the attribute edit screen.
1.0.2
- Added visual swatch preview columns (Color, Image, Label) to the WooCommerce attribute terms list table in the admin.
1.0.1
- Added « Default Select » option to allow falling back to standard WooCommerce dropdowns per attribute.
- Fixed an issue where product-level swatch type overrides were not saving correctly.
- Resolved a bug where attributes incorrectly rendered as « Label » instead of the chosen type.
- Fixed a misleading 500 error in
admin-ajax.phpwhen saving sort orders without changes. - Improved WordPress.org compliance by correctly prefixing public hooks, functions, and JavaScript variables.
1.0.0
- Initial release.
- Color, Image, Label, Checkbox, and Dropdown swatch types.
- Drag-and-drop sorting per product.
- Per-product swatch type overrides.
- Out-of-stock variation styling (cross, blur, hide).
- Tooltip support.
- WooCommerce HPOS compatibility.