Products Variation Swatches – Make Your WooCommerce Store Product Pages Better

In e-commerce, customer shopping experience directly impacts conversion rates and sales. When customers browse your product pages, a clear and intuitive selection interface can significantly boost purchase intent. However, traditional WooCommerce variant product drop-down menus are often not intuitive, requiring multiple clicks to view different variant styles, which can reduce user experience.

Products Variation Swatches It is a revolutionary plugin designed for WooCommerce variants that replaces the default drop-down menus with a beautiful visual style, including color blocks and image thumbnails, allowing customers to easily see and select product variants.

Why do I need Products Variation Swatches?

Improved user experience

Traditional drop-down menus require customers to click, expand, and select, making the process cumbersome and not visually apparent to see the appearance of the options. With Products Variation Swatches, customers can see all available color, size, or image options at a glance and select by clicking, greatly simplifying the process.

增加視覺吸引力

Colorful color schemes and clear image previews can attract customers' attention, making product pages more attractive and professional. Visual representations are easier for customers to remember than pure text.

Reducing return and exchange rates

顧客能夠清楚地看到他們選擇的顏色和款式，購買前對產品有更準確的預期，這會減少因期望落差而導致的退換貨情況。

提升轉化率

Simplified selection processes and intuitive operation interfaces increase the likelihood that customers will complete a purchase. Research shows that a visualized product selection interface can significantly increase conversion rates on e-commerce websites.

Products Variation Swatches Powerful Features

1. Color Swatches (Color Swatches) ✅

Set beautiful color boxes for your product attributes (such as color). Customers can see all available color options at a glance and select them with a click. Color boxes support hover tips, displaying attribute names.

2. Image Swatches ✅

For image-type attributes (such as patterns and styles), use image thumbnails as styles. This allows customers to clearly see how each variant looks, especially for products with significant visual differences, such as clothing and accessories.

3. 多圖片支援 (Multi-Image Support) ✅

This is a breakthrough feature! Each attribute item (such as red, blue) can upload up to 3 images, the first image will be used as the default image for style and main product image display. This allows you to display multiple angles or detail images for each variant.

4. Variation Gallery ✅

不僅是屬性項目可以有多張圖片，每個產品變體本身也可以擁有自己的圖庫。您可以為每個變體上傳多張圖片，顧客選擇不同變體時，圖庫內容會即時更新。

5. Instant Image Switching (Instant Image Switching) ✅

After clicking a style, the main product image immediately switches to the image for that variant. This instant feedback allows customers to quickly preview different styles without having to reload the page.

6. Customizable Styles (Customizable Styles) ✅

插件提供了豐富的樣式選項，讓您能夠根據網站的設計風格進行調整：

• Size: Small (30px), Medium (40px), or Large (50px)
• Shape：方形或圓形
• Label font size：可調整標籤文字大小
• Directory page style: Styles can be displayed on the product list page

7. Multi-language Support ✅

The plugin fully supports Traditional Chinese, Simplified Chinese, and English, providing customers with consistent, high-quality experiences across all international markets.

8. Performance Optimized (✅)

I am well aware of the importance of website speed for user experience and SEO, so the plugin uses caching mechanisms and optimized query statements to ensure that loading speed is not affected.

9. Responsive design (Mobile Responsive) ✅

Works perfectly on smartphones, tablets, and desktops. The size and layout of the style adjusts automatically according to screen size, ensuring a consistent experience for users on all devices.

10. CSV Import/Export ✅

您可以透過 CSV 檔案批量匯入或匯出屬性圖片，這對於有大量產品需要管理的商店來說非常實用。匯入匯出功能支援多圖片，每個屬性項目可包含多張圖片。

System requirements

• WordPress 6.0 或更高版本
• WooCommerce 7.0 or higher
• PHP 7.4 or higher

Installation and setup

1. Install the plugin

1. Download the ZIP file for the Products Variation Swatches plugin.
2. Go to the WordPress backend > Plugins > Install Plugins > Upload Plugins
3. 選擇下載的 ZIP 檔案並安裝
4. Activate the plugin

