如何无需AJAX用Toast、Modal或Alert自定义WooCommerce通知？

WooCommerce本身会在用户完成操作（如添加商品到购物车、下单成功）后自动生成通知，我们可以利用原生的页面加载机制，将这些默认通知转换为Toast、Modal或Alert样式，无需额外开发AJAX功能。以下是具体实现方案：

1. 后端调整通知输出容器 #

首先在主题的functions.php中添加代码，将WooCommerce的默认通知隐藏在一个专用容器中，方便前端JS捕获：

// 自定义WooCommerce通知容器，默认隐藏
add_action('woocommerce_before_main_content', 'custom_wc_notices_container');
function custom_wc_notices_container() {
    echo '<div id="wc-hidden-notices" style="display:none;">';
    woocommerce_output_all_notices();
    echo '</div>';
}

2. 前端实现不同样式的通知展示 #

方案一：原生Alert弹窗（最简实现） #

页面加载完成后直接提取通知内容并弹出Alert：

document.addEventListener('DOMContentLoaded', () => {
    const noticeContainer = document.getElementById('wc-hidden-notices');
    if (!noticeContainer || noticeContainer.innerHTML.trim() === '') return;
    
    // 提取纯文本通知内容
    const noticeText = noticeContainer.textContent.trim();
    alert(noticeText);
});

方案二：自定义Toast提示 #

先添加Toast的CSS样式到主题style.css：

.wc-custom-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 22px;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.wc-custom-toast.success {
    background-color: #2ecc71;
}

.wc-custom-toast.error {
    background-color: #e74c3c;
}

.wc-custom-toast.info {
    background-color: #3498db;
}

.wc-custom-toast.show {
    opacity: 1;
    transform: translateY(0);
}

然后添加JS逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const noticeContainer = document.getElementById('wc-hidden-notices');
    if (!noticeContainer || noticeContainer.innerHTML.trim() === '') return;

    // 遍历所有通知元素
    const notices = noticeContainer.querySelectorAll('.woocommerce-message, .woocommerce-error, .woocommerce-info');
    notices.forEach(notice => {
        const toast = document.createElement('div');
        toast.className = 'wc-custom-toast';
        
        // 根据通知类型设置样式类
        if (notice.classList.contains('woocommerce-error')) {
            toast.classList.add('error');
        } else if (notice.classList.contains('woocommerce-info')) {
            toast.classList.add('info');
        } else {
            toast.classList.add('success');
        }
        
        toast.textContent = notice.textContent.trim();
        document.body.appendChild(toast);

        // 显示Toast，3秒后自动隐藏
        setTimeout(() => toast.classList.add('show'), 100);
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    });
});

方案三：自定义Modal弹窗 #

先添加Modal的CSS样式：

.wc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.wc-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.wc-modal {
    background-color: #fff;
    padding: 24px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.wc-modal-overlay.show .wc-modal {
    transform: scale(1);
}

.wc-modal .modal-btn {
    margin-top: 16px;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.wc-modal.success .modal-btn {
    background-color: #2ecc71;
}

.wc-modal.error .modal-btn {
    background-color: #e74c3c;
}

然后添加JS逻辑：

document.addEventListener('DOMContentLoaded', () => {
    const noticeContainer = document.getElementById('wc-hidden-notices');
    if (!noticeContainer || noticeContainer.innerHTML.trim() === '') return;

    const notices = noticeContainer.querySelectorAll('.woocommerce-message, .woocommerce-error, .woocommerce-info');
    notices.forEach(notice => {
        // 创建Modal元素
        const overlay = document.createElement('div');
        overlay.className = 'wc-modal-overlay';
        
        const modal = document.createElement('div');
        modal.className = 'wc-modal';
        if (notice.classList.contains('woocommerce-error')) {
            modal.classList.add('error');
        } else {
            modal.classList.add('success');
        }
        
        modal.innerHTML = `
            <p>${notice.textContent.trim()}</p>
            <button class="modal-btn">确定</button>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);

        // 显示Modal
        setTimeout(() => overlay.classList.add('show'), 100);

        // 关闭Modal逻辑
        const closeBtn = modal.querySelector('.modal-btn');
        closeBtn.addEventListener('click', () => {
            overlay.classList.remove('show');
            setTimeout(() => overlay.remove(), 300);
        });
        
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                overlay.classList.remove('show');
                setTimeout(() => overlay.remove(), 300);
            }
        });
    });
});

核心说明 #

• 所有方案均依赖WooCommerce原生的通知生成机制，无需AJAX：用户操作后页面会刷新，WooCommerce自动输出对应通知，前端只需在页面加载完成后捕获并转换样式。
• 确保主题未禁用woocommerce_output_all_notices()函数，绝大部分主题默认支持该函数。
• 可根据需求自由调整样式细节（如位置、颜色、显示时长）。

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