Variation Swatches for WooCommerce – Color, Image & Label Swatches

Popis

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

= 🎨 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
• ✅ 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. If your theme uses a heavily customised variation form, you may need to add a small CSS override — we include a Custom CSS field in Settings → Advanced for exactly this purpose.

Can I assign different swatches per product?

Yes. Set global swatches per attribute term from Products → Attributes, then override the swatch type on a per-product basis from the product edit screen. Per-product overrides take priority over the global setting.

Does it support custom (local) attributes?

Yes. Both global WooCommerce attributes (created in Products → Attributes) and custom per-product attributes (created directly on a product) work with swatches. For per-product attributes, select the swatch type from the product edit screen.

What happens to out-of-stock variations?

You can choose how out-of-stock swatches are displayed from Settings → General → Out-of-Stock Display: blur only, blur with a cross-mark, or hide completely. The default is blur with cross.

Does it work on shop and category pages?

Yes — archive and shop page swatches are available in the free version. Enable them from Settings → Shop / Archive tab and customers will see swatches directly on product cards without having to open each product page.

Is it translation ready?

Yes. Fully translation ready and compatible with WPML, Polylang, and other multilingual plugins. A .pot file is included in the /languages/ folder so you can create your own translations using Poedit or Loco Translate.

Do the swatches work inside Quick View popups?

Yes. The plugin uses a MutationObserver to detect dynamically loaded product modals (Quick View, popup builders, etc.) and automatically initialises swatches inside them without requiring a page reload.

Will swatches appear in the WooCommerce Cart and Checkout Blocks?

The plugin is compatible with WooCommerce Cart and Checkout Blocks. Swatches control variation selection on the product page; the selected variation data flows into the cart and checkout exactly as it does with the standard WooCommerce experience.

The swatches look smaller or larger than expected. How do I resize them?

Go to Settings → Design and adjust the Swatch Width and Swatch Height for product pages, or Archive Swatch Width / Height for shop/category pages. Sizes are set in pixels and changes apply instantly after saving.

Can I add my own custom CSS?

Yes. Go to Settings → Advanced, enable the Custom CSS toggle, and paste your CSS in the text area. This CSS is output inline on the frontend only, and is scoped to the plugin’s elements.

Does the plugin slow down my store?

No. Settings are loaded once per request and cached in memory, so there are no repeated database queries — even on archive pages with dozens of products. Frontend assets (CSS + JS) are enqueued only on pages that need them.

Is it compatible with WooCommerce High-Performance Order Storage (HPOS)?

Yes. The plugin declares full compatibility with HPOS (custom order tables) and WooCommerce Cart & Checkout Blocks.

How do I reset all plugin settings to default?

Go to Settings → Advanced and use the Reset Settings button at the bottom of the page. This restores all settings to their default values without affecting your attribute term swatch data.

Where can I get support?

Use the WordPress.org support forum for free support. Please include your WordPress version, WooCommerce version, active theme, and a description of the issue when opening a thread.

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.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
• Improvement: Expanded FAQ section — 8 new answers covering Quick View, Blocks, resizing, Custom CSS, HPOS, reset, and support
• Compat: Tested with WordPress 7.1 — no issues found
• Compat: Tested with WooCommerce 11.0 — no issues found
• Fix: „Tested up to“ bumped to WordPress 7.1 and WC 11.0 in both plugin header and readme.txt
• 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