如何在WooCommerce分组产品页实现随购买数量动态更新毛重净重及总价

原有代码不兼容分组产品的核心原因 #

• 固定读取当前页面主产品的自定义字段，无法获取分组产品下每个子产品的独立重量、价格数据
• 重量、总价展示容器使用固定ID，分组产品页多子产品会出现ID重复，导致JS选择器匹配混乱
• 全局定义重量、价格变量，所有子产品共用同一套参数，无法匹配各自的产品属性
• 原有代码存在冗余逻辑，且错误给重量值添加了货币符号

适配后完整代码 #

add_action( 'woocommerce_after_quantity_input_field', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    if ( is_product() ) {
        global $product;
        // 读取当前产品（分组产品下为子产品）的自定义字段
        $net_weight = esc_html( get_post_meta( $product->get_id(), 'net_weight', true ) );
        $gross_weight = esc_html( get_post_meta( $product->get_id(), 'gross_weight', true ) );
        $price = $product->get_price();
        $currency = get_woocommerce_currency_symbol();
        
        // 输出展示容器，使用类名避免ID重复冲突
        echo sprintf('<div class="net_weight_disp" style="margin-bottom:10px; margin-top:7px;">%s %s</div>',__('净重：'),'<span class="value">'.$net_weight.'</span>');
        echo sprintf('<div class="gross_weight_disp" style="margin-bottom:10px; margin-top:7px;">%s %s</div>',__('毛重：'),'<span class="value">'.$gross_weight.'</span>');
        echo sprintf('<div class="product_total_price" style="margin-bottom:20px; text-align: center;">%s %s</div>',__('产品总价：','woocommerce'),'<span class="price">'.$currency.$price.'</span>');
        ?>
        <script>
            jQuery(function($){
                var currency = '<?php echo $currency; ?>';
                // 给每个数量输入框绑定对应产品的参数
                $('[name=quantity]').each(function(){
                    var $qty = $(this);
                    if(!$qty.data('net_weight')){
                        $qty.data({
                            'net_weight': <?php echo $net_weight; ?>,
                            'gross_weight': <?php echo $gross_weight; ?>,
                            'price': <?php echo $price; ?>
                        });
                    }
                })
                // 绑定数量变更事件
                $(document).on('change', '[name=quantity]', function(){
                    var $qty = $(this);
                    var qty_val = parseFloat($qty.val());
                    if (!(qty_val < 0.5)) {
                        // 读取当前产品的独立参数
                        var net_weight = $qty.data('net_weight');
                        var gross_weight = $qty.data('gross_weight');
                        var price = $qty.data('price');
                        // 计算新值
                        var new_net = (net_weight * qty_val).toFixed(2);
                        var new_gross = (gross_weight * qty_val).toFixed(2);
                        var new_total = parseFloat(price * qty_val).toFixed(2);
                        // 更新对应容器的值，互不干扰
                        var $parent = $qty.parent();
                        $parent.find('.net_weight_disp .value').html(new_net);
                        $parent.find('.gross_weight_disp .value').html(new_gross);
                        $parent.find('.product_total_price .price').html(currency + new_total);
                    }
                });
            });
        </script>
        <?php
    }
}

关键修改说明 #

1. 兼容分组产品逻辑：直接读取钩子触发时对应的产品ID获取自定义字段，分组产品下每个子产品都能读取到自身的重量、价格数据
2. 解决ID冲突问题：所有展示容器改用类名标识，不再使用固定ID，适配多子产品场景
3. 数据隔离：每个子产品的参数绑定到自身的数量输入框上，不会和其他子产品数据混淆
4. 修复原有bug：移除了重量值前错误添加的货币符号，仅保留总价前的货币标识，同时清理了原有冗余代码
5. 兼容动态加载：改用事件委托方式绑定变更事件，适配后续动态加载的产品元素

内容的提问来源于stack exchange，提问作者M. Lak