调整WooCommerce购物车更新提示框（wc_print_notice）的位置

我刚好处理过类似的需求，咱们可以通过调整钩子绑定、自定义提示输出，再配合一点CSS来实现这个效果，完全符合你提到的优惠券提示的布局风格：

第一步：用PHP调整提示的输出位置 #

默认情况下，WooCommerce会把购物车更新的提示绑定在购物车表格内部的钩子上，我们需要先移除这个默认输出，然后把提示挂载到你提到的woocommerce_before_cart_table（表格上方）或者woocommerce_before_cart（整个购物区块最上方）钩子上。

把这段代码添加到你的主题functions.php文件里，或者自定义功能插件中：

// 移除默认的购物车更新提示输出
remove_action( 'woocommerce_cart_updated', 'wc_add_notice', 10 );

// 在购物车表格上方添加自定义位置的提示
add_action( 'woocommerce_before_cart_table', 'custom_wc_cart_updated_notice' );
function custom_wc_cart_updated_notice() {
    // 检查是否存在购物车更新的成功提示
    if ( wc_has_notice( 'cart_updated', 'success' ) ) {
        // 获取提示的具体内容
        $notice = wc_get_notice( 'cart_updated', 'success' );
        // 输出自定义结构的提示框（和你提到的div结构匹配）
        ?>
        <div class="woocommerce-message message-wrapper full-width-notice" role="alert">
            <div class="message-container container success-color">
                <?php echo esc_html( $notice['notice'] ); ?>
                <button type="button" class="woocommerce-message__close notice-dismiss" aria-label="<?php esc_attr_e( 'Dismiss this notice', 'woocommerce' ); ?>">×</button>
            </div>
        </div>
        <?php
        // 清除已显示的通知，避免重复输出
        wc_clear_notices();
    }
}

如果想把提示放在整个购物区域的最顶部，只需要把代码里的woocommerce_before_cart_table换成woocommerce_before_cart就行。

第二步：添加CSS让提示占满宽度 #

默认的container类可能会限制提示的宽度，我们需要添加一点CSS来让它占满父容器的宽度，和优惠券提示保持一致：

.full-width-notice {
    width: 100%;
    margin: 0 0 20px 0;
    box-sizing: border-box;
}

.full-width-notice .message-container {
    max-width: 100%; /* 覆盖container的默认宽度限制 */
    padding: 12px 20px;
}

把这段CSS添加到主题的自定义CSS面板，或者子主题的style.css文件里即可。

原理说明 #

• 我们先移除了WooCommerce默认的提示输出动作，避免原来的表格内提示显示；
• 然后在指定的钩子位置手动检查并输出提示内容，确保它出现在表格外部；
• 最后通过CSS调整宽度，让提示框占满可用空间，和优惠券提示的布局对齐。

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