WooCommerce变体选择后数量变更未触发innerHTML更新求助

你的代码在手动修改产品数量时正常，但切换变体（系统自动设置最小数量15）后无法同步更新输出，核心原因是：WooCommerce切换变体时通过JavaScript直接修改数量输入框的value属性，这种操作不会触发change事件，而你的脚本仅监听了change事件，因此无法捕捉到该变化。

不需要修改[name=quantity]的属性，通过补充监听WooCommerce专属的变体事件即可解决，以下是修改后的完整代码：

add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_output_text' );
 
function qty_output_text() {
   global $product;
    if ( $product->is_type('variable') && is_product() ) {
    ?>
    <script>
    jQuery(document).ready(function($) {
        // 封装数量更新逻辑，避免重复代码
        function updateQtyDisplay() {
            var currentQty = $('[name=quantity]').val();
            document.getElementById("test123").innerHTML = currentQty + "K = " + currentQty + " test";
        }

        // 页面初始化时先设置一次初始值
        updateQtyDisplay();

        // 监听手动修改数量的场景（输入、加减按钮点击）
        $('[name=quantity]').on('input change', function() {
            updateQtyDisplay();
        });

        // 监听WooCommerce变体切换事件，变体加载完成后同步更新
        $('form.variations_form').on('show_variation', function() {
            updateQtyDisplay();
        });
    });
    </script>
    <?php
   }
}

代码说明： #

1. 封装更新函数：将输出更新逻辑写成独立函数updateQtyDisplay，减少重复代码，便于维护。
2. 初始化执行：页面加载完成后立即执行一次函数，确保初始状态下有正确输出。
3. 多事件监听数量框：用input + change事件覆盖手动输入、点击数量加减按钮等所有手动修改场景。
4. 监听变体切换事件：show_variation是WooCommerce内置的事件，当变体加载完成、数量框值被系统修改后会触发，此时调用更新函数同步输出内容。

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