WooCommerce：根据商品价格显示/隐藏加入购物车按钮问题求助

问题分析 #

你的代码存在以下几个关键问题：

1. 静态的价格变量：newVal 只在页面加载时初始化一次，之后不会自动更新为当前价格。所以在 change 事件处理函数中，你一直在比较初始价格而非实时价格。
2. 错误的事件监听：.price 元素通常是普通文本容器（如 <div> 或 <span>），这类元素不会触发 change 事件——该事件仅针对表单输入类元素（如 <input>、<select>）。
3. 逻辑错误的价格更新：priceChangeListener 函数仅在 newVal 不等于零时才更新它，这意味着如果价格从非零变回零，newVal 会停留在之前的非零值，导致判断失效。
4. 缺少页面加载时的初始检查：页面加载后没有立即执行一次价格判断，所以初始价格为零时，按钮不会自动隐藏，要等 500ms 后才可能触发（还不一定正确）。
5. 硬编码样式的不良实践：直接通过 attr("style") 设置 !important 样式，不利于维护，推荐用 CSS 类或原生 jQuery 方法控制显示隐藏。

简洁的解决方案 #

我们可以通过两种更高效的方式实现需求：

方案一：通用型（适配所有商品类型）

使用 MutationObserver 监测价格元素的文本变化，一旦变化就执行显示/隐藏逻辑，同时页面加载时立即执行一次初始判断：

jQuery(document).ready(function($) {
    const zeroPrice = "0,00 €";
    const addToCartBtn = $('.single_add_to_cart_button');
    const priceElement = $('.price');

    // 核心判断逻辑
    function toggleAddToCartButton() {
        const currentPrice = priceElement.text().trim();
        if (currentPrice === zeroPrice) {
            addToCartBtn.hide();
        } else {
            addToCartBtn.show();
        }
    }

    // 页面加载时执行一次初始判断
    toggleAddToCartButton();

    // 监听价格元素的文本变化
    const observer = new MutationObserver(() => toggleAddToCartButton());
    observer.observe(priceElement[0], { childList: true, subtree: true });
});

方案二：针对 WooCommerce 可变商品

如果是带选项的可变商品，可以直接监听 WooCommerce 原生事件，更精准高效：

jQuery(document).ready(function($) {
    const zeroPrice = "0,00 €";
    const addToCartBtn = $('.single_add_to_cart_button');
    const priceElement = $('.price');

    function toggleAddToCartButton() {
        const currentPrice = priceElement.text().trim();
        addToCartBtn.toggle(currentPrice !== zeroPrice);
    }

    // 初始执行
    toggleAddToCartButton();

    // 监听商品选项选中事件
    $('form.variations_form').on('show_variation', toggleAddToCartButton);
    // 监听商品选项取消选中事件
    $('form.variations_form').on('hide_variation', toggleAddToCartButton);
});

优化说明 #

• 用 trim() 去除价格文本中的多余空格，避免因空格导致判断失误。
• 替代低效的 setInterval 轮询，改用事件驱动或 DOM 变化监测，性能更优。
• 核心逻辑封装为独立函数，便于复用和维护。

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