This page looks best with JavaScript enabled

How to Auto-update WooCommerce Cart when Quantity Changes

 · β˜• 2 min read · πŸ‘½ john hashim

This simple snippet will work with my first post that shows how toadd plus and minuson your woocommerce site on the single page or cart to update the product price and total price automatically.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
// Add this to your theme's functions.php
function jh_add_script_to_footer(){
    if( ! is_admin() ) { ?>
    <script>
  
jQuery(document).ready(function($){
            $('div.woocommerce').on('click', 'input.minus', function(){ 
  $("[name='update_cart']").trigger("click"); 
   }); 
  $('div.woocommerce').on('click', 'input.plus', function(){ 
  $("[name='update_cart']").trigger("click"); 
 }); 
});


</script>
<?php
 }
}
?>

You can place PHP snippets at the bottom of your child themefunctions.phpfile or in your script file wherever you decide to add it .

If your working with the default woocormmeqtychanging the classes fromminusorplustoqty

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?php
// Add this to your theme's functions.php
  function jh_add_script_to_footer(){
    if( ! is_admin() ) { ?>
    <script>
  
   jQuery(document).ready(function($){
            $('div.woocommerce').on('click','input.qty', function(){ 
     $("[name='update_cart']").trigger("click"); 
     });
  });


</script>
<?php
 }
}

//simple this will update every time the quantity is updated
?>

Lastly, you can either choose to keep the update button or hide it usingCSS

1
2
3
4
5
6
7
8
9
input[name='update_cart'] {
display: none !important;
}
 
/* OR TRY THIS */
 
button[name='update_cart'] {
display: none !important;
}
Share on

john hashim
WRITTEN BY
john hashim
Web Developer