产品变体选择后价格后缀修改JavaScript代码失效问题排查

选择WooCommerce产品变体时，系统会动态重新渲染价格区域（包括.woocommerce-variation-price内的所有元素）。你原来的代码只在页面首次加载时执行一次，变体切换后新生成的后缀元素不会被修改，所以后缀会变回/m2。

方法1：监听WooCommerce变体更新事件（优先推荐） #

WooCommerce在变体加载完成后会触发特定JS事件，我们可以监听这些事件，每次变体更新后重新修改后缀：

document.addEventListener("DOMContentLoaded", function() {
    // 页面加载时先修改一次
    updatePriceSuffix();

    // 找到变体表单，监听相关事件
    const variationForm = document.querySelector('.variations_form');
    if (variationForm) {
        // 变体加载完成时触发
        variationForm.addEventListener('found_variation', updatePriceSuffix);
        // 变体切换时触发（兼容更多场景）
        variationForm.addEventListener('woocommerce_variation_has_changed', updatePriceSuffix);
    }
});

// 封装修改后缀的函数，方便重复调用
function updatePriceSuffix() {
    const suffixElement = document.querySelector(".surffix");
    if (suffixElement) {
        suffixElement.textContent = "/szt.";
    }
}

方法2：用MutationObserver监听DOM变化（兼容特殊场景） #

如果方法1不生效（比如主题/插件修改了事件逻辑），可以用DOM监听实时监控后缀内容变化，自动替换：

document.addEventListener("DOMContentLoaded", function() {
    const suffixElement = document.querySelector(".surffix");
    if (!suffixElement) return;

    // 初始修改后缀
    suffixElement.textContent = "/szt.";

    // 创建观察者，监听内容变化
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if ((mutation.type === 'childList' || mutation.type === 'characterData') && suffixElement.textContent !== "/szt.") {
                suffixElement.textContent = "/szt.";
            }
        });
    });

    // 配置观察选项：监听文本内容变化
    observer.observe(suffixElement, {
        characterData: true,
        childList: true,
        subtree: true
    });
});

• 确保代码里的类名surffix（两个f）和HTML结构完全一致，不要拼写错误。
• 方法1更贴合WooCommerce的原生逻辑，执行效率更高，优先使用；方法2是通用兜底方案，适合各种DOM动态更新场景。

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