ShopAgg WooCommerce 变体增强

将 WooCommerce 变体商品详情页的属性下拉框转换为横排按钮，并在变体设置了独立图片时显示缩略图。

📖 简介

ShopAgg WooCommerce 变体增强 是一款轻量级的免费 WordPress 插件，专为 WooCommerce 变体商品设计。

它能够自动将产品详情页中的变体属性下拉框（<select>）转换为直观的横排按钮（Button Swatches），并在变体设置了独立图片时，于按钮前方展示缩略图，从而显著提升用户体验与转化率。

插件完全免费，无任何 premium 锁定功能。

✨ 功能特性

• 🔘 下拉框 → 横排按钮：自动将所有变体属性下拉框转换为可换行的横排按钮（radiogroup）
• 🖼️ 变体缩略图：变体设置了独立图片时，在按钮文字前显示缩略图
• 🚫 智能禁用：根据其他属性的当前选择，自动禁用不可用的变体选项并更新缩略图
• 🔄 保留原生逻辑：完全兼容 WooCommerce 原生的库存、价格、主图、加入购物车和清除选择逻辑
• 📱 响应式设计：自适应移动端，按钮间距自动调整
• ♿ 无障碍支持：按钮使用 role="radio" 和 aria-* 属性，支持键盘导航与屏幕阅读器
• 🛡️ 优雅降级：JavaScript 未加载时仍显示原生下拉框，不影响购买流程
• ⚡ 零配置：启用即用，无需任何额外设置
• 🪶 轻量级：仅在变体商品详情页加载 CSS/JS 资源

📋 系统要求

🚀 安装

通过 WordPress 后台

1. 下载 shopagg-woo-variation-enhance.zip 压缩包
2. 在 WordPress 后台进入 插件 → 安装插件 → 上传插件
3. 上传压缩包并点击 现在安装
4. 安装完成后点击 启用插件

通过 FTP

1. 解压 shopagg-woo-variation-enhance.zip
2. 将 shopagg-woo-variation-enhance 文件夹上传到 /wp-content/plugins/ 目录
3. 在 WordPress 后台的 插件 页面启用本插件

前置条件

确保 WooCommerce 已安装并处于启用状态（本插件依赖 WooCommerce）。

🎯 使用方法

插件启用后即自动生效，无需任何额外设置：

1. 进入任意 变体商品 的详情页
2. 原先的属性下拉框将自动变为横排按钮
3. 点击按钮即可选择对应变体
4. 已选按钮会显示高亮边框
5. 不可用的变体会自动变灰禁用
6. 变体缩略图会自动出现在对应按钮前方

⚙️ 常问问题

插件是否会影响网站性能？

不会。插件仅在变体商品详情页加载极少的 CSS 和 JS 资源，且文件大小非常小。非变体商品页面不会加载任何额外资源。

JavaScript 被禁用时怎么办？

插件具备优雅降级机制。如果用户的浏览器禁用了 JavaScript，页面仍会显示 WooCommerce 原生下拉框，完全不影响购买流程。

与我的主题兼容吗？

插件使用标准的 WooCommerce 钩子与原生 CSS 类名操作 DOM，兼容绝大多数 WordPress 主题。如遇样式冲突，可通过少量自定义 CSS 覆盖调整。

插件是免费的吗？

是的，完全免费。没有付费版，没有 premium 功能锁定。

🛠️ 开发者

目录结构

shopagg-woo-variation-enhance/
├── readme.txt
├── shopagg-woo-variation-enhance.php    # 主入口文件
└── assets/
    ├── css/
    │   └── frontend.css                 # 前端样式
    └── js/
        └── frontend.js                  # 前端交互逻辑

自定义样式

如需自定义按钮外观，覆盖以下 CSS 类：

示例：修改已选按钮颜色

.shopagg-variation-option.is-selected {
    border-color: #0073aa;
    background: #0073aa;
    color: #fff;
}

👤 作者

📜 许可证

本插件基于 GPL-2.0-or-later 许可证发布，您可以自由使用、修改和分发。

Made with ❤️ by 庄朋龙