咨询：Radio Button选中时修改WooCommerce产品图片边框颜色

1. 编写基础CSS样式 #

先给产品缩略图设置默认灰色边框，同时定义对应颜色的边框类：

/* 默认灰色边框 */
.woocommerce ul.products li.product a img {
  border: 2px solid #ccc;
  transition: border-color 0.3s ease; /* 可选：添加平滑过渡动画 */
}

/* 黑色边框类 */
.product-thumbnail-black {
  border-color: #000 !important;
}

/* 蓝色边框类 */
.product-thumbnail-blue {
  border-color: #0066cc !important;
}

/* 白色边框类，加阴影避免和背景融合 */
.product-thumbnail-white {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px #ccc;
}

2. 用JS监听单选框状态变化 #

假设你的颜色筛选单选框name属性为filter_color，每个选项的value分别是black、blue、white，添加以下JS代码动态切换边框：

// 遍历所有颜色单选框
document.querySelectorAll('input[name="filter_color"]').forEach(radio => {
  // 监听单选框切换事件
  radio.addEventListener('change', function() {
    // 先移除所有颜色边框类
    document.querySelectorAll('.woocommerce ul.products li.product a img').forEach(img => {
      img.classList.remove('product-thumbnail-black', 'product-thumbnail-blue', 'product-thumbnail-white');
    });
    
    // 选中当前颜色时添加对应类
    if(this.checked) {
      const color = this.value;
      document.querySelectorAll('.woocommerce ul.products li.product a img').forEach(img => {
        img.classList.add(`product-thumbnail-${color}`);
      });
    }
  });

  // 页面加载时，给默认选中的颜色设置对应边框
  if(radio.checked) {
    const color = radio.value;
    document.querySelectorAll('.woocommerce ul.products li.product a img').forEach(img => {
      img.classList.add(`product-thumbnail-${color}`);
    });
  }
});

3. 适配AJAX加载场景 #

如果你的筛选是AJAX异步加载产品（比如用了第三方筛选插件），需要额外监听AJAX完成事件，确保新加载的产品也能应用边框：

// 监听WooCommerce AJAX筛选完成事件
document.addEventListener('wc_ajax_product_filtered', function() {
  const checkedRadio = document.querySelector('input[name="filter_color"]:checked');
  if(checkedRadio) {
    const color = checkedRadio.value;
    document.querySelectorAll('.woocommerce ul.products li.product a img').forEach(img => {
      img.classList.remove('product-thumbnail-black', 'product-thumbnail-blue', 'product-thumbnail-white');
      img.classList.add(`product-thumbnail-${color}`);
    });
  }
});

部署说明 #

• CSS代码可放到主题的「自定义CSS」面板（外观 → 自定义 → 额外CSS）
• JS代码可加到主题的footer.php文件里（放在</body>标签之前），或者用自定义JS插件添加
• 确保单选框的value值和CSS类的后缀完全匹配（比如value是black，类是product-thumbnail-black）

内容的提问来源于stack exchange，提问作者Benb1