前言介紹
- 這款 WordPress 外掛「Variation Swatches for WooCommerce」是 2018-12-27 上架。
- 目前有 10000 個安裝啟用數。
- 上一次更新是 2025-04-04，距離現在已有 29 天。
- 外掛最低要求 WordPress 5.3 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 81 人給過評分。
- 論壇上目前有 4 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！
外掛協作開發者
外掛標籤
variation swatches | woocommerce variation | woocommerce attributes | woocommerce variation swatches | variation swatches for woocommerce |
內容簡介
譯文：
簡介
WooCommerce變體標籤外掛可以將預設的WooCommerce商品屬性下拉選項轉換成時尚的標籤。這款神奇的外掛可以幫助您以時尚的方式展示產品變體（基於顏色、大小、質地等），以協助客戶快速選擇其喜愛的變體。
使用此變體標籤外掛，您可以創建4種標籤類型，以正方形或圓形圖示顯示產品屬性。
4種標籤類型如下：
💎 顏色
💎 圖像
💎 標籤/按鈕
💎 单选框
⭐功能|示範 | 文件 | 專業版 ⭐
👉 即時轉換屬性為標籤
如果您要全部轉換，您可以使用單擊立即將預設的WooCommerce變體下拉選項轉換為變體標籤。
👉 標籤設計
變體標籤外掛的此獨特功能使您可以為屬性創建多種設計類型，並輕鬆地在它們之間切換。對於每種設計類型，您可以定義圖示詳細信息，自定義懸停和邊框詳細信息，設置提示工具詳細信息等。
即時把玩
👉 選擇選擇樣式
變體標籤外掛可讓您使用勾選來突顯所選的標籤。此外，您可以使用合適的顏色和大小自定義勾選。
即時把玩
👉 顯示不可用和缺貨變體的行為
設置不可用和缺貨變體的標籤為三種自定義選項 –
1. 隱藏
2. 模糊
3. 帶橫叉線的模糊
👉 自定義產品屬性的標籤
此功能使您可以為變體產品的自定義產品屬性設置標籤。您可以使用三種標籤類型及其屬性自定義這些自定義屬性。
👉 變體標籤的提示工具
當使用者懸停在標籤圖示上時，以自定義顯示顏色顯示屬性的名稱。
⭐相容的佈景主題
與變體標籤外掛相容的一些佈景主題如下：
Store Front、Flatsome、Divi Builder、Astra、Ocean Wp、
WoodMart、Porto、Enfold、Kedence、Motor、Hestia、
Sydney、Neve、Spacious、Zakra
除此列表外，變體標籤外掛還與市場上其他流行的佈景主題相容。
⭐相容的外掛
與變體標籤外掛相容的一些流行的WooCommerce外掛如下：
Yith WooCommerce Quick View、WooCommerce Product Bundle、
WooCommerce Composit products、WPC Smart Quick View for woocommerce by-WPClever、
Eelementor Page Builder Plugin
👉 圓形和正方形的產品屬性變體標籤
變體標籤外掛讓您可以選擇產品變體標籤的圓形或正方形圖示。因此，您可以根據商店佈景主題選擇適合的圖示形狀。
👉 顯示所選變體名稱
使用此變體標籤外掛，您可以在屬性標籤旁邊顯示所選取的變體名稱。
👉自定義
原文外掛簡介
🔥 #1 Plugin for Adding Variation Swatches to WooCommerce Products
The WooCommerce Product Variation Swatches plugin lets you configure & display product variations visually. This plugin improves product presentation, reduces customer confusion, and boosts conversions by providing a visually engaging and intuitive way to browse and choose product attributes, ensuring a smoother shopping journey across all devices.
Why do you need Variation Swatches in your Store?
Default WooCommerce variation dropdowns can be dull and unengaging, making it harder for customers to visualize product options. Variation Swatches solve this by replacing standard dropdowns with attractive color, image, and label/button swatches, allowing customers to quickly and easily select product variations like size, color, or material. This helps in improving user experience and boosting conversions.
✳️ Better Shopping Experience → Customers can visually select variations instead of guessing.
✳️ Faster Decision-Making → Eliminates confusion and speeds up the buying process.
✳️ More Professional Store Design →Gives your WooCommerce store a sleek, modern look.
✳️ Higher Conversion Rates→ By making it easier for customers to find and select the products they want, swatches can contribute to higher conversion rates
✳️ Reduced Returns→Clear visual representation of product variations can help prevent customers from ordering the wrong item, leading to fewer returns.
✳️ Works Seamlessly with WooCommerce Themes → Compatible with almost all major themes and plugins.
🔥 EXPLORE WHAT OUR FREE VERSION OFFERS
Try Demo| Documentation| Get Pro
✅ SWATCH TYPES
The free version offers four essential swatch types, allowing you to display product variations seamlessly
1. Color
2. Image
3. Label/Button
4. Radio
[Video tutorial](https://youtu.be/icrlkqJAv_M?si=GZwiodoVjuCPeRjN)
✅ AUTO CONVERT ALL VARIATION DROPDOWNS TO LABEL/BUTTON SWATCHES
The selected swatch dropdown variation will automatically be converted into label swatches
✅ CUSTOMIZATION OPTIONS FOR SWATCHES
This plugin offers a wide range of customization options allowing you to create common attribute styling like set icon height, width, shape & border color also other styling options like
HOVER/SELECTION STYLING: Add a fixed amount to the total price when the field is selected.
Hover Style: You can adjust the border color upon hover
Selection style:You can change the border color, tick color and tick size of the selected swatch.
Video tutorial
👉Note: Additionally you can customize the selection style for color and image swatches and button/label swatches separately.
Color & Image swatch styling: For color and image swatches you can customize the appearance of the selected swatch using two options
Border on selection
Checkmark with border
Button/label swatch styling: Customize the appearance of the selected button and label swatches with three options
Border on selection
Checkmark with border
Background with font color
TOOLTIP STYLING
The term name of an attribute can be displayed as a tooltip, to which the following changes can be made
Enable/Disable Tooltip
Set the text color for term name
Set the background color for term name
Video tutorial
SWATCH TYPES SPECIFIC STYLING
1. Button/ Label swatches: You can customize the appearance of button and label swatches by adjusting the following parameters:
Set Icon height & width
Set Icon font size
Set Icon background & text color
2. Color/ Image swatches:
Enable/ disable swatch drop-down style
🔥 Explore our Pro version
for even more advanced swatch customization!
✅ OPTION TO SELECT ROUND AND SQUARE VARIATION SWATCH SHAPES
The Variation Swatches plugin lets you choose both round and square icons for your product variation swatches. So, based on your store theme, a suitable icon shape can be chosen.
✅ DISPLAY OPTIONS FOR UNAVAILABLE & OUT-OF-STOCK VARIANTS
WooCommerce notifies users about out-of-stock variants only after selection, which can be frustrating.
👉Note: This plugin lets you display Unavailable & Out-of-stock variants instantly with options like:
Unavailable Variants
Hide – Remove the swatch.
Blur – Keep it visible but faded.
Blur with a Cross – Mark it with a strikethrough.
Out-of-stock Variants
Blur – Keep it visible but faded.
Blur with cross – Mark it with a strikethrough.
✅ Enable Swatches in Additional Info
Once enabled, the swatches will automatically appear in the additional information, enhancing product presentation
✅ Clear on reselect
Once enabled, it allows a customer to easily clear a chosen variation by reselecting it.
👉Note: Styling of the clear button is available in the Pro version
✅ Enable Lazy Load for Swatches
Optimize performance by loading swatch images only when they come into view, ensuring faster page speed for variation-rich stores.
✅ Set AJAX Variation Threshold
The plugin allows you to set the Ajax variation threshold value. So, based on this threshold value, the product availability check can be done through Ajax method or JavaScript.
GET FULL ACCESS WITH PREMIUM NOW !
🔥 SEE OUR PREMIUM FEATURES
Want to give your store a more polished and seamless shopping experience? The pro version unlocks more flexibility, better styling options, and smarter ways to showcase your variations. It’s all about making product selection easier and more engaging for your customers.
Try Demo| Documentation| Get Pro
✅ ADDITIONAL SWATCH TYPE
In addition to Color, Image, Label/Button & Radio swatches available in the free version, the pro version introduces Image with Label providing a clearer and more informative way to display variations.
✅ CONVERT DEFAULT SWATCHES TO IMAGE SWATCHES
The Variation Swatches plugin lets you convert the product variation dropdown into image swatches in a single click.
✅ ADVANCED SWATCHES CUSTOMIZATION & STYLING
The Pro version provides advanced design flexibility, allowing you to create multiple unique styles for different attributes compared to the free version.
👉Note: This plugin offers a wide range of customization options allowing you to create common attribute styling like icon height, width, icon shapes other than round & square you can also customise the icon roundness, set border color & also set appearance for swatches, which we will explore!
HOVER/SELECTION STYLING: Along with the general styling options in the free version,the pro version allows you to set the selection Hover style in two additional ways
Border Style:
Enlarge Style:
TOOLTIP STYLING:
Apart from the general tooltip styling, the pro version offers more advanced styling such as:
Image Tooltip: Set border color, height & width for image
Term Tooltip: Set text color, background color & font size
Description Tooltip: Set text color, background color, font size and enable/disable box-shadow
SWATCH TYPES SPECIFIC STYLING: The free version offers styling only for one swatch type Button/ Label swatches. However, the pro comes with an option for customising like
1. Radio swatch styling
Set inner and outer color for the radio swatch upon hover.
Set both inner & outer color for the selected swatches.
2. Select swatch
Enable/ disable swatch drop-down style
ADDITIONAL DISPLAY STYLING: You can also set the display styling for
1. Featured Swatches styling: set height, width & font size of the featured icon
2. Additional info page swatches styling: set height & width of swatches icon in the additional info section
3. Shop page swatches styling: set height, width & font size for swatches on the shop page
ATTRIBUTE DESCRIPTION STYLING: Set font size & font color for attribute description
✅ FLEXIBLE SWATCH DISPLAY OPTIONS
Beyond the default style, swatches can be displayed in five unique ways, allowing for a more dynamic and user-friendly shopping experience.
Dropdown
Slider
Accordion
Horizontal Scroller
Vertical Scroller
✅ DISPLAY SWATCHES ON SHOP/ ARCHIVE PAGE
By displaying variation swatches on your WooCommerce Shop page/Archive page, your shoppers can quickly understand the variations that are available and that are not.
✅ MULTI-COLOR VARIATION SWATCHES (BICOLOR)
Showcase dual-colored products using bicolor swatches, where two colors appear inside a single icon. This feature is perfect for products with two-tone variations, making it easier for shoppers to visualize their options.
✅ ADDITIONAL DISPLAY OPTIONS FOR OUT-OF-STOCK VARIANTS
The Pro version offers two extra display options
Hide the variation and blur with cancel: to indicate out-of-stock variants
Styling options: to customize their appearance for a seamless shopping experience.
✅ SET STOCK LEFT ALERT
Alert shoppers when stock reaches a minimum level, creating urgency and encouraging faster purchases
👉Note: You can also display the stock left on the WooCommerce shop page, allowing shoppers to grab limited-stock products. Additionally, set a minimum value to trigger the stock left alert.
✅ GENERATE PRODUCT VARIATION LINK
The pro version lets you generate direct links for specific variations making purchases faster and more convenient for customers.
✅ QUICK SEARCH FOR SWATCH DESIGN & ATTRIBUTES
You can easily locate specific select swatch designs and attributes using the built-in search option, saving time and enhancing your experience.
✅ DISPLAY SWATCHES ON CART & CHECKOUT
Display the chosen image and color variations as a swatch on the cart and checkout page.
✅ CLEAR BUTTON STYLING
While the free version only has the option to clear on reset, the pro version of the variation swatch plugin helps in styling the clear button for your store themes
✅ SUPPORTED PLUGINS & THEMES
👉 PLUGINS
Yith WooCommerce Quick View
WooCommerce Product Bundle
WooCommerce Composite Products
WPC Smart Quick View for WooCommerce by WPClever
Elementor Page Builder Plugin
👉 THEMES
Store Front
Flatsome
Divi Builder
Astra
WoodMart
OceanWP
Porto
Enfold
Kedence
Motor
Hestia
Sydney
Neve
Spacious
Zakra etc..
Why ThemeHigh?
At themehigh, we specialize in providing thoughtful solutions to help you create your store in the easiest and simplest way possible, providing you with a smooth and enjoyable customization experience.
🏆 2 Million+ Customers
🏆 Quickest Turn-around Support
🏆 Most Lightweight Plugins
🔥 Explore More
If you like the Variation Swatches for WooCommerce, then consider checking out our other WordPress Plugins:
👉 Checkout Field Editor (Checkout Manager) for WooCommerce:
This Checkout Plugin from Themehigh lets you add 20 different types of custom checkout fields.
👉Extra Product Options For WooCommerce:
This Custom Product addons plugin lets you quickly add additional fields (19 custom field types) and sections to your WooCommerce Product page.
👉 Email Customizer for WooCommerce | Drag and Drop Email Templates Builder:
Email Customizer is a plugin that helps you effortlessly customise your WooCommerce transactional emails using its intuitive drag-and-drop builder.
👉 MultiStep Checkout for WooCommerce:
The Multistep checkout plugin helps you split the regular WooCommerce checkout process into multiple steps and create a simpler and more organized checkout experience.
Happy Users of Variation Swatches Plugin
Reza Manouchehri (@rezamnchr)⭐⭐⭐⭐⭐
I found this plugin the most useful among other ones, ReadMore
indagraf (@indagraf )⭐⭐⭐⭐
Very good plugin but the support is even better.
Good vibes and great professionalism in the support.
Recommended 100%.
myangelnz (@myangelnz) ⭐⭐⭐⭐⭐
I use the product options extension and it is fantastic! Does all you need and possibly more. I love the control you have with the options. Any issues or customisations I needed were completed efficiently and well. Thank You Theme High!
dragoso (@dragoso) ⭐⭐⭐⭐⭐
Support is super speedy and the PRO plugin is totally awesome and works like a charm. Very happy with the purchase! Thank you guys!
reza.sabourinejad (@rezasabourinejad) ⭐⭐⭐⭐⭐
Very high quality plugin with excellent features. Many features of this plugin are available in other plugins as premium features. But here you have everything available for free. Thanks to the plugin development and support team
OTHER USEFUL LINKS
👉 VIEW ALL FEATURES
👉 GET DOCUMENTATION
👉 GET THEMEHIGH SUPPORT
👉 JOIN COMMUNITY
👉 FOLLOW US ON Facebook, LinkedIn, Twitter & YouTube.
Reddit
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Variation Swatches for WooCommerce」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.1.0 | 1.1.1 | 1.2.0 | 2.0.0 | 2.0.1 | 2.0.2 | 2.0.3 | 2.0.4 | 2.0.5 | 2.0.6 | 2.0.7 | 2.0.8 | 2.0.9 | 2.1.0 | 2.2.0 | 2.3.0 | 2.3.1 | 2.3.2 | 2.3.3 | 2.3.4 | 2.3.5 | 2.3.6 | 2.3.7 | 2.3.8 | 2.3.9 | 2.4.0 | trunk |
延伸相關外掛（你可能也想知道）
Variation Swatches for WooCommerce 》為 WooCommerce 產品屬性打造美麗的顏色、圖片和按鈕變化的樣式, 如何安裝 WooCommerce 變化樣式外掛程式升級可變產品, , 變化樣式是易於使用的 WooCommerce ...。
Variation Swatches for WooCommerce by CartFlows 》rent swatch types: image, color, label, Easy to use and no complicated settings or configuration needed, Works with most well-coded WordPress theme...。
Variation Swatches for WooCommerce 》ooCommerce外掛將商品選項欄位變成單選框、圖片、顏色與標籤。透過使用這款 Variation Swatches for WooCommerce 外掛，您可以將商品選項屬性顯示成圖片、顏...。
Product Variations Swatches for WooCommerce 》Product Variations Swatches for WooCommerce 是一個專業的外掛，可讓您顯示和選擇變化產品的屬性。該外掛在顏色、按鈕、圖像、變異圖像、單選按鈕下顯示產...。
Variation Swatches for WooCommerce 》TH Variation Swatches for WooCommerce 是一個易於使用的免費插件，可替換默認調色板為專業風格和彩色調色板。插件界面友好，可無縫編輯變化。插件帶有三種...。
YaySwatches – Variation Swatches for WooCommerce 》YaySwatches 可以讓您將變體選擇器顯示為彩色樣板、圖像樣板、單選按鈕、按鈕等多種形式，讓您的客戶可以輕鬆在產品詳細資訊頁面上切換產品變體！, 在 WooCom...。
Product Variation Swatches for WooCommerce – Smart Swatches 》**Smart Swatches 介紹**, , Smart Swatches 讓您能夠添加互動式產品變體標籤（顏色、尺寸、圖案）以及漂亮的工具提示圖像。它也讓您能在 WooCommerce 商店和...。
SySwatches Variation Swatches For WooCommerce 》使用我們的「Color Image Variation Swatches For WooCommerce」外掛程式，可以將原本的變數屬性下拉選單轉換為外觀美觀的色彩圖像選擇器。您可以在所有常見...。
Variation Swatches for WooCommerce 》WooCommerce 變異色塊外掛是一個可靠的擴充功能，可以通過強大的 UI 在產品屬性上實現令人驚嘆的效果。使用 Aco Variation swatches for WooCommerce，將您的...。
GS Variation Swatches for WooCommerce 》GS WooCommerce Variation Swatches 是一款易於使用的 WooCommerce 產品屬性變化樣式插件，提供選擇變化產品屬性的美觀、專業體驗。它將產品變化選擇選項欄位...。
Variation Shop Product Sliders 》Variation Shop Product Sliders：使用「Variations Shop Product Sliders」外掛，您可以在商店頁面上顯示商品變化作為迷你滑塊。, 此外掛程式會將商店/類別...。
Variation image color switches for woocommerce 》這個外掛可以將 WooCommerce 預設的下拉式選單升級為開關式按鈕，並使用產品變異的預設圖片。, 相關連結：首頁 | 捐款 | 聯絡我們 | 支援。
Simple Variation Swatches for WooCommerce 》擁抱 WooCommerce 中煩人的舊下拉式變數選項，歡迎簡單易用的快速切換插件。這個直截了當的外掛程式，內含所有必要功能，可以用按鈕、色彩、圖片和單選框替換...。