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. So the file path will be /wp-content/themes/yourtheme/woocommerce/cart/. 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

  1. says

    Thank you very much for the tip. It works nicely. I need to add some additional CSS to align the “Continue Shopping” button with the other 2 buttons. I used only for the Cart page.

  2. Dev says

    Hi,

    Iam new to wordpress and woocommerce,

    Can you explain about this

    “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. So the file path will be /wp-content/themes/yourtheme/woocommerce/cart/. This will forceWooCommerce to use your child themes templates.”

    Iam using virtue free theme

  3. says

    Hi Neil,
    how can i put the back to shop button in the single product page.
    i had put it into the content-single-product.php, no luck.

    i want to put the button next to add to cart button.

  4. Hanson Leo says

    Hi neil,

    thanks for the tips. like to know how can i make the border equal as the update cart and checkout button?

  5. dozza says

    Can you confirm the correct path to the edited cart.php template in the child theme we should now have?

    Is it;

    a) wp-content/child-theme/woocommerce/cart/cart.php

    or

    b) wp-content/child-theme/woocommerce/templates/cart/cart.php

    or

    c) something else…

    ???

      • dozza says

        Thanks Neil. That works well. Do we really need to copy over all templates in cart folder to child theme? Surely only cart.php is required. I don’t like having un-modified templates in child themes as a rule as it confuses the hell out of me. Don’t you agree?

          • dozza says

            Agreed!

            Reading Hanson requests below, I’d like to add the ‘Continue Shopping’ button to Woo Message that appears after we add a product to the cart from Product detail page. This woo message currently shows ‘View Cart’ and I’d like the ‘Continue Shopping’ button to the left of it. I’m informed that, since WP4.2, it is now located at /wp-content/plugins/woocommerce/templates/notices/success.php

            Would you know the relevant php I should use to edit this?

  6. ridfa says

    Cool, but when you update the plugin, it will override the change. the ideal will be to add add_action function in the file fonction.php

Leave a Reply

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