Q:

Fadeout validation error messages in WooCommerce checkout page

When placing an order, WooCommerce does validate all required user fields inputs. If not, the checkout-errors messages appear like if  the first name is missing and so on. 
I want those error validation messages to fade out after a given time. 
So, I injected this jQuery code:
(function($) {
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

As long the .woocommerce-error class is not within form.checkout, it works fine, like on login or register for example. But it does not work on checkout page. 
The class .woocommerce-error is correct (it's there), but the fadeOut isn't triggered. 
So, I went on searching the web. Found an other approach, to wait for checkout_error checkout page event, like so:
$( document.body ).on( 'checkout_error', function(){
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

But it doesn't work. 
Can someone tell me, why I can not trigger the .woocommerce-error class to fadeout as long it's inside the checkout form?
How to trigger the fadeOut on checkout error validation messages?

A:

Try the following code using setTimeout() instead of delay(), that will fade out any error message on checkout page with a delay of 4 seconds and a duration of 160 mili-seconds:
// 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;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

