Add a ‘Continue Shopping’ Button to Woo Commerce Checkout and Cart Page

By default WooCommerce Cart page does not have a ‘Continue Shopping’ or ‘Return to Store’ button.

woo-commerce-cart-page

However if you go to the cart page when the cart is empty, there is a  ‘Return to Store’ button.

woo-commerce-cart-page-empty

We just need to add this button code to the cart page when the cart has items.

Copy WooCommerce Templates into your WordPress Child Theme

First create a folder named ‘woocommerce‘ in your child theme folder structure, then copy /wp-content/plugins/woocommerce/templates/cart both the folder and templates into your woocommerce folder. This will forceWooCommerce to use your child themes templates.

Open  cart-empty.php and copy the anchor link button on line 20

<a class="button wc-backward" href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>"><?php _e( 'Return to Store', 'woocommerce' ) ?></a>

Now paste this into cart.php just before the input tag on line 125, so code looks like…

<a class="button wc-backward" href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>"><?php _e( 'Return to Store', 'woocommerce' ) ?></a>

<input type="submit" class="button" name="update_cart" value="<?php _e( 'Update Cart', 'woocommerce' ); ?>" /> <input type="submit" class="checkout-button button alt wc-forward" name="proceed" value="<?php _e( 'Proceed to Checkout', 'woocommerce' ); ?>" />

<?php do_action( 'woocommerce_proceed_to_checkout' ); ?>

 

You can change the wording in the pasted code from ‘Return to Store‘ to ‘Continue Shopping‘ or whatever you like. This will add the button in place alongside the other 2.

woo-commerce-cart-continue-shopping

You can also add this button anywhere in your templates including the Checkout Page. If you also want to change this, then copy the checkout folder into your woocommerce folder in your child theme.

woo-commerce-checkout-page

This page is controlled by the review-order.php template, in the above example the same link code is pasted juste before the ‘Place Order’ button, you need to make sure the html code is not pasted inside a php block. For this template you may need some additional CSS, add in an extra CSS class such as .continueshopping and apply some CSS styles:

.woocommerce a.continueshopping {
	float: right;
	margin-right: 20px;
}

 

That’s it

Comments

Leave a Reply

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