如何修复代码实现WooCommerce可变产品的数量实时小计计算

你修改的代码仅获取了可变产品的默认变体价格，但没有监听用户切换变体的操作，导致切换变体后小计仍使用初始价格计算，无法实时更新。以下是完善后的代码，同时支持简单产品和可变产品的实时小计计算：

add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_product_price_recalculate' );
function bbloomer_product_price_recalculate() {
    global $product;

    // 初始化价格：简单产品取当前价格，可变产品取默认变体价格（无默认则取最低变体价）
    if ( $product->is_type( 'variable' ) ) {
        $default_attrs = $product->get_default_attributes();
        $default_variation_id = $product->get_matching_variation( $default_attrs );
        $initial_price = $default_variation_id ? wc_get_product( $default_variation_id )->get_price() : $product->get_variation_price( 'min' );
    } else {
        $initial_price = $product->get_price();
    }

    echo '<div id="subtot" style="display:inline-block; margin-left:15px;">Total: <span></span></div>';
    $currency = get_woocommerce_currency_symbol();

    wc_enqueue_js( "
        // 统一处理小计计算的函数
        function updateSubtotal(qty, price) {
            var priceString = (price * qty).toFixed(2);
            $('#subtot > span').html('" . esc_js( $currency ) . "' + priceString);
        }

        // 数量变化时更新小计
        $('[name=quantity]').on('input change', function() {
            var currentQty = $(this).val() || 1;
            // 优先获取当前选中变体的价格，无选中则用初始价格
            var currentPrice = parseFloat( $('.woocommerce-variation-price .amount').data('price') || '" . esc_js( $initial_price ) . "' );
            updateSubtotal(currentQty, currentPrice);
        }).trigger('change');

        // 可变产品切换变体时更新小计
        $('.variations_form').on('show_variation', function(event, variation) {
            var currentQty = $('[name=quantity]').val() || 1;
            updateSubtotal(currentQty, variation.display_price);
        });

        // 变体选择重置时（取消选择属性），恢复初始价格计算
        $('.variations_form').on('hide_variation', function() {
            var currentQty = $('[name=quantity]').val() || 1;
            updateSubtotal(currentQty, '" . esc_js( $initial_price ) . "');
        });
    " );
}

关键改进说明 #

• 新增updateSubtotal函数，统一处理小计计算逻辑，避免重复代码
• 监听可变产品的show_variation事件（用户选中变体时触发），实时获取当前变体的显示价格更新小计
• 监听hide_variation事件（用户取消变体选择时），自动切换回初始价格计算
• 数量变化时，优先读取当前选中变体的价格，兼容无变体选中的场景
• 处理数量为空的边界情况，默认按1件计算小计

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