如何在WordPress WooCommerce中实现商品数量单次点击加2的功能

以下两种方案可以直接实现需求，优先选择PHP钩子方案，兼容性更强：

方案1：PHP钩子修改（推荐，无需改核心文件） #

将以下代码添加到当前激活主题的functions.php文件末尾，或使用自定义代码片段插件添加即可生效：

// 配置商品详情页数量输入框参数
add_filter( 'woocommerce_quantity_input_args', 'custom_quantity_step_setting', 10, 2 );
function custom_quantity_step_setting( $args, $product ) {
    // 仅商品详情页生效，移除该行可全局生效
    if ( is_product() ) {
        $args['input_value'] = 0; // 打开页面默认数量为0
        $args['step'] = 2; // 每次增减步长为2
        $args['min_value'] = 0; // 限制最小数量为0
    }
    return $args;
}

// 兼容可变产品的数量配置
add_filter( 'woocommerce_available_variation', 'custom_variation_quantity_step', 10, 3 );
function custom_variation_quantity_step( $variation_data, $product, $variation ) {
    $variation_data['qty_input_args']['input_value'] = 0;
    $variation_data['qty_input_args']['step'] = 2;
    $variation_data['qty_input_args']['min_value'] = 0;
    return $variation_data;
}

方案2：JS强制覆盖（仅主题重写数量输入框时使用） #

如果添加上述PHP代码后未生效，说明你的主题/插件自定义了数量选择器逻辑，将以下JS代码添加到商品详情页自定义脚本区域，或主题页脚自定义脚本位置即可：

jQuery(document).ready(function($) {
    const quantityInput = $('.woocommerce.single-product .quantity input.qty');
    if(quantityInput.length) {
        // 强制设置输入框属性
        quantityInput.attr({
            'step': 2,
            'min': 0
        }).val(0);

        // 绑定加减按钮点击事件
        $(document).on('click', '.qty-plus, .qty-minus, .plus, .minus', function() {
            const currentVal = parseFloat(quantityInput.val()) || 0;
            if($(this).is('.qty-plus, .plus')) {
                quantityInput.val(currentVal + 2).trigger('change');
            } else {
                const newVal = currentVal - 2;
                quantityInput.val(newVal >= 0 ? newVal : 0).trigger('change');
            }
        });
    }
});

注意事项 #

• 代码添加前建议先备份站点，避免语法错误导致站点异常
• 如需购物车、结算页也同步应用2步长规则，只需删除方案1中if ( is_product() )的判断即可

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