调整WooCommerce添加商品成功提示的文本与按钮顺序

原代码虽成功添加了「Continue Shopping」按钮，但生成的HTML结构顺序为「View Cart按钮 → 商品添加提示文本 → Continue Shopping按钮」，不利于CSS统一布局。要改成「提示文本在前，两个按钮在后」，可通过重构消息内容实现：

修改后的函数代码 #

function filter_wc_add_to_cart_message_html( $message, $products ) { 
    // 移除原消息中的View Cart按钮，仅保留提示文本
    $text_only = preg_replace('/<a[^>]+>View cart<\/a>\s*/', '', $message);
    
    // 生成Continue Shopping按钮的HTML
    $return_to = apply_filters( 
        'woocommerce_continue_shopping_redirect', 
        wc_get_raw_referer() ? wp_validate_redirect( wc_get_raw_referer(), false ) : wc_get_page_permalink( 'shop' ) 
    );
    $continue_btn = sprintf( 
        '<a href="%s" class="button wc-forward">%s</a>', 
        esc_url( $return_to ), 
        esc_html__( 'Continue Shopping','woocommerce' ) 
    );
    
    // 重新生成View Cart按钮的HTML
    $view_cart_btn = sprintf( 
        '<a href="%s" tabindex="1" class="button wc-forward">%s</a>', 
        esc_url( wc_get_cart_url() ), 
        esc_html__( 'View cart','woocommerce' ) 
    );
    
    // 重组消息结构：提示文本 + 两个按钮
    $message = $text_only . ' ' . $view_cart_btn . ' ' . $continue_btn;
    
    return $message; 
}; 

add_filter( 'wc_add_to_cart_message_html', 'filter_wc_add_to_cart_message_html', 10, 2 );

效果说明 #

修改后生成的HTML结构会变为：

<div class="woocommerce-message" role="alert">
    &ldquo;Front Suspension Bump Stop Spacer&rdquo; has been added to your cart.
    <a href="https://.../cart/" tabindex="1" class="button wc-forward">View cart</a>
    <a href="https://.../product/.../" class="button wc-forward">Continue Shopping</a>  
</div>

配套CSS布局示例 #

现在可轻松用CSS控制按钮在不同屏幕下的对齐方式：

/* 宽屏时按钮并排 */
.woocommerce-message .button.wc-forward {
    display: inline-block;
    margin: 0 0.6em 0 0;
}

/* 窄屏时按钮堆叠 */
@media (max-width: 768px) {
    .woocommerce-message .button.wc-forward {
        display: block;
        margin: 0.8em 0 0;
        width: 100%;
    }
}

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