Web Development

Woocomerce Custom Update Cart button

28 May 2021

In this example we change the position of update cart button before checkout button in Cart page.

Put the below code in functions.php page


add_action('woocommerce_cart_totals_after_order_total', 'change_update_cart');

function change_update_cart(){
	?>
	
	<button type="button" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>" id="new_update_btn"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>
	<?php
}

In cart.php file find this code for update cart button

<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>" id="main_update_btn" style="display: none;"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button> 

style=”display: none;” Add this code for hiding the woocommerce default button.

Now just put js code in footer.php

<script>
jquery('#new_update_btn').on('click', function(event) { 
  jquery('#main_update_btn').trigger('click');

});
</script>

Leave a Reply

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

one × two =

Author

Hello, I'm
Rajat Meshram

I am a WordPress Developer having 5+ years of Experience. My professional experience includes designing and implementing web pages, user interfaces and plugins for WordPress, helping clients to troubleshoot and fix their WordPress products, designing themes that are as functional as they are beautiful and working with a team of colleagues to create the best products possible.

Latest Post

Latest Tags