如何在WooCommerce中实现勾选表格复选框自动将多个商品加入购物车

实现方案 #

你可以通过在Code Snippets中添加自定义代码，注入前端JS监听复选框选中事件，同时调用WooCommerce原生加购接口实现需求，完整代码如下：

// 注入自动加购的JS脚本到产品表页面
add_action( 'wp_footer', 'wpto_auto_add_to_cart_on_checkbox', 99 );
function wpto_auto_add_to_cart_on_checkbox() {
    // 只在有产品表格的页面加载脚本，不需要限制页面可以删掉这段判断
    if ( ! is_shop() && ! is_product_taxonomy() && ! is_page( array( '你自定义的产品表页面别名' ) ) ) {
        return;
    }
    ?>
    <script>
    jQuery(document).ready(function($){
        // 监听产品表内的商品复选框变化事件
        $(document).on('change', '.wpto_checkbox_item input[type="checkbox"]', function(){
            const productId = $(this).val();
            const isChecked = $(this).is(':checked');

            if (isChecked && productId) {
                // 调用WooCommerce AJAX加购接口
                $.ajax({
                    url: wc_add_to_cart_params.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'woocommerce_ajax_add_to_cart',
                        product_id: productId,
                        quantity: 1
                    },
                    success: function(response) {
                        if (response.error) {
                            alert('商品加购失败：' + response.message);
                        } else {
                            // 自动更新购物车数字提示
                            $(document.body).trigger('wc_fragment_refresh');
                        }
                    }
                });
            } else if (!isChecked && productId) {
                // 可选：取消勾选时自动从购物车移除对应商品，不需要可以删掉这段逻辑
                $.ajax({
                    url: wc_add_to_cart_params.ajax_url,
                    type: 'POST',
                    data: {
                        action: 'wpto_remove_cart_item',
                        product_id: productId
                    },
                    success: function() {
                        $(document.body).trigger('wc_fragment_refresh');
                    }
                });
            }
        });
    });
    </script>
    <?php
}

// 后端处理取消勾选时的移除购物车逻辑，不需要自动移除可以删掉这段
add_action( 'wp_ajax_wpto_remove_cart_item', 'wpto_remove_cart_item_callback' );
add_action( 'wp_ajax_nopriv_wpto_remove_cart_item', 'wpto_remove_cart_item_callback' );
function wpto_remove_cart_item_callback() {
    $product_id = intval($_POST['product_id']);
    foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        if( $cart_item['product_id'] == $product_id ) {
            WC()->cart->remove_cart_item( $cart_item_key );
            wp_send_json_success();
        }
    }
    wp_send_json_error('商品不在购物车中');
}

使用说明 #

• 代码中的array( '你自定义的产品表页面别名' )请替换为你实际放置产品表的页面别名，如果你不需要限制脚本加载页面，可以直接删掉整行判断逻辑
• 如果不需要取消勾选就自动移除购物车，直接删掉注释标注的对应两段代码即可
• 你可以直接将以上代码复制到Code Snippets插件中，选择「在站点前端运行」模式，保存启用即可生效
• 如果加购成功后购物车数字没有自动更新，检查你的主题是否支持WooCommerce默认的购物车片段刷新功能即可

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