Products Variation Swatches – 让您的 WooCommerce 商店产品页面更出色

在电子商务领域，顾客的购物体验直接影响转化率和销售额。当顾客浏览您的产品页面时，一个清晰、直观的选择介面能够大幅提升购买意愿。然而，传统的 WooCommerce 变体产品下拉选单往往不够直观，顾客需要多次点击才能看到不同变体的样式，这会降低用户体验。

Products Variation Swatches 是一款专为 WooCommerce 的变体产品设计的革命性插件，它将预设的下拉选单替换为精美的视觉化样式，包括颜色方块和图片缩图，让顾客能够直观地看到并选择产品变体。

为什么需要 Products Variation Swatches？

提升用户体验

传统的下拉选单需要顾客点击、展开、选择，过程繁琐且无法直观地看到选项之外观。使用 Products Variation Swatches，顾客只需一眼就能看到所有可用的颜色、尺寸或图片选项，点击即可选择，大幅简化了操作流程。

增加视觉吸引力

色彩鲜明的颜色样式和清晰的图片预览能够吸引顾客的注意力，让产品页面更具吸引力和专业感。视觉化的呈现方式比纯文字更容易让顾客留下深刻印象。

减少退换货率

顾客能够清楚地看到他们选择的颜色和款式，购买前对产品有更准确的预期，这会减少因期望落差而导致的退换货情况。

提升转化率

简化的选择流程和直观的操作介面能够提高顾客完成购买的机率。研究显示，视觉化的产品选择介面能够显著提升电商网站的转化率。

Products Variation Swatches 强大功能

1. 颜色样式 (Color Swatches) ✅

为您的产品属性（如颜色）设置精美的颜色方块。顾客可以一眼看到所有可用的颜色选项，点击即可选择。颜色方块支援悬停提示，显示属性名称。

2. 图片样式 (Image Swatches) ✅

对于图片类型的属性（如图案、款式），可以使用图片缩图作为样式。这样能让顾客更清楚地看到每个变体的具体外观，特别适合服装、饰品等外观差异大的产品。

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

这是一个突破性的功能！每个属性项目（例如红色、蓝色）可以上传最多 3 张图片，第一张图片将作为预设图片用于样式和主产品图片展示。这让您能够为每个变体展示多个角度或细节图片。

4. 变体图库 (Variation Gallery) ✅

不仅是属性项目可以有多张图片，每个产品变体本身也可以拥有自己的图库。您可以为每个变体上传多张图片，顾客选择不同变体时，图库内容会即时更新。

5. 即时图片切换 (Instant Image Switching) ✅

点击样式之后，主产品图片会立即切换到该变体的图片。这种即时的回馈让顾客能够快速预览不同变体的样式，无需重新载入页面。

6. 客制化样式 (Customizable Styles) ✅

插件提供了丰富的样式选项，让您能够根据网站的设计风格进行调整：

• 大小：小型（30px）、中型（40px）或大型（50px）
• 形状：方形或圆形
• 标签字体大小：可调整标签文字大小
• 目录页面样式：可在产品列表页面显示样式

7. 多语言支援 (Multi-language Support) ✅

插件完整支援繁体中文、简体中文和英文，您的商店的国际客户都能获得一致的高品质体验。

8. 性能优化 (Performance Optimized) ✅

我深知网站速度对用户体验和 SEO 的重要性，因此插件使用了快取机制和优化的查询语句，确保加载速度不受影响。

9. 响应式设计 (Mobile Responsive) ✅

在智慧型手机、平板电脑和桌面电脑上都能完美运作。样式的大小和布局会根据萤幕尺寸自动调整，确保所有设备上的用户都能享受到一致的体验。

10. CSV 汇入汇出 (CSV Import/Export) ✅

您可以透过 CSV 档案批量汇入或汇出属性图片，这对于有大量产品需要管理的商店来说非常实用。汇入汇出功能支援多图片，每个属性项目可包含多张图片。

系统需求

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

安装与设定

1. 安装插件

