Beschreibung
Variation Swatches for WooCommerce replaces the default dropdown-based variation selectors with visually rich swatches — colors, images, labels, and radio buttons. It improves product browsing experience by making variation selection faster, clearer, and more user-friendly.
📖 View Documentation | 🌐 WebTend
🎨 FREE Features
- ✅ Dual / Split Color Swatches — two-tone color swatches, free (competitors charge Pro for this)
- ✅ Archive & Shop Page Swatches — show swatches on category/shop pages, free (usually a Pro feature)
- ✅ Color Swatches — solid hex color swatches for any attribute
- ✅ Image Swatches — upload per-term images for visual variation selection
- ✅ Label / Button Swatches — S, M, L, XL text buttons for size and more
- ✅ Radio Button Swatches — classic radio-style selectors
- ✅ Archive „+N More“ Indicator — shows overflow count cleanly on shop pages
- ✅ WooCommerce Product Blocks — archive swatches inside woocommerce/product-collection & all-products blocks
- ✅ Out-of-Stock Notify Me — inline popup with „Notify me when available“ link on OOS swatch click
- ✅ Selected Swatch Animation — smooth scale-pop & ripple ring on selection (CSS-only, reduced-motion safe)
- ✅ Attribute Label Display — shows „Color: Red“ inline with swatches
⚡ Advanced Variation Features
- Automatic variation image switching on swatch click (no page reload)
- Out-of-stock display control: blur, blur + cross, or hide completely
- Per-product swatch type override (global attribute type overridable per product)
- Auto-convert all dropdowns to label swatches with one toggle
- Show / hide selected attribute name alongside swatches
🎨 Design & Customization
- Square, rounded, and circle swatch shapes (global setting)
- Custom swatch size for product pages and archive pages separately
- Tooltip support with customizable background and text colors
- Selected state indicator with custom checkmark color
- Custom CSS field for advanced styling
🏪 Shop & Archive Enhancements
Show variation swatches directly on shop and category pages. Customers can preview product color/size options without opening product pages — proven to increase click-through rates.
♿ Accessibility
- ARIA roles (
role="radio",aria-checked) for screen readers - Full keyboard navigation: Arrow keys, Enter, Space, Escape
- Screen-reader-friendly markup structure
⚙️ Performance & Compatibility
- Lightweight — settings cached in memory, no repeated DB queries on archive pages
- No unnecessary AJAX requests on the frontend
- Fully compatible with WooCommerce HPOS (High-Performance Order Storage)
- Compatible with WooCommerce Cart and Checkout Blocks
- Works with Astra, Flatsome, OceanWP, Storefront, GeneratePress, Divi, and most WooCommerce themes
🏆 Perfect For
- Fashion and clothing stores (color + size swatches)
- Furniture and home décor shops (image swatches)
- Cosmetics and beauty products (dual-color swatches)
- Any WooCommerce store with variable products
How It Works
- Install and activate the plugin
- Go to Products Attributes
- Edit an attribute term (e.g. „Red“ under Color)
- Choose swatch type: color, image, label, or radio
- Assign values and save — swatches appear automatically
Variation Image Switching
When a customer selects a swatch, the product gallery image updates instantly — no page reload. Smooth, fast, conversion-friendly.
Frequently Asked Questions
Screenshots
Installation
- Upload the plugin folder to
/wp-content/plugins/, or install via the WordPress plugin screen. - Activate through Plugins Installed Plugins.
- Go to Products Attributes, edit any attribute term, and set its Swatch type, color, or image.
- Configure plugin-wide settings under Variation Swatches in the WP admin menu.
- Done — swatches automatically replace dropdowns on product and shop pages.
FAQ
-
Does this work with all WooCommerce themes?
-
Yes. Works with Astra, Flatsome, OceanWP, Storefront, GeneratePress, Divi, and most WooCommerce themes.
-
Does it work with Elementor?
-
Yes, on standard product pages. Elementor Loop Builder archive swatches are a Pro (Swatchly Pro) feature.
-
Does it work with WooCommerce Product Blocks?
-
Yes. From v1.0.5, archive swatches render inside woocommerce/product-collection (WC 8.0+) and woocommerce/all-products blocks.
-
Does it work with WPML or Polylang?
-
Yes — fully translation-ready with a .pot file included.
-
Does it work on shop and category pages?
-
Yes. Archive/shop page swatches are a free feature. Enable them under Settings Archive tab.
-
What happens to out-of-stock variations?
-
Choose to blur, blur + cross, or hide OOS swatches. From v1.0.5, clicking an OOS swatch shows a „Notify me when available“ popup.
-
Can I control which direction the tooltip appears?
-
Yes. From v1.0.5, go to Settings Design Tooltip Position and choose Top, Bottom, Left, or Right.
-
How does the AI Variation Finder work?
-
Type natural language like „dark blue large“ in the search box on the product page. The finder auto-selects matching swatches — no API key, no AJAX, runs entirely in the browser.
-
Is it mobile-friendly?
-
Yes. Swatches are touch-friendly on all screen sizes.
-
Is it translation ready?
-
Yes. A .pot file is included and all strings use the sayan-variation-swatches text domain.
Rezensionen
Zu diesem Plugin liegen noch keine Rezensionen vor.
Mitwirkende und Entwickler
„Variation Swatches for WooCommerce – Color, Image & Label Swatches“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:
Mitwirkende
Übersetze „Variation Swatches for WooCommerce – Color, Image & Label Swatches“ in deine Sprache.
Interessiert an der Entwicklung?
Durchstöbere den Code, sieh dir das SVN-Repository an oder abonniere das Entwicklungsprotokoll per RSS.
Änderungsprotokoll
Does this work with all WooCommerce themes?
Yes. The plugin uses standard WooCommerce hooks and works with most modern WooCommerce themes including Astra, Flatsome, OceanWP, Storefront, GeneratePress, and Divi.
Can I assign different swatches per product?
Yes. Set global swatches per attribute term, then override the swatch type per product if needed.
Does it support custom (local) attributes?
Yes. Both global WooCommerce attributes and custom per-product attributes work with swatches.
What happens to out-of-stock variations?
You can choose to blur, blur + cross-mark, or completely hide out-of-stock swatches from the Settings panel.
Does it work on shop and category pages?
Yes — archive/shop page swatches are available in the free version. Enable them from Settings Shop / Archive tab.
Is it translation ready?
Yes. Fully translation ready and compatible with WPML, Polylang, and other multilingual plugins. A .pot file is included.
Screenshots
- Product page with color, image, and label variation swatches
- Plugin settings panel — General tab
- Design & Style customization options
- Archive / shop page swatches display
- Attribute term edit screen with swatch type selector
Changelog
1.0.5
- New: Pro Features tab in Settings — previews Sticky ATC Bar, Per-Swatch Badges, Multi-Gallery, Bulk Generator, Elementor Loop Builder, Live Stock Badge with upgrade prompts
- New: WooCommerce Product Blocks compatibility — archive swatches now render inside woocommerce/product-collection (WC 8.0+) and woocommerce/all-products blocks
- New: Out-of-Stock Notify Me — clicking an OOS swatch shows an inline „Notify me when available“ popup with optional redirect link (configurable in General settings)
- New: Selected swatch highlight animation — CSS-only scale-pop and ripple ring on swatch selection; label/radio swatches get a smooth color transition instead; respects prefers-reduced-motion
1.0.4
- New: Elementor Loop Builder compatibility — archive swatches now render correctly inside Elementor’s Loop Builder, WooCommerce Products, and related product widgets
- New: Settings Export / Import — download all settings as JSON, restore on any site with one click (Advanced tab)
- New: Per-attribute term shape override — set Circle for Color attribute, Square for Size on the term edit screen independently of the global shape setting
- New: Styled „Clear Selection“ button — replaces WooCommerce’s plain text clear link with a polished, accessible button
- Improvement: Admin term list column — now shows a colored type badge (Color / Image / Label / Radio), shape override badge, and a more accurate swatch preview with correct border-radius per shape
1.0.3
- New: Review notice system — politely prompts active users to leave a WP.org review after 7 days or 3 admin sessions
- New: Archive „+N more“ overflow badge — shows remaining swatch count cleanly when there are many variations
- New: Attribute label display — shows „Color: Red“ inline alongside swatches on product pages
- New: Quick View plugin compatibility — MutationObserver-based reinit for dynamically loaded product modals
- Improvement: Settings static cache —
get_option()called once per request instead of once per swatch render, significantly reducing DB queries on archive pages with many products - Fix: „Tested up to“ mismatch — plugin header and readme.txt now both declare WordPress 7.1
- Fix: „WC tested up to“ updated from „8.x“ placeholder to accurate version
- Fix: Plugin display name updated to keyword-first title for better WP.org search visibility
- Fix: Author URI updated to webtend.net
1.0.2
- Fixed: saving settings on one tab was resetting settings on other tabs back to defaults. Each tab now saves independently.
1.0.1
- Added compatibility guard so the plugin runs safely alongside Sayan Variation Swatches Pro without function/class redeclaration conflicts.
1.0.0
- Initial release