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


[codesyntax lang=”php”]

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() ) :




        $(document.body).on( 'checkout_error', function(){

            var wooError = $('.woocommerce-error');



            }, 4000);










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.



I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

Leave a Comment

Your email address will not be published. Required fields are marked *