Waqas

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

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 *