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 amendment, the client asked if we could automatically update the basket on quantity change… Again, a pretty straightforward 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]
Thanks for the script. It is working nicely on the cart page, however, it is not working on the checkout page. Any Idea how can I add that warning to the checkout page?
Thanks π
Hi
First, let me say thank you for the script.
I used your code for my website (https://www.designfreelogoonline.com/). It is working great on cart page, but not on my checkout page.
Any ideas, please
Thank you