如何调整WooCommerce产品页数量选择框至加入购物车按钮上方

你之前的方案失效是因为使用的woocommerce_before_variations_form钩子触发位置位于整个可变商品表单的最顶部，因此数量框会偏移到页面上方，无法对齐加入购物车按钮。
推荐使用直接修改子主题模板的方案，稳定性最高，不会和其他插件的钩子逻辑冲突，操作步骤如下：

操作步骤 #

1. 清理冗余代码 #

• 删除你之前在themes/your-child-theme/woocommerce/single-product/add-to-cart/variation-add-to-cart-button.php文件中插入的add_action系列代码
• 确认文件中原有的默认数量选择相关代码已完整移除，无残留

2. 插入新的数量选择代码 #

在该文件中加入购物车按钮代码的紧上方，插入以下代码，自带「数量」提示文本：

<div class="quantity-wrapper">
    <label for="quantity"><?php _e('数量', 'woocommerce'); ?></label>
    <?php
    do_action( 'woocommerce_before_add_to_cart_quantity' );

    woocommerce_quantity_input(
        array(
            'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
            'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
            'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(),
        )
    );

    do_action( 'woocommerce_after_add_to_cart_quantity' );
    ?>
</div>

3. 可选样式优化 #

如果出现布局错位，可将以下CSS代码添加到子主题style.css文件，或WordPress后台「外观-自定义-额外CSS」中：

/* 数量选择框布局优化 */
.quantity-wrapper {
    margin-bottom: 16px;
}
.quantity-wrapper label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.quantity-wrapper .quantity {
    margin: 0;
}

替代方案：纯钩子实现（无需改模板） #

如果不想修改模板文件，可将以下代码添加到子主题functions.php文件中，也可实现相同效果：

// 调整可变商品数量框到加入购物车按钮上方
add_action( 'woocommerce_before_add_to_cart_button', 'move_variation_quantity_above_button', 5 );
function move_variation_quantity_above_button() {
    global $product;
    // 仅对可变商品生效
    if ( ! $product->is_type('variable') ) return;
    
    // 移除默认位置的数量框
    remove_action( 'woocommerce_before_add_to_cart_button', 'woocommerce_quantity_input', 10 );
    
    // 输出带提示的数量框
    echo '<div class="quantity-wrapper">
        <label for="quantity">' . __('数量', 'woocommerce') . '</label>';
    
    do_action( 'woocommerce_before_add_to_cart_quantity' );
    woocommerce_quantity_input(
        array(
            'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
            'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
            'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(),
        )
    );
    do_action( 'woocommerce_after_add_to_cart_quantity' );
    
    echo '</div>';
}

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