修复WooCommerce可变产品单页分期价格动态更新问题

问题根源 #

1. 简单产品和可变产品的小部件使用了相同ID instalmentCalc，DOM重复ID会导致JS无法正确定位元素
2. 未监听WooCommerce变体切换的前端事件，无法在变体切换时更新分期金额
3. 重复引入instalment.js脚本，造成冗余加载
4. 变体价格钩子中直接追加小部件，会导致切换变体时重复生成DOM元素

修改后的完整代码 #

function mobicred_widget_display() {
    global $post;

    if ( function_exists( "wc_get_product" ) ) {
        $product = wc_get_product( $post->ID );
    } else {
        $product = new WC_Product( $post->ID );
    }

    // 简单产品直接输出带初始价格的小部件容器
    if ( $product->is_type( 'simple' ) ) {
        $price = $product->get_price();
        ?>
        <script src="https://mobicred.co.za/plugins/instalment.js"></script>
        <div class="mobicred-instalment-calc" data-amount="<?php echo esc_attr( $price ); ?>"></div>
        <?php
    } 
    // 可变产品输出空容器，后续通过JS动态填充金额
    elseif ( $product->is_type( 'variable' ) ) {
        ?>
        <script src="https://mobicred.co.za/plugins/instalment.js"></script>
        <div class="mobicred-instalment-calc" data-amount="0"></div>
        <?php
    }
}
add_action( 'woocommerce_single_product_summary', 'mobicred_widget_display', 15 );

// 移除原变体价格钩子的冗余处理函数
remove_filter( 'woocommerce_variation_price_html', 'mobicred_variation_widget_display', 10, 2 );
remove_filter( 'woocommerce_variation_sale_price_html', 'mobicred_variation_widget_display', 10, 2 );

// 添加前端JS脚本，监听变体切换事件更新分期金额
function mobicred_variation_update_script() {
    global $post;
    $product = wc_get_product( $post->ID );
    if ( ! $product->is_type( 'variable' ) ) return;
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 监听变体选中事件，更新分期金额
            $('form.variations_form').on('show_variation', function(event, variation) {
                var instalmentCalc = $('.mobicred-instalment-calc');
                instalmentCalc.attr('data-amount', variation.display_price);
                // 根据instalment.js的API重新初始化计算器
                if (typeof MobicredInstalment !== 'undefined') {
                    MobicredInstalment.init();
                } else {
                    // 若脚本无暴露初始化方法，可重新加载脚本作为备选
                    $.getScript('https://mobicred.co.za/plugins/instalment.js');
                }
            });

            // 未选择变体时重置金额
            $('form.variations_form').on('hide_variation', function() {
                var instalmentCalc = $('.mobicred-instalment-calc');
                instalmentCalc.attr('data-amount', '0');
            });
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'mobicred_variation_update_script' );

关键修改说明 #

• 统一容器类名：用mobicred-instalment-calc代替重复ID，避免DOM冲突
• 区分产品类型加载：简单产品直接输出带初始价格的容器，可变产品输出空容器
• 前端事件监听：利用WooCommerce原生的show_variation和hide_variation事件，实时更新分期金额
• 脚本优化：只加载一次instalment.js，避免重复请求
• 移除冗余钩子：删除原变体价格钩子的处理逻辑，改用前端动态更新，避免DOM重复生成

注意事项 #

如果instalment.js有特定的初始化方法，请替换代码中对应的初始化逻辑（比如MobicredInstalment.init()），确保变体切换时能重新计算分期。

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