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.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“MBTech Variant Swatches for WooCommerce” is open source software. The following people have contributed to this plugin.
Contributors
Translate “MBTech Variant Swatches for WooCommerce” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
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.