如何修改WooCommerce加入购物车提示，显示数量、商品名及结算按钮

需求说明 #

• 自定义WooCommerce「加入购物车」提示，显示商品数量、商品名称、订单小计
• 添加「继续购物」（跳转商店页）和「去结算」（跳转结算页）按钮
• 适配移动端、桌面端的不同布局

需求示例效果：

您刚刚将3个蓝牙耳机加入购物车。您的订单小计为$299。要结算还是继续购物？继续购物 | 去结算

原有代码（无法正常运行） #

add_filter( 'wc_add_to_cart_message_html', 'atcm_with_checkout_button_including_mobile_control', 10, 3 );
function atcm_with_checkout_button_including_mobile_control( $message, $qty, $count ) {

    $subtotal = wc_price(WC()->cart->subtotal);
    $count += $qty;
    
    $direct_to_shop = wc_get_shop_url();
    $direct_checkout = is_checkout() ? '#customer_details' : wc_get_checkout_url() . '#customer_details';

        if ( wp_is_mobile() && !is_checkout() ) {

        return sprintf (__( '
            <div style="font-size:20px">You just placed QTY of PRODUCT NAME in your cart.
            Your order total right now is %s. Wanna continue shopping %s or do you want to checkout %s? 
            </div>
        ' ), 
        
        $count, $subtotal, 

        '<a style="width:100%; border-left:none; margin-bottom:10%;" 
        class="shopping button alt" href="' . $direct_to_shop . '">' . __(" Continue Shopping ") . '</a>' );

        '<a style="width:100%; border-left:none; margin-top:10%;" 
        class="checkout button alt" href="' . $direct_checkout . '">' . __(" Go to Checkout ") . '</a>' );
    
        } else {

            if ( ! wp_is_mobile() && ! is_checkout() ) {
            
                return sprintf(__('
            <div style="font-size:20px">Your just placed QTY of PRODUCT NAME in your cart, brining your order total to %s. 
            Wanna continue shopping%s or do you want to checkout?%s
            </div>
            '), 
            $count, $subtotal, 
            '<a class="shopping button alt" href="' . $direct_to_shop . '">' . __(" Continue Shopping ") . '</a>' );
            '<a class="checkout button alt" href="' . $direct_checkout . '">' . __(" Go to Checkout ") . '</a>' );
        
        }
    }
}

代码问题分析 #

1. sprintf参数不匹配：模板占位符数量和传入参数数量不一致，且存在多余的闭合括号
2. 缺少商品名称获取逻辑：原有代码未获取当前添加商品的名称，无法显示商品信息
3. HTML转义错误：直接使用<等转义字符易出错，应直接编写HTML标签
4. 布局逻辑混乱：移动端/桌面端的条件判断冗余，按钮布局未合理区分
5. 变量错误：$count += $qty逻辑错误，$count是购物车总数量，无需累加当前添加的$qty

修正后的代码 #

add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message_with_buttons', 10, 4 );
function custom_add_to_cart_message_with_buttons( $message, $products, $qty, $count ) {
    // 获取刚添加的商品信息
    $product = wc_get_product( key( $products ) );
    $product_name = $product ? $product->get_name() : '';
    
    // 订单小计
    $subtotal = wc_price( WC()->cart->subtotal );
    
    // 页面链接
    $shop_url = wc_get_shop_url();
    $checkout_url = wc_get_checkout_url();
    
    // 移动端布局：按钮垂直排列
    if ( wp_is_mobile() && !is_checkout() ) {
        $message_html = sprintf(
            __( '<div class="add-to-cart-notice">您刚刚将%d个%s加入购物车。您的订单小计为%s。要结算还是继续购物？</div>
            <div class="add-to-cart-buttons mobile">
                <a href="%s" class="button alt continue-shopping">继续购物</a>
                <a href="%s" class="button checkout">去结算</a>
            </div>' ),
            $qty,
            $product_name,
            $subtotal,
            $shop_url,
            $checkout_url
        );
    } 
    // 桌面端布局：按钮水平排列
    else if ( !wp_is_mobile() && !is_checkout() ) {
        $message_html = sprintf(
            __( '<div class="add-to-cart-notice">您刚刚将%d个%s加入购物车。您的订单小计为%s。要结算还是继续购物？</div>
            <div class="add-to-cart-buttons desktop">
                <a href="%s" class="button alt continue-shopping">继续购物</a>
                <a href="%s" class="button checkout">去结算</a>
            </div>' ),
            $qty,
            $product_name,
            $subtotal,
            $shop_url,
            $checkout_url
        );
    } 
    // 结算页不修改提示
    else {
        $message_html = $message;
    }
    
    return $message_html;
}

配套CSS（添加到主题自定义CSS或style.css） #

/* 移动端按钮垂直排列 */
.add-to-cart-buttons.mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.add-to-cart-buttons.mobile .button {
    width: 100%;
}

/* 桌面端按钮水平排列 */
.add-to-cart-buttons.desktop {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

/* 提示消息样式 */
.add-to-cart-notice {
    font-size: 16px;
    line-height: 1.5;
}

修正说明 #

1. 修复参数问题：使用wc_add_to_cart_message_html的完整4个参数，正确获取刚添加的商品数组
2. 添加商品名称逻辑：通过wc_get_product获取当前添加商品的名称
3. 规范HTML结构：直接编写HTML标签，使用CSS类控制布局而非内联样式，便于维护
4. 优化布局逻辑：清晰区分移动端/桌面端的按钮排列方式，通过CSS实现适配
5. 修正变量逻辑：直接使用$qty表示当前添加的数量，$count保留为购物车总数量（按需使用）
6. 兼容结算页：结算页不修改原有提示，避免冲突

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