WooCommerce结账时清空购物车后跳转至商店页面的问题

问题说明 #

当前代码可在WooCommerce结账页面移除商品，但清空购物车后，用户仍停留在显示默认提示“The checkout is not available when your cart is empty”的页面，无法自动跳转至商店页。需求是实现清空购物车后自动跳转至商店页，并通过wc_add_notice显示自定义提示信息。

现有代码问题分析 #

1. 跳转未终止执行：原redirect_empty_checkout_to_shop函数中，调用wp_safe_redirect后未添加exit;或die();，导致后续代码可能干扰跳转逻辑，浏览器无法正确执行跳转。
2. AJAX移除场景未覆盖：当通过AJAX（点击移除按钮的默认行为）移除最后一个商品时，wc-cart.js只会更新页面内容，不会触发页面跳转，需要额外监听购物车状态变化来处理跳转。

修复后的完整代码 #

1. 结账页商品显示与移除按钮（优化冗余逻辑） #

add_filter('woocommerce_cart_item_name', 'product_thumbnail_and_remove_on_checkout', 20, 3 );
function product_thumbnail_and_remove_on_checkout( $product_name, $cart_item, $cart_item_key ) {
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // 直接用传入的$cart_item_key生成移除链接，无需遍历购物车
        $remove_product = sprintf(
            '<a class="remove" style="float:left;margin-right:5px;" href="%s" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&times;</a>',
            esc_url(wc_get_cart_remove_url( $cart_item_key )),
            __( 'Remove From Order', 'woocommerce' ),
            esc_attr($cart_item['product_id']),
            esc_attr($cart_item['data']->get_sku()),
            esc_attr($cart_item_key)
        );

        $product = $cart_item['data'];
        $thumbnail = $product->get_image(array(50, 50));
        $image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';
        $product_name_link = '<a class="pnoc" href="' . $product->get_permalink() . '">' . $product_name . '</a>';
        $product_name = $remove_product . $image_html . $product_name_link;
    }
    return $product_name;
}

2. 跳转逻辑与AJAX处理 #

add_action( 'wp_enqueue_scripts', 'cart_js_on_checkout', 10 );
function cart_js_on_checkout() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        wp_enqueue_script( 'wc-cart' );
        
        // 追加自定义JS，监听购物车更新后的空状态并跳转
        wp_add_inline_script( 'wc-cart', "
            jQuery(document).on('updated_cart_totals', function() {
                if (jQuery('.cart-empty').length > 0) {
                    window.location.href = '" . esc_url(wc_get_page_permalink('shop')) . "';
                }
            });
        " );
    }
}

add_action( 'template_redirect', 'redirect_empty_checkout_to_shop' );
function redirect_empty_checkout_to_shop() {
    if ( is_checkout() && WC()->cart->is_empty() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
        wc_clear_notices();
        wc_add_notice( __( 'The checkout is not available when your cart is empty. Happy shopping!', 'woocommerce' ), 'info' );
        
        // 跳转后必须终止代码执行，确保跳转生效
        wp_safe_redirect( wc_get_page_permalink( 'shop' ) );
        exit;
    }
}

修复说明 #

• 添加执行终止：在wp_safe_redirect后添加exit;，确保浏览器立即执行跳转，避免后续代码干扰。
• 覆盖AJAX场景：通过wp_add_inline_script给购物车脚本追加监听逻辑，当购物车更新后检测到空状态时自动跳转至商店页。
• 优化代码效率：移除原代码中不必要的购物车遍历，直接使用传入的参数生成移除链接。

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