价格为0时用jQuery添加类禁用Add to Cart按钮失效如何解决

失效原因&修复方案 #

• 核心问题1：jQuery('.price').text()获取的文本默认携带首尾空格、换行符，和$0严格匹配不成立，需先清洗文本内容
• 核心问题2：仅添加disable类无法真正禁用按钮，需要同时给按钮添加原生disabled属性才能阻断点击操作
• 核心问题3：body onload触发时机受资源加载速度影响，容易和WordPress脚本加载顺序冲突，更推荐用jQuery DOM就绪事件触发逻辑
• 额外注意：需要补充disable类对应的样式规则，才能在视觉上体现按钮禁用状态

完整实现代码 #

1. 替换原有jQuery代码

无需绑定body onload，直接将以下代码添加到主题头部/页脚脚本区域即可：

<script>
jQuery(document).ready(function($) {
  // 清除价格文本所有空白字符后再判断
  var priceVal = $('.price').text().replace(/\s/g, '');
  var $addCartBtn = $('.single_add_to_cart_button');
  
  if(priceVal === '$0') {
    $addCartBtn.addClass('disable').attr('disabled', true);
  } else {
    $addCartBtn.removeClass('disable').attr('disabled', false);
  }
});
</script>

2. 补充禁用样式

将以下CSS添加到主题自定义CSS配置中：

.single_add_to_cart_button.disable {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

排查指南 #

如果修改后仍不生效，按以下步骤排查：

• 打开浏览器开发者工具控制台，确认没有jQuery相关报错
• 控制台执行console.log($('.price').text().replace(/\s/g, ''))，打印清洗后的价格文本，确认取值符合预期
• 控制台执行console.log($('.single_add_to_cart_button').length)，确认能正确匹配到加购按钮元素

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