Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

WooCommerce – How to Show a Confirm Message before Removing an Item from the cart / Update Basket on Quantity Change

A super simple one today, a client requested a popup message to confirm if you want to remove something from the cart. How do we achieve this? Pretty simple really, all you need is a bit of jQuery as shown below:


<script>

    jQuery( function($) {       
    $('.remove').click( function( event ) {
        if( ! confirm( 'Are you sure you want to remove the product?' ) ) {
            event.preventDefault();
            event.stopPropagation();
        }  

    });
});
</script>

Along with this amend, the client asked if we could automatically update the basket on quantity change… Again, a pretty straight forward task here. In terms of UX, some users seem to find the update cart button as unnecessary or confusing; well, if we can make it easier for the users so the basket updates automatically on change, then why not do it?

A simple PHP function followed by two lines of JQuery and a line of CSS and you can quickly implement this!

1. CSS Snippet: Hide the WooCommerce “Update Cart” Button


input[name='update_cart'] {
display: none !important;
}
 
/* SHOULD THAT NOT WORK, TRY THIS */
 
button[name='update_cart'] {
display: none !important;
}

2. PHP Snippet: Auto-update WooCommerce Cart when Quantity Changes

Now that the update cart button is hidden, all we need to do is to ‘click’ the button via jQuery and let WooCommerce do the exact same job (updating cart totals, taxes, etc.).

In detail, when we ‘click’ on any of the quantity inputs, we go and trigger a ‘click’ on the hidden Update Cart button.

Easy, right?

Note: add the following to your functions.php (to the child theme if you using one)


add_action( 'wp_footer', 'silva_cart_refresh_update_qty' ); 
 
function silva_cart_refresh_update_qty() { 
   if (is_cart()) { 
      ?> 
      <script type="text/javascript"> 
         jQuery('div.woocommerce').on('click', 'input.qty', function(){ 
            jQuery("[name='update_cart']").click();
         }); 
      </script> 
      <?php 
   } 
}

If this has helped, leave a comment and share your thoughts! If you require any assistance, we'd love to help; simply drop us an email at [email protected]

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion