Variation Swatches for WooCommerce – Color, Image & Label Swatches

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 (No Pro Required)

• ✅ 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
• ✅ 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

1. Install and activate the plugin
2. Go to Products → Attributes
3. Edit an attribute term (e.g. "Red" under Color)
4. Choose swatch type: color, image, label, or radio
5. 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 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

1. Product page with color, image, and label variation swatches
2. Plugin settings panel — General tab
3. Design & Style customization options
4. Archive / shop page swatches display
5. Attribute term edit screen with swatch type selector

Changelog 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