How to Hide Update Cart Button WooCommerce Cart Page

Table of Contents

Are you looking for a way to hide update cart button in WooCommerce?

If you would like to hide certain elements on your WooCommerce site, I wrote a comprehensive guide on how to customize, hide or remove some of these features – WooCommerce ultimate hide or remove guide.

WooCommerce cannot make changes on a whim. This is because there are many factors that you need to put into consideration, especially if you have a complicated site.

This implies that small changes may cause a significant difference in what you see on the front end, and at worst, you may even create a significant negative customer experience.

WooCommerce Hide Update Cart Button

Moreover, the flexibility that WooCommerce comes with is very understated. However, you need to have the skill set and experience to do a lot of what you want to be done with your WooCommerce site.

In this post, I will share with you how to optimize the cart page by hiding the update cart button. Moreover, I will share a snippet to automatically update the WooCommerce cart when a customer changes the quantity.

WooCommerce Update Cart Button

If you are familiar with WooCommerce, you know that if a customer has added a product to their cart and decided to change the quantity, the only way the order can be reflected with that change is by clicking on the update cart button.

However, this is just another step for your customer, who probably wants to see the updated total. Therefore, this functionality needs to be optimized to save time.

Steps to Hide the Update Cart Button

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down to Additional CSS in the left sidebar that appears.
Add the CSS rule.

input[name='update_cart'] {

display: none !important;

}

/* OR YOU CAN TRY THIS */

button[name='update_cart'] {

display: none !important;

}

This is the outcome:
Click on publish.
Now that the button is hidden, the next step is to “click” the button via JQuery and let WooCommerce update the cart totals and taxes.
This code will trigger a “click” on the hidden Update Cart button. Add the following code in the functions.php file:

/**

*      Automatically Update Cart on Quantity Change - WooCommerce

*/

add_action( 'wp_footer', 'njengah_cart_refresh_update_qty' );

function njengah_cart_refresh_update_qty() {

if (is_cart()) {

?>

<script type="text/javascript">

jQuery('div.woocommerce').on('click', 'input.qty', function(){

jQuery("[name='update_cart']").trigger("click");

});

</script>

<?php

}

}

After that, refresh the cart page. When you try to add the quantity, you will see that the cart will be automatically updated:

Conclusion

In summary, this post shares how you can optimize the cart page. This will reduce the number of steps when customers increase the quantity on their cart.

It is important to note that you can place PHP snippets at the bottom of your child theme functions.php file.

Additionally, CSS goes in your child theme style.css file. However, if you are not familiar with handling code, please contact a qualified WordPress developer, so that you do not break down your site.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Hide Update Cart Button WooCommerce Cart Page

WooCommerce Hide Update Cart Button

WooCommerce Update Cart Button

Steps to Hide the Update Cart Button

Conclusion

Similar Articles

Related