WooCommerce产品单页：如何在加入购物车按钮前添加数量选项？

嘿，我来帮你搞定这个在「加入购物车」按钮前加数量选项的需求！你现在用的是自定义WP_Query循环渲染产品列表，下面给你两种实用的修改方案，适配不同场景：

方案一：使用WooCommerce原生数量模板（推荐） #

这个方案的好处是能和你当前WooCommerce主题的样式保持一致，自带数量验证逻辑，不用自己写太多额外代码。

直接修改你的产品列表代码，在「加入购物车」按钮前插入原生数量输入框即可：

<ul class="products-list">
    <?php 
    $args = array( 
        'post_type' => 'product', 
        'posts_per_page' => 10, 
        'product_cat' => 'product-category', 
        'orderby' => 'rand' 
    ); 
    $loop = new WP_Query( $args ); 
    while ( $loop->have_posts() ) : $loop->the_post(); 
        global $product; 
        // 跳过不可购买的产品
        if ( ! $product->is_purchasable() ) continue;
    ?>
    <li class="product">
        <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr( get_the_title( $loop->post->ID ) ); ?>">
            <?php echo get_the_post_thumbnail( $loop->post->ID, 'shop_catalog' ); ?>
            <h3><?php the_title(); ?></h3>
            <span class="price"><?php echo $product->get_price_html(); ?></span>
        </a>

        <!-- 插入原生数量选择框 -->
        <?php
        wc_get_template( 'global/quantity-input.php', array(
            'input_name'   => 'quantity[' . $product->get_id() . ']', // 带产品ID区分不同商品
            'input_value'  => '1', // 默认数量
            'max_value'    => $product->get_max_purchase_quantity(), // 后台设置的最大购买量
            'min_value'    => $product->get_min_purchase_quantity(), // 后台设置的最小购买量
            'step'         => $product->get_purchase_step(), // 数量步长
        ) );
        ?>

        <!-- 加入购物车按钮 -->
        <?php if ( $product->is_in_stock() ) : ?>
            <a href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" 
               class="button add_to_cart_button" 
               data-product_id="<?php echo esc_attr( $product->get_id() ); ?>"
               data-quantity="1">
                <?php esc_html_e( '加入购物车', 'woocommerce' ); ?>
            </a>
        <?php endif; ?>
    </li>
    <?php endwhile; wp_reset_postdata(); ?> <!-- 重置查询，避免后续报错 -->
</ul>

方案二：自定义数量输入框（适配特殊样式需求） #

如果原生模板的样式和你的产品列表不兼容，你可以手动写HTML输入框，完全自定义样式：

<!-- 自定义数量选择框 -->
<div class="custom-quantity">
    <label for="qty-<?php echo esc_attr( $product->get_id() ); ?>">数量:</label>
    <input type="number" 
           id="qty-<?php echo esc_attr( $product->get_id() ); ?>" 
           name="quantity[<?php echo esc_attr( $product->get_id() ); ?>]" 
           value="1" 
           min="<?php echo esc_attr( $product->get_min_purchase_quantity() ); ?>" 
           max="<?php echo esc_attr( $product->get_max_purchase_quantity() ); ?>" 
           step="<?php echo esc_attr( $product->get_purchase_step() ); ?>" 
           class="qty-input" />
</div>

补充JS逻辑（确保AJAX加购能读取数量） #

如果你的加入购物车按钮用的是WooCommerce的AJAX功能，需要添加一段JS监听数量变化，更新按钮的数量参数：

jQuery(document).ready(function($) {
    $('.products-list .custom-quantity input').on('input change', function() {
        var qty = parseInt($(this).val());
        var minQty = parseInt($(this).attr('min')) || 1;
        // 确保数量不小于最小值
        if (qty < minQty) {
            $(this).val(minQty);
            qty = minQty;
        }
        // 更新按钮的data-quantity属性
        $(this).closest('.product').find('.add_to_cart_button').attr('data-quantity', qty);
    });
});

注意事项 #

• 以上方案仅适用于简单产品（Simple Product），可变产品（Variable Product）需要额外处理属性选择和库存验证，逻辑会更复杂。
• 记得保留wp_reset_postdata()，避免后续WordPress查询出现冲突。
• 如果你的主题有自定义WooCommerce模板，wc_get_template会自动优先使用主题目录下的模板文件，无需额外配置。

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