HOME BLOG CATEGORIES  CONTACT

HOME WORDPRESS WOOCOMMERCE REMOVE UPDATE CART BUTTON AND MAKE IT AUTOMATICALLY UPDATE.
RECENT POSTS

How to Make a DataTable in

ReactJS?
WooCommerce Remove Update Cart Button and Make
How to Inline Style in ReactJS?
it Automatically Update.
How to Install WordPress Theme
WOOCOMMERCE WORDPRESS (2021 Edition)?

AMAN MEHRA OCTOBER 5, 2020 LEAVE A COMMENT How to Install WordPress –

Beginners Guide?
Tweet on Twitter Share on Facebook
How to Add jQuery Script to
WordPress?

CATEGORIES

How To

PHP

ReactJS

WooCommerce

WordPress

MOST VIEWED POSTS

WooCommerce Remove Update Cart

Button and Make it Automatically
Update.
WooCommerce gives us by default functionality to update the cart with the button, but what October 5, 2020

do you think – would it be better if the cart will be updated automatically. Automatically
mean when you change the quantity of a product then it will update cart subtotal
automatically.
How to Change Price of
So, let’s start to Remove Update Cart button with just add a couple of lines of code in your .css and .js Specific Product and
Quantity in Cart?
files OR your theme’s functions.php file (I suggest to use child theme). It is easy to play with code and October 14, 2020
make a hook to do this.
How to Redirect to
Checkout After Add to
Method #1 (Using .css and .js files):- Cart?
October 16, 2020

In this method, we will use only .css and .js files that are connected to the frontend. How can I Prevent SQL
Injection in PHP?
October 7, 2020
Look at this CSS code –

.woocommerce button[name="update_cart"], Upload Multiple Featured

Images in a Post OR Page
.woocommerce input[name="update_cart"] {
January 4, 2021
display: none;
}

Add above CSS code in your style.css file and save it. Here I would like to tell you that, we will just hide or
FOLLOW US
disable the cart button and we cannot remove this button because of some JS functions triggers with
Stay updated via social channels
this button.

And the next step we will also trigger the event on this button while changing the quantity of the product.
And you will see the auto-update cart page.

Look at this jQuery code –

jQuery( function( $ ) {
$('.woocommerce').on('change', 'input.qty', function(){
$("[name='update_cart']").trigger("click");
 });
});

Add this above code in your .js file and save it. And Done!

NOTE:- You can also add above CSS and jQuery code in header.php OR footer.php file with using the
HTML style and script tag.

Method #2 (Using functions.php File):-

In this method, to remove update cart button, we will use the theme’s functions.php file. We will make a
hook function to add all the above code in the Header OR Footer of the website.

As I already mentioned above you can also use the header.php OR footer.php file directly but here we will
hit the wp_footer hook in the functions.php file to do this.

Look at this WordPress Hook –

add_action( 'wp_footer', 'codedocx_update_cart_button' );

function codedocx_update_cart_button() {
if (is_cart()) {
?>

<style>
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
display: none;
}
</style>

<script>
jQuery( function( $ ) {
 $('.woocommerce').on('change', 'input.qty', function(){
$("[name='update_cart']").trigger("click");
});
});
</script>

<?php
}
}

And Done!

If you have any questions or stuck at any point, please ask me in the comment section. I would like to
help you with that.

AUTOMATIC UPDATE CART UPDATE CART WOOCOMMERCE WORDPRESS

Tweet on Twitter Share on Facebook

YOU MAY ALSO LIKE

How to Install WordPress How to Install WordPress – How to Add jQuery Script to
Theme (2021 Edition)? Beginners Guide? WordPress?

5 Ways to Check WordPress How to Add Text after OR How to Create a Child Theme in
Version before Cart Button in WordPress?
WooCommerce?
 ABOUT THE AUTHOR: AMAN MEHRA
Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love
coding and find solutions to bugs.

LEAVE A REPLY

Your email address will not be published. Required fields are marked *

Comment

Name * Email * Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT
ABOUT QUICK LINKS RECENT POSTS JOIN OUR NEWSLETTER

Your Blog Coach is the best site for Home How to Make a DataTable in ReactJS? Name
finding the solution to any issue related
Blog How to Inline Style in ReactJS?
to coding and learn more cool stuff
and tricks. WordPress How to Install WordPress Theme (2021 Email
Edition)?
WooCommerce

Contact
SUBSCRIBE

© 2020 Your Blog Coach Privacy Policy Terms and Conditions Sitemap

PDFmyURL.com - convert URLs, web pages or even full websites to PDF online. Easy API for developers!