How to add Edit cart and Continue shopping links to WooCommerce checkout page

If you have an e-commerce website you probably know that getting customer to the Checkout page is just a click away from Mission accomplished – a product sale.

But there’s always room for improvement, even if you get the customer to the right page. What if customer wants to make a change in the cart? What if you could give him or her an easy way to get back the store and add more items?

Today I’ll show you two super simple ways to make your WooCommerce checkout page easier to use. And it may even encourage your customers to make another purchase. Here’s what we’ll do:

• we’ll add Continue Shopping button to checkout page

• we’ll also add Edit Cart link in WooCommerce checkout

Let’s get started!

How to add Continue Shopping link to WooCommerce Checkout page

It’s great when customer gets to the Checkout page. But you know what’s even better? When customers makes larger orders. That’s why’ll add Continue Shopping button to checkout page in WooCommerce, to make sure that customer has an easy way to view all of your products in a store. Like here:

To add Continue shopping button go to Appearance >> Theme File Editor or Tools >> Theme File Editor in your WordPress admin panel, and open functions.php file on the right.

Once you’re in the right place, add this code to the bottom of the functions.php file.

add_action( 'woocommerce_checkout_before_customer_details', 'continue_shopping_before_billing', 20 );
function continue_shopping_before_billing(){
    echo '<div class="checkout-continue-shopping">
		    <a href="'.get_home_url().'">Continue Shopping →</a>
	     </div>';
}

This code adds Continue Shopping link just over the Billing details section in WooCommerce checkout page. Exactly as you see in the screenshop above. Link gets visitor back to your store homepage.

If you want to link to other page, you can replace link href attribute to any other page of your WooCommerce store. For example:

<a href="https://yourstore.com/any-other-page">Continue Shopping →</a>

The only thing what’s left to do is to style the link properly – to make sure that it blends in to your website nicely. That’s why I added <div> and class .checkout-continue-shopping so you could style it as you want. For example:

.checkout-continue-shopping {
text-align: right; // to add button to right side of the page
}

.checkout-continue-shopping a { // add styling to the link
background: pink;
color: white;
padding: 6px 10px;
border-radius: 20px;
}

.checkout-continue-shopping a:hover { // change color of the text when customer hovers / puts mouse on the button
color: black;
}

You may need to change colors, or add your own styling to make sure it fits your website better.

P.S. to add custom CSS to your WordPress website you need to use Appearance >> Customize >> Additional CSS tab.

How to add Edit cart link to WooCommerce checkout page

There’s nothing more annoying in online store than getting to Checkout page, and noticing that you added a wrong product, or added incorrect amount of products in it. In these situations you, as a store owner, should let your customer fix the issue effortlessly.

That’s why we’ll add Edit Cart link to Checkout page too. Like here:

As previously, go to Appearance >> Theme File Editor or Tools >> Theme File Editor in your WordPress admin panel, and open functions.php file on the right. Then add this code at the end of the file, and don’t forget to save changes:

add_action('woocommerce_checkout_before_order_review', 'checkout_cart_link');
function checkout_cart_link(){
    ?><div class="checkout-cart-link">
        <a href="<?php echo wc_get_cart_url(); ?>">Edit cart content →</a>
      </div>
    <?php
}

Again, as in previous example you might need to add some custom CSS styling in Customizer. For example:

.checkout-cart-link {
   padding-buttom: 10px; // make some whitespace between product table and our link
}

.checkout-cart-link a {
   color: pink;
   font-size: 15px;
}

That’s it – these two links in the Checkout page should generate slightly larger orders in your WooCommerce online store, and should make your ecommerce website customer experience better in the long run.