1. 下载 Products Variation Swatches 插件的 ZIP 档案
2. 前往 WordPress 后台 > 插件 > 安装插件 > 上传插件
3. 选择下载的 ZIP 档案并安装
4. 启用插件

2. 启用插件

1. 前往 WooCommerce > 设定 > 产品 > Variation Swatches
2. 勾选“启用插件”选项
3. 储存变更

3. 配置产品属性

1. 前往产品 > 属性
2. 编辑或新增属性项目（例如：红色、蓝色、大型、小型）
3. 对于每个项目，设定：
   • 显示类型：选择“颜色”或“图片”
   • 颜色：如果选择颜色类型，则选择一个颜色
   • 图片：如果选择图片类型，则上传一张图片
   • 大小：選擇小型（30px）、中型（40px）或大型（50px）
   • 形狀：選擇方形或圓形
4. 储存属性

4. 新增多图片

1. 编辑一个变体产品
2. 前往“属性多图片”标签页
3. 对于每个属性项目，点击“新增图片”上传多张图片
4. 第一张图片将作为预设图片，用于样式和主产品图片显示
5. 每个属性项目最多可以新增 3 张图片
6. 储存产品

5. 新增变体图库

1. 编辑一个变体产品
2. 前往变体（Variations）标签页
3. 对于每个变体，找到“变体图库”区块
4. 点击“新增图片”上传多张图片
5. 拖曳图片以重新排序
6. 储存产品

使用指南

完成设定后，插件将自动在产品页面替换下拉选单为样式。顾客可以：

• 点击颜色或图片样式来选择变体
• 看到点击样式时图片的即时更新
• 触摸悬停时显示属性名称的提示
• 体验流畅的过渡动画效果

版本更新

版本 1.5.0 – 全新多圖片功能

• 新增属性项目的多图片支援（每个项目最多 3 张图片）
• 第一张图片用作样式和主产品图片显示的预设图片
• CSV 汇入汇出现在支援每个属性项目最多 3 张图片
• 更新了后台介面，便于多图片管理
• 改进了前台图片切换逻辑

版本 1.4.8

• 修复了在某些主题中的样式显示问题
• 修复了快速预览中的样式显示问题

版本 1.4.7

• 新增标签字体大小设定
• 新增目录页面样式设定

常见问题

Q: 这个插件适用于任何主题吗？

A: 是的，插件被设计为能够与任何正确编码的 WooCommerce 主题兼容。如果您遇到显示问题，请联系我，我会尽力帮助解决。

Q: 我可以在同一个产品上同时使用颜色样式和图片样式吗？

A: 可以！您可以为不同的属性混合使用不同的显示类型。例如，颜色属性使用颜色样式，图案属性使用图片样式。

Q: 这个插件会让我的网站变慢吗？

A: 不会。插件使用了快取机制和优化的查询语句，以维持快速的性能。我非常重视网站速度，因此确保插件不会对页面加载产生负面影响。

Q: 我可以客制化样式的外观吗？

是的，您可以在属性设定中选择样式大小和形状。开发者也可以透过 CSS 进一步客制化外观。

Q: 支援多语言吗？

A: 是的，插件完整支援繁体中文、简体中文和英文。

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

A: 您可以前往属性管理页面，使用 CSV 汇入汇出功能批量管理属性图片。每个属性项目可以包含最多 3 张图片的 URL。

技术支援

如果在使用过程中遇到任何问题或有功能建议，请随时联系我：

• 插件页面：https://hugoshih.eu.org/products_variation_swatches/
• 开发者：Hugo Shih
• 开发者网站：https://hugoshih.eu.org

总结

Products Variation Swatches（版本 1.5.39）是一款功能强大、用户友好的 WooCommerce 插件，它能够彻底改变您的产品页面呈现方式。透过将枯燥的下拉选单替换为精美的色彩和图片样式，您可以为顾客提供直观、快速的购物体验。

无论您经营服装、饰品、家具还是任何其他需要展示不同变体的产品，这款插件都能帮助您提升网站的专业度和用户体验，进而提高转化率和销售额。

立即安装 Products Variation Swatches，让您的 WooCommerce 商店产品页面焕然一新！