2. Activate the plugin

1. 前往 WooCommerce > 設定 > 產品 > Variation Swatches
2. Check the "Enable plugins" option
3. 儲存變更

3. 配置產品屬性

1. Go to Products > Properties
2. 編輯或新增屬性項目（例如：紅色、藍色、大型、小型）
3. For each item, set the following:
   • Display type: Select "color" or "image"
   • 顏色：如果選擇顏色類型，則選擇一個顏色
   • 圖片：如果選擇圖片類型，則上傳一張圖片
   • 大小：選擇小型（30px）、中型（40px）或大型（50px）
   • 形狀：選擇方形或圓形
4. Save attributes

4. Add multiple images

1. Edit a variant product
2. 前往「屬性多圖片」標籤頁
3. For each attribute item, click "Add Image" to upload multiple images
4. The first image will be used as the default image for style and main product image display
5. Each attribute item can have up to 3 images added.
6. 儲存產品

5. 新增變體圖庫

1. Edit a variant product
2. 前往變體（Variations）標籤頁
3. 對於每個變體，找到「變體圖庫」區塊
4. Click "Add image" to upload multiple images
5. 拖曳圖片以重新排序
6. 儲存產品

User Guide

完成設定後，插件將自動在產品頁面替換下拉選單為樣式。顧客可以：

• Click on colors or image styles to select variants
• See the image update instantly when you click the click style
• Touch to hover over attribute names for a tooltip
• 體驗流暢的過渡動畫效果

Version updates

版本 1.5.0 – 全新多圖片功能

• 新增屬性項目的多圖片支援（每個項目最多 3 張圖片）
• 第一張圖片用作樣式和主產品圖片顯示的預設圖片
• CSV import and export now support a maximum of three images per attribute item
• 更新了後台介面，便於多圖片管理
• 改進了前台圖片切換邏輯

Version 1.4.8

• Fixed style display issues in certain themes
• Fixed a style display issue in the quick preview

Version 1.4.7

• New label font size settings
• Add a directory page style setting

常見問題

Q: Does this plugin work with any theme?

A: Yes, the plugin is designed to be compatible with any properly coded WooCommerce theme. If you encounter display issues, please contact me and I will do my best to help resolve them.

Q: Can I use both color styles and image styles on the same product?

A: 可以！您可以為不同的屬性混合使用不同的顯示類型。例如，顏色屬性使用顏色樣式，圖案屬性使用圖片樣式。

Q: 這個插件會讓我的網站變慢嗎？

A: No. The plugin uses caching mechanisms and optimized query statements to maintain fast performance. I place a strong emphasis on website speed, so I make sure the plugin does not negatively impact page load times.

Q: 我可以客製化樣式的外觀嗎？

是的，您可以在屬性設定中選擇樣式大小和形狀。開發者也可以透過 CSS 進一步客製化外觀。

Q: 支援多語言嗎？

A: Yes, the plugin fully supports Traditional Chinese, Simplified Chinese, and English.

Q: 如何使用 CSV 匯入匯出功能？

A: 您可以前往屬性管理頁面，使用 CSV 匯入匯出功能批量管理屬性圖片。每個屬性項目可以包含最多 3 張圖片的 URL。

技術支援

If you encounter any problems during use or have suggestions for improvements, please feel free to contact me anytime:

• Plugin page: https://hugoshih.eu.org/products_variation_swatches/
• Developers：Hugo Shih
• Developer website: https://hugoshih.eu.org

Summarize

Products Variation Swatches(Version 1.5.39) is a powerful and user-friendly WooCommerce plugin that completely transforms the way your product pages are presented. By replacing dull drop-down menus with beautiful color and image styles, you can provide customers with an intuitive and fast shopping experience.

Whether you sell clothing, accessories, furniture, or any other product that requires displaying different variations, this plugin can help you enhance your website's professionalism and user experience, thereby increasing conversion rates and sales.

立即安裝 Products Variation Swatches，讓您的 WooCommerce 商店產品頁面煥然一新！