WooCommerce如何实现数秒后自动隐藏“已加入购物车”提示消息

代码问题说明 #

你的代码存在4处核心错误导致无法运行：

• setTimeout回调语法错误，你写的setTimeout( addToCartMessage() { ... })不符合JS语法规范
• 类名拼写错误，jQuery选择器中woocommece-info少写了字母r，正确类名是woocommerce-info
• 没有等待DOM加载完成就执行元素选择，很可能出现找不到目标提示节点的情况
• WordPress默认jQuery为兼容模式，直接用$调用会存在未定义的报错风险

修正后可直接运行的代码 #

add_action( 'wp_footer', 'hide_atc_message' );
function hide_atc_message() { ?>
<script>
jQuery(function($) {
    // 选中所有加购成功提示
    const atcMessages = $('.woocommerce-info');
    if (atcMessages.length) {
        // 5秒后执行隐藏动画
        setTimeout(() => atcMessages.fadeOut('fast'), 5000);
    }
});
</script>
<?php
}

修改说明 #

• 用jQuery DOM就绪回调包裹逻辑，保证页面渲染完提示元素后再执行逻辑
• 修复了类名拼写错误和setTimeout回调语法错误
• 移除了冗余的循环逻辑，jQuery选择器匹配到的所有元素会统一执行fadeOut动画
• 采用WordPress官方推荐的jQuery兼容写法，避免$未定义报错

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