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.

Our team at Themelocation is comprised of WordPress developers of high expertise

  • We can maintain, support and manage your single, or all your clients, website with dedication
  • Our skills are at your disposal.

Book a Call

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

    ?>

    <script>

    jQuery(function($){

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

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

            setTimeout(function(){

                wooError.fadeOut(160);

            }, 4000);

        })

    });

    </script>

    <?php

    endif;

}

[/codesyntax]

 

 

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.

 

Waqas

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 *