Hide woocommerce-message in couple seconds

I tried to use this code to hide woocommerce-message but it doesn’t work.

  setTimeout(function() {
    $('.woocommerce-message').fadeOut('fast');
}, 5000); // <-- time in mseconds

Do you any another solutions ? I tried to put this code into header.php and my template has space for Custom Header JavaScript Code but nothing works.

Related posts

3 comments

  1. if the element pops up and is inserted into the dom randomly you can use an approach like this to remove it.

    $(document).ready(function(){
      
       $(document).on('DOMNodeInserted', function(e) {
            if ($(e.target).is('.woocommerce-message')) {
               
               setTimeout(function() {
                 $('.woocommerce-message').fadeOut('fast');
                alert("node fading"); 
               }, 5000);
            }
        });
    
       //object inserted after 2 seconds
       setTimeout(function(){
           $('<div class="woocommerce-message">Test node inserted </div>').appendTo('body');
            alert("node inserted");
         },2000);
    });
       
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. It show the error when we use $(e.target).
    so ignoring the I have add tweak.

    jQuery(document).on('DOMNodeInserted', '.woocommerce-error,.woocommerce-message', function(e) {
            setTimeout(function() {
                jQuery('.woocommerce-error,.woocommerce-message').fadeOut('fast');
            }, 6000);   
        });
    

    Good luck.

Comments are closed.