WooCommerce 结帐页面中的淡出验证错误消息

Question

下订单时，WooCommerce 会验证所有必需的用户字段输入。 如果没有，结帐错误消息会显示为是否缺少名字等等。

我希望这些错误验证消息在给定时间后淡出。

所以，我注入了这个 jQuery 代码：

(function($) {
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

只要.woocommerce-error类不在form.checkout ，它就可以正常工作，例如在登录或注册时。 但它在结帐页面上不起作用。

.woocommerce-error类是正确的（它在那里） ，但没有触发.woocommerce-error淡出。

于是，我继续在网上搜索。 找到了另一种方法，等待checkout_error结帐页面事件，如下所示：

$( document.body ).on( 'checkout_error', function(){
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

但它不起作用。

有人能告诉我，为什么我不能触发.woocommerce-error类淡出，只要它在结帐表单内？

如何在结帐错误验证消息上触发淡出？

Answer 1

使用setTimeout()而不是delay()尝试以下代码，这将淡出结帐页面上的任何错误消息，延迟为 4 秒，持续时间为 160 毫秒：

// Checkout JS
add_action( 'wp_footer', 'checkout_fadeout_error_message');
function checkout_fadeout_error_message() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
    jQuery(function($){
        $(document.body).on( 'checkout_error', function(){
            var wooError = $('.woocommerce-error');
            setTimeout(function(){
                wooError.fadeOut(160);
            }, 4000);
        })
    });
    </script>
    <?php
    endif;
}

代码位于活动子主题（或活动主题）的 function.php 文件中。 测试和工作。

Answer 2

最后我找到了方法。 如果有其他人在寻找这个，这是它的工作原理：

(function($) {
    $( document.body ).on( 'checkout_error', function(){
        var wooError = $('.woocommerce-error'); 
        wooError.delay(4000).fadeOut(160);
    })
})   
(jQuery);

经过 13 个小时的编码和其他东西，有时您看不到明显的东西。