內容簡介
Variation Swatches for WooCommerce 外掛透過視覺化的顏色、圖片和標籤選擇器，取代預設的下拉選單，提升產品瀏覽體驗，使變化選擇更快速、清晰且友好。
【主要功能】
• 雙色/分色選擇器
• 類別及商店頁面顯示選擇器
• 固定顏色選擇器
• 圖片選擇器
• 標籤/按鈕選擇器
• 自動切換變化圖片
外掛標籤
開發者團隊
② 後台搜尋「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
= 🎨 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
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
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
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.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
