WooCommerce站点选择Stock定价时隐藏Color产品属性的实现问题

原有代码问题 #

• 逻辑判断错误：你错误获取了stock选项元素而非定价下拉框的当前选中值，selected.onchange=="stock"的判断条件完全不成立
• 事件绑定不匹配：定价下拉框的onchange属性绑定的是getSelectValue函数，你写的hideStock函数根本不会被触发
• 缺少反向逻辑：没有处理用户切回Retail选项时，重新显示颜色选择区域的逻辑

修正代码 #

不需要改动现有HTML结构，直接替换原有JS代码即可，兼容WooCommerce的变体加载逻辑：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取定价下拉框元素
  const pricingSelect = document.getElementById('pa_pricing');
  // 这里获取颜色下拉框所在的整行，隐藏时连带左侧Label一起隐藏效果更自然
  const colorRow = document.getElementById('pa_color').closest('tr');
  // 页面加载时先判断一次初始状态
  toggleColorDisplay();
  // 绑定定价下拉框切换事件
  pricingSelect.addEventListener('change', toggleColorDisplay);

  function toggleColorDisplay() {
    const selectedVal = pricingSelect.value;
    if (selectedVal === 'stock') {
      // 隐藏颜色行
      colorRow.style.display = 'none';
      // 如果只需要禁用下拉框不隐藏，替换上面一行为下面的代码即可
      // document.getElementById('pa_color').setAttribute('disabled', true);
    } else {
      // 恢复显示颜色行
      colorRow.style.display = '';
      // 对应禁用的恢复代码
      // document.getElementById('pa_color').removeAttribute('disabled');
    }
  }
});

如果你的站点使用WooCommerce默认加载的jQuery，也可以用更简洁的写法：

jQuery(document).ready(function($) {
  const $pricing = $('#pa_pricing');
  const $colorRow = $('#pa_color').closest('tr');
  
  function toggleColor() {
    $pricing.val() === 'stock' ? $colorRow.hide() : $colorRow.show();
  }
  toggleColor();
  $pricing.on('change', toggleColor);
});

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