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 to add plus and minus on 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 theme functions.php file or in your script file wherever you decide to add it .

If your working with the default woocormme qty changing the classes from minus or plus to qty

 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 using CSS

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