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/cart.php  both the folder cart and template cart.php into your woocommerce folder. So the file path will be /wp-content/themes/yourtheme/woocommerce/cart/cart.php.

This will forceWooCommerce to use your child cart.php template or other cart template you also copy across.

Open the original  cart-empty.php template/wp-content/plugins/woocommerce/templates/cart/cart-empty.php and copy the anchor link button on line 32…

<a class="button wc-backward" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>"> <?php _e( 'Return to shop', 'woocommerce' ) ?> </a>

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

<a class="button wc-backward" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>"> <?php _e( 'Return to shop', '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/review-order.php template & 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;
}

 

Adding it via a WooCommerce Hook

Instead of using templates you can add it in via one of many WooCommerce hooks.

woo-commerce-return-to-store

<?php
//add back to store button after cart
add_action('woocommerce_cart_coupon', 'themeprefix_back_to_store');
function themeprefix_back_to_store() { ?>
<a class="button wc-backward" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>"> <?php _e( 'Return to shop', 'woocommerce' ) ?> </a>
<?php
}
view raw return-to-store.php hosted with ❤ by GitHub

So in the above the button is added just after the coupon info with the woocommerce_cart_coupon action, to find the correct hook you need to look at the WooCommerce templates and find the one nearest to the position you want.

The code returns the user back to the shop URL,  you can change the url by editing the href value or alternatively filtering the WooCommerce shop URL to be a different page.

29 Comments

  1. Carl on December 20, 2016 at 6:16 am

    How we can add checkout button ( order pay ) to order details page?

  2. Lyuben on November 13, 2016 at 8:19 am

    Hi, thanks a lot for this tutorial, very useful:)

    I`m having a hard time trying to align the new “Return to Store” button with the other two (Update Card and Proceed Checkout) on the Card page. Here is a photo:

    https://www.dropbox.com/s/uisjdc7li7q7gy5/return_to_shop_box_position.png?dl=0

    Can you please help?

    Also managed to add the button on the Single Product posts, at single-product.php, but need to fix the position of it as well.

    I guess something in the style.css file of the theme should be adjusted, but no idea what. Here is what I`ve got in the file:

    #page .wc-backward a:before,
    #page .wc-backward:before {
    font-family: initial;
    content: “←”;
    vertical-align: middle;
    line-height: 1,5;
    }

    Thanks a lot!

  3. John Leonard on November 12, 2016 at 5:02 pm

    I am kind of confused on your first step: “First create a folder named ‘woocommerce‘ in your child theme folder structure”. How do I do that?

    • Neil Gowran on November 13, 2016 at 10:59 pm

      You’ll best of need either a FTP or Cpanel access to your website files and folders – if you are not too sure what that means ask your host provider – and also since you are not too familiar with these concepts I would strongly advise on taking a site back up prior to making any changes – best of luck!

  4. Russell on October 27, 2016 at 6:16 am

    Thanks for the advice, very useful.

    The only change is I added the code to the proceed-to-checkout-button.php file instead of cart.php. The button now sits right next to the proceed to checkout button, which personally I prefer.

    I also followed the advice to only copying the cart folder as mentioned in the replies above.

  5. Rubb on September 19, 2016 at 11:35 am

    Code is not working for me, something is missing?

  6. Zain on September 5, 2016 at 12:21 pm

    Hallo, This code is working well, but i want redirect to last visited page instead of shop. I tried a lot to change the link but did not get success 🙁
    Someone have any idea how should i customize the link ?

  7. Rub on June 5, 2016 at 1:34 pm

    Is the code still working?
    I got error

  8. Mukesh on May 27, 2016 at 11:59 am

    /**
    * Add Continue Shopping Button on Cart Page
    * Add to theme functions.php file or Code Snippets plugin
    */

    add_action( ‘woocommerce_before_cart_totals’, ‘tl_continue_shopping_button’ );
    function tl_continue_shopping_button() {
    $shop_page_url = get_permalink( woocommerce_get_page_id( ‘course’ ) );

    echo ”;
    echo ‘ Continue Shopping →‘;
    echo ”;
    }

  9. amir on March 17, 2016 at 12:01 am

    Hi,

    thanks a lot. This is nearly what I’ve been looking for since a couple of hours now. Really good snippet!

    Specifically, I’ve been trying to add a second button to the woocommerce message that appears after clicking “add to cart” (for variable products in case that makes a difference).
    Atm it says: Youve successfully added product x to your cart and then there’s a button “go to cart”.
    I want to have another button underneath the “go to cart” button, which would be a “go to checkout” button.
    How would I adapt your code to do that?
    I tried adapting your code for these 2 hooks:wc_add_to_cart_message , woocommerce_add_message but failed.

    Thanks a lot and looking forward to hearing from you.
    Amir

  10. Life Interwoven on July 3, 2015 at 4:27 am

    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.

  11. Dev on April 23, 2015 at 7:27 am

    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

  12. Hanson Leo on February 6, 2015 at 5:37 am

    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.

  13. Hanson Leo on February 3, 2015 at 9:25 am

    Hi neil,

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

    • Neil Gee on February 3, 2015 at 10:48 pm

      Hi Hanson – not too sure what you mean – do you have an example?

      • Hanson Leo on February 4, 2015 at 8:48 am

        you see the screenshot here,

        http://s267.photobucket.com/user/zontro/media/return%20to%20store.png.html

        the button for return to store didnt had the same size with update cart and checkout button.

        • Neil Gee on February 4, 2015 at 11:13 pm

          You would need to adjust CSS just for that button, adjust the line height value to make it equal height…

          a.button.wc-backward {
          line-height: 1.5;
          }

          • Hanson Leo on February 5, 2015 at 2:44 am

            thanks for the reply Neil,

            i used this code

            .wc-backward:before, .wc-backward a:before {
            line-height: 1.5;
            }

            but your reply inspired me. thanks keep the great tips coming. cheers



  14. dozza on January 30, 2015 at 5:48 pm

    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…

    ???

    • Neil Gee on January 30, 2015 at 11:30 pm

      wp-content/child-theme/woocommerce/cart/cart.php works for me

      • dozza on February 2, 2015 at 12:35 pm

        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?

        • Neil Gee on February 2, 2015 at 9:52 pm

          Yes agree, only copy over what you are going to change.

          • dozza on February 9, 2015 at 1:21 pm

            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?



  15. ridfa on December 21, 2014 at 11:56 am

    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

    • Neil Gee on January 30, 2015 at 11:39 pm

      Change won’t be overriden as child templates are being used not the parent ones.

  16. Mika on November 14, 2014 at 11:22 pm

    Hey,

    Sweet deal. It worked really well!

    I appreciate! 🙂

    Sincerely,
    Mika

    • Mukesh on May 27, 2016 at 11:58 am

      This is my Code

      /**
      * Add Continue Shopping Button on Cart Page
      * Add to theme functions.php file or Code Snippets plugin
      */

      add_action( ‘woocommerce_before_cart_totals’, ‘tl_continue_shopping_button’ );
      function tl_continue_shopping_button() {
      $shop_page_url = get_permalink( woocommerce_get_page_id( ‘course’ ) );

      echo ”;
      echo ‘ Continue Shopping →‘;
      echo ”;
      }

Leave a Comment





%d bloggers like this: