Fadeout validation error messages in WooCommerce checkout page

Question

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?

Answer 1

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.