WooCommerce Fade out Error Messages on Checkout Page

For an online store to work successfully, it is obligatory for it to be simple, easy to use and hassle-free. The worst time to have a problem in an order with a customer is during the checkout, it is a very fragile moment where any issue popping up will make the customer change his/her mind and simply abandon the order.

So the best way to avoid it is to make the checkout quick and easy. A good feature can be added to the checkout page to make the error messages fade away automatically with the addition of a simple code below.

This gives the customer a feeling of being trouble-free and will eventually make him/her check out with the product with a much higher chance of success.

Adding the function is really easy just go to Dashboard > Appearance > Theme Editor > Theme Functions and add the following code to the end of the existing code and click Update file

 

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;
 
}

 

 

Now to set the amount of time according to what you want, you will have to change the “4000” in the code with a number of your choice. Note that 4000 = 4 seconds. For example, in order to make it last for 3 seconds, you will have to write ‘3000’ in the place of ‘4000’.

Before Adding the Code:

After Adding the Code:

 

That’s all a few simple additions like these to your website can be very helpful. Feel free to give feedback in the comments section below.

 

Leave a Reply