WooCommerce商品数量变更时自动更新单商品价格需求及问题

嘿，针对你WooCommerce商店里商品数量变更自动更新总价的需求（还要兼容简单和可变产品），我整理了一套经过验证的解决方案，能解决你之前代码在可变产品上表现不佳的问题！

下面是完整的代码方案，你可以把它添加到主题的functions.php文件中，或者使用自定义代码插件来集成：

// 在商品详情页添加总价显示容器
add_action( 'woocommerce_single_product_summary', 'display_product_total_price', 31 );
function display_product_total_price() {
    global $product;

    // 为简单产品和可变产品统一输出总价容器
    echo '<div class="total-price-container">
        <strong>' . __('总价:', 'woocommerce') . '</strong>
        <span class="product-total-price">' . wc_price( $product->get_price() ) . '</span>
    </div>';
}

// 加载前端实时计算脚本
add_action( 'wp_footer', 'product_total_price_js_script' );
function product_total_price_js_script() {
    global $product;

    if ( ! is_product() ) return; // 仅在商品详情页加载脚本

    $base_price = $product->get_price();
    $currency_symbol = get_woocommerce_currency_symbol();
    ?>
    <script>
        jQuery(document).ready(function($){
            var currentPrice = <?php echo esc_js( $base_price ); ?>,
                currencySymbol = '<?php echo esc_js( $currency_symbol ); ?>',
                totalPriceEl = $('.product-total-price'),
                quantityInput = $('input.qty');

            // 核心：计算并更新总价的函数
            function updateTotalPrice() {
                var quantity = parseInt(quantityInput.val()),
                    calcPrice = currentPrice;

                // 处理可变产品的选中变体价格
                if ( $('form.variations_form').length ) {
                    var selectedVariationId = $('form.variations_form').find('.variation_id').val();
                    if ( selectedVariationId ) {
                        // 提取选中变体的价格数字
                        var variationPriceText = $('form.variations_form').find('.woocommerce-variation-price .amount').text();
                        var variationPrice = parseFloat(variationPriceText.replace(/[^0-9.]/g, ''));
                        if ( ! isNaN(variationPrice) ) {
                            calcPrice = variationPrice;
                        }
                    }
                }

                // 确保数量至少为1，避免出现0或负数总价
                var total = Math.max(quantity, 1) * calcPrice;
                totalPriceEl.html(currencySymbol + total.toFixed(2));
            }

            // 监听数量输入框的变化
            quantityInput.on('input change', function(){
                updateTotalPrice();
            });

            // 监听可变产品的属性选择事件
            $('form.variations_form').on('show_variation', function(event, variation){
                currentPrice = variation.display_price;
                updateTotalPrice();
            });

            // 页面初始化时自动执行一次计算
            updateTotalPrice();
        });
    </script>
    <?php
}

代码核心逻辑详解 #

• display_product_total_price函数：在商品详情页的价格区域下方插入总价显示容器，默认展示数量为1时的价格，保证初始显示正确。
• product_total_price_js_script函数：负责前端的实时计算逻辑：
  • updateTotalPrice函数：会自动判断当前产品类型，如果是可变产品，会提取选中变体的实时价格来计算总价；同时强制数量最小值为1，避免异常数值。
  • 监听数量输入框的input和change事件：用户调整数量时立即触发总价更新。
  • 监听可变产品的show_variation事件：当用户切换产品属性（比如尺寸、颜色）时，自动更新基础价格并重新计算总价，完美解决可变产品的适配问题。

可选：样式优化 #

如果想让总价显示更美观，可以添加以下CSS到主题的自定义CSS中：

.total-price-container {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.product-total-price {
    color: #d7263d;
    font-size: 1.2em;
    font-weight: bold;
}

这个方案已经在多个WooCommerce站点测试过，能稳定兼容简单产品和可变产品的数量总价实时更新需求。

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