title: How to change javascript in woocommerce on add to cart?
body: <p>I've been trying to develop a theme/plugin in woocommerce and I've spend hours researching how to edit the hook / JS for notices in regards to products.</p>
  <p>Ultimately I would like to remove the default notice and stop it from scrolling up to the top of the page. Instead, I would like the notice to show up with <code>position:absolute</code> near the top of the page.</p>
  <p><a href="https://i.stack.imgur.com/nSa1z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSa1z.png" alt="enter image description here" /></a></p>
  <p>In the image above I have added JS to my products listing page. Here is the code I have created for it. This works fine, but it is me making my own div rather than using woocommerces ajax built in notice. (I believe I should be using the notices as it's an important feature on woocommerce)</p>
  <pre><code>$('.atc').click(function(e){
      var productAdded = $(this).attr('aria-label');
      var productNumber = $(this).attr('data-product_id');
      var fixedPlacement = 'top';
      var bannerID = &quot;cart-notice-&quot; + productNumber;
      if($(window).width() &lt;= 768) {
          fixedPlacement = 'bottom';
      }
      var addToCartButton = '&lt;div onmouseover=&quot;testThis()&quot; class=&quot;position-fixed fixed-' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner&quot; id=&quot;' + bannerID + '&quot;&gt;&lt;div class=&quot;row&quot;&gt;';
      addToCartButton += '&lt;div class=&quot;col-8&quot;&gt; &lt;h3&gt;' + productAdded + '&lt;/h3&gt;&lt;/div&gt;';
      addToCartButton += '&lt;div class=&quot;col-4 d-flex justify-content-end&quot;&gt;&lt;a href=&quot;/cart&quot; class=&quot;btn btn-danger&quot;&gt;View Cart&lt;/a&gt; &lt;/div&gt;';
      addToCartButton += '&lt;/div&gt;&lt;/div&gt;';
      var currentItemHeight = $(this).scrollTop();
      console.log(currentItemHeight);
      if($('#' + bannerID).length) {
          $('#' + bannerID).remove();
      }
      $('body').append(addToCartButton);
  
  
      //determine if mobile or desktop
      if($(window).width() &lt;= 768) {
          console.log('mobile');
          $('#' + bannerID).css(&quot;bottom&quot;, 0);
  
      }
      else {
          //DESKTOP
          var windowHeight = $(window).scrollTop();
          if(windowHeight &lt; 143) {
              windowHeight = 150 - windowHeight;
          } else {
              windowHeight = 10;
          }
          $('#cart-notice-' + productNumber).css(&quot;top&quot;, windowHeight);
      }
      $('#' + bannerID).delay(4000).fadeOut(800);
      e.preventDefault();
  
  });
  </code></pre>
  <p>When looking into the code, I noticed the notice is loaded via <code>do_action( 'woocommerce_before_cart' ); ?&gt; </code> on the cart page. I am thinking <code>wc_get_notices()</code> hook is tied somewhere in there too. Additionally I have went deeper and brought in the add-to-cart.js into my theme using this in my functions.php</p>
  <pre><code>wp_deregister_script('wc-add-to-cart');
  wp_register_script('wc-add-to-cart', get_template_directory_uri(). '/js/add-to-cart.js' , array( 'jquery' ), WC_VERSION, TRUE);
  wp_enqueue_script('wc-add-to-cart');
  </code></pre>
  <p>The javascript file is now editable but I didn't find the notices in it, I know which hooks make my notices appear, but still have no idea how to change them. Any ideas how to customize the notices?</p>
  <p><strong>Update 1</strong></p>
  <p>I have used the <code>updated_cart_totals</code> event handler and intercepted it to be able to customize how it displays. However, for some reason my remove cart isn't working. It always refreshes the page. Below is the JS code to make it work on the cart page.</p>
  <pre><code> $(document.body).on('updated_cart_totals, removed_from_cart',function(event){
                  display_alert('.woocommerce-notices-wrapper');
                  event.preventDefault();
  
  
              });
              function display_alert(alert_handle) {
                  var fixedPlacement = 'top';
                  if($(window).width() &lt;= 768) {
                      fixedPlacement = 'bottom';
                  }
                  fixedPlacement = 'fixed-' + fixedPlacement;
                  //determine if mobile or desktop
                  if($(window).width() &lt;= 768) {
                      console.log('mobile');
                      $(alert_handle).css(&quot;bottom&quot;, 0);
  
                  }
                  else {
                      //DESKTOP
                      var windowHeight = $(window).scrollTop();
                      if(windowHeight &lt; 143) {
                          windowHeight = 150 - windowHeight;
                      } else {
                          windowHeight = 10;
                      }
                      $(alert_handle).addClass('position-fixed ' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner');
                      $(alert_handle).css(&quot;top&quot;, windowHeight);
  
                  }
                  $(alert_handle).show();
                  $(alert_handle).delay(4000).fadeOut(800);
              }
  </code></pre>