如何解决Woocommerce单品页数量输入框修改时联动其他输入框的问题

修复方案 #

问题根因 #

• 所有数量输入框未设置唯一标识，WooCommerce默认交互逻辑会将属性一致的输入框视为同一控件，触发同步修改
• 加购按钮、图标使用了固定重复ID，导致事件绑定混乱
• 缺少数量输入值和对应加购按钮data-quantity属性的同步逻辑，加购时无法传递正确数量

修复后代码（替换你原有functions.php中的对应代码即可） #

/*Adds Quantity to product archive*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $product_id = $product->get_id();
        // 获取必要的按钮样式类
        $class = implode( ' ', array_filter( array(
                'button',
                'product_type_' . $product->get_type(),
                $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // 给数量输入框设置带商品ID的唯一name、id属性
        $quantity_input = woocommerce_quantity_input( 
            array(
                'input_name'  => 'quantity_' . $product_id,
                'input_id'    => 'quantity_' . $product_id,
                'input_value' => 1,
            ), 
            $product, 
            false 
        );

        // 按钮ID也带上商品ID避免重复
        $cart_button = '<button type="submit" class="button alt" id="pa_add_to_cart_button_'. $product_id .'"><i class="fas fa-shopping-cart" id="pa_add_to_cart_button_icon_'. $product_id .'" style="font-size:24px; display: inline-block;"></i></button>';

        // 嵌入表单、数量字段和加购按钮
        $html = sprintf( '%s%s%s%s<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
            '<form class="cart cart-form-' . $product_id . '">',
            '<div class="form_cart_first_half">',
            $quantity_input,
            '</div>',
            esc_url( $product->add_to_cart_url() ), 
            esc_attr( $product_id ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            $cart_button,
            '</form>'
        );
    }
    return $html;
}

// 追加JS逻辑到页脚，处理数量变更同步和表单提交
add_action( 'wp_footer', 'sync_loop_quantity_and_add_to_cart' );
function sync_loop_quantity_and_add_to_cart() {
    ?>
    <script>
    jQuery(document).ready(function($){
        // 监听每个表单内的数量输入变化
        $('form.cart').on('change input', 'input.qty', function(){
            var $form = $(this).closest('form.cart');
            var current_qty = $(this).val();
            // 只同步当前表单内的加购按钮data-quantity属性
            $form.find('a.add_to_cart_button').attr('data-quantity', current_qty);
        });

        // 表单提交触发加购
        $('form.cart').on('submit', function(e){
            e.preventDefault();
            var $add_to_cart_btn = $(this).find('a.add_to_cart_button');
            $add_to_cart_btn.trigger('click');
        });
    });
    </script>
    <?php
}

补充说明 #

替换代码后清空站点缓存、浏览器缓存即可测试，所有商品的数量选择器会独立生效，不会再出现同步变更的问题，相关商品、商品列表页的加购功能也会正常传递对应数量。

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