请求完善WooCommerce可变商品标题随变体切换的JS代码

原代码仅在页面加载时生效，切换变体时标题不更新，核心问题是函数名拼写错误，同时还有可优化的细节，以下是修复并优化后的代码：

修复后的完整代码 #

jQuery(document).ready(function($) {
    // 保存原始商品标题，避免重复拼接
    const originalTitle = $('.product-type-variable .product_title').text().trim();

    function updateProductTitle() {
        let variationSuffix = '';
        // 遍历所有变体选择器，收集选中的选项文本
        $('.variations select').each(function() {
            const selectedText = $(this).find(':selected').text().trim();
            if (selectedText && !$(this).hasClass('reset_variations')) {
                variationSuffix += ' ' + selectedText;
            }
        });
        // 更新标题，拼接原始标题和变体后缀
        $('.product-type-variable .product_title').text(originalTitle + variationSuffix);
    }

    // 页面加载时初始化标题
    updateProductTitle();

    // 监听变体选择变更（兼容WooCommerce原生事件）
    $('.variations_form').on('show_variation', function() {
        updateProductTitle();
    });

    // 监听变体重置事件
    $('.variations_form').on('hide_variation', function() {
        updateProductTitle();
    });
});

关键修复与优化点 #

• 修正函数名错误：原代码change事件中调用的add_variation_txt_to_titl()少了最后一个字母e，导致切换时无法触发函数
• 获取选项文本而非值：改用$(this).find(':selected').text()替代val()，确保拿到的是前端显示的变体名称（如“黑色”），而非后台设置的value值（可能是ID或SKU）
• 使用WooCommerce原生事件：用show_variation和hide_variation事件替代原生change事件，兼容WooCommerce通过AJAX加载变体的场景
• 避免重复拼接：保存原始标题的trim版本，每次更新都基于原始标题重新拼接，防止多次切换后标题冗余
• 处理空选择：判断选中文本是否为空，避免标题出现多余空格

内容的提问来源于stack exchange，提问作者Абушаев Руслан