skip to Main Content

I am looking for some help with an issue I have. I have no experience with coding. For my WooCommerce shop, I wanted the shop messages (cart updated and such) to disappear after 6 seconds. I got that to work perfectly with code (using Code Snippets):

add_action( 'wp_head', function () { ?>
<script>

 setTimeout(function() {
jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow') 
    }, 6000);
</script>
<?php } );

However, on the cart page, it only works 1 time after pushing update cart. How can I fix this or  just disable the above script only on this page?

2

Answers


  1. Use setInterval Method instead of timeout because it only runs once.

    setInterval(function() {
        jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow') 
    }, 6000);
    
    Login or Signup to reply.
  2. you need to step of change to make it more clear.
    change in CSS, and add the following lines in your .css file:

    .woocommerce-notices-wrapper{
        -webkit-transition: opacity 0s ease-in-out;
        -moz-transition: opacity 0s ease-in-out;
        -ms-transition: opacity 0s ease-in-out;
        -o-transition: opacity 0s ease-in-out;
         opacity: 1;
        position: absolute !important;
        right: 50px !important;
        width: 25%;
        height: 100%;
        z-index: 1000;
        top: 130px;
    }
    

    and also, add the following line of JS to your header.php or in your .js file:

    <script>
    $(function() {
    setTimeout(function() { $(".woocommerce-notices-wrapper").fadeOut(1500); }, 3000)
    
    })
    </script>
    

    Note:

    1. if you add the second section in your JS file remove <script> and
      </script>
    2. The CSS section is optional. And I think it makes it make the notification bar looks better.
    3. You may change the number in the js to change the time.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search