How to Add a “Continue Shopping” Button to the WooCommerce Cart Page

Adding a “Continue Shopping” button to the WooCommerce cart page can improve your online store’s user experience.

This button lets customers easily navigate back to your shop to browse more products. While WooCommerce does not include this button by default, it’s easy to add one with a few simple steps.

In this guide, I’ll show you how to do this in a way that’s user-friendly and straightforward. Whether you’re a beginner or an experienced WordPress user, you’ll find these instructions easy to follow.

---

Why Add a “Continue Shopping” Button?

Before we dive into the steps, let’s understand why this button is essential:

• Improves Navigation: It helps customers return to your shop page without using the browser’s back button.
• Encourages More Purchases: By making it easy for customers to keep browsing, you increase the chances of them adding more items to their cart.
• Enhances User Experience: A well-placed “Continue Shopping” button makes your site more intuitive and user-friendly.

---

Step 1: Access Your WooCommerce Theme Files

The “Continue Shopping” button is added by editing your WooCommerce theme files. Don’t worry—you don’t need advanced coding skills for this. Here’s how to do it safely:

1. Log in to Your WordPress Dashboard.
2. Navigate to Appearance > Theme File Editor. (If this option isn’t visible, you may need to enable it in your hosting settings or use an FTP client.)
3. Select the active theme you’re using for your WooCommerce store.

Tip: Always create a child theme or back up your website before making changes. This ensures your edits won’t be lost during theme updates or cause any issues.

---

Step 2: Locate the Cart Template File

WooCommerce uses templates to control how pages look. The cart page is controlled by the cart.php file. Follow these steps:

1. In the Theme File Editor, look for the woocommerce folder.
2. Inside, find the cart folder and open the cart.php file.
3. If the cart.php file isn’t in your theme, WooCommerce is using its default file. To customize it, you’ll need to copy this file from the WooCommerce plugin directory:
   • Go to wp-content/plugins/woocommerce/templates/cart/cart.php.
   • Copy this file to wp-content/themes/your-child-theme/woocommerce/cart/.

---

Step 3: Add the “Continue Shopping” Button Code

Once you have access to the cart.php file, you’ll need to add the button code. Here’s what to do:

Locate the section in the file where the cart buttons are displayed. This is usually around the area where you find code related to “update cart” or “proceed to checkout” buttons.

Add the following code snippet to insert the “Continue Shopping” button:

<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="button continue-shopping">
    <?php esc_html_e( 'Continue Shopping', 'woocommerce' ); ?>
</a>

This code creates a button linking to your shop page.

The get_permalink( wc_get_page_id( 'shop' ) ) function automatically fetches the shop page URL.

The class="button continue-shopping" ensures the button uses WooCommerce’s styling.

---

Step 4: Style the Button (Optional)

To make the button match your site’s design, you can add custom CSS:

Go to Appearance > Customize > Additional CSS in your WordPress dashboard.

Paste the following CSS code:

.continue-shopping {
    background-color: #0071a1;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
}

.continue-shopping:hover {
    background-color: #005a8c;
    color: #ffffff;
}

You can adjust the colors, padding, and font size to suit your store’s branding.

---

Step 5: Test Your Changes

After adding the button, it’s essential to test how it works:

1. Go to your WooCommerce cart page.
2. Check if the “Continue Shopping” button is visible and functional.
3. Click the button to ensure it redirects to the shop page correctly.

If something doesn’t look right, double-check the code you added. Even a small typo can cause issues.

---

Step 6: Save and Backup

Once you’ve confirmed that the button works as expected:

• Save your changes in the Theme File Editor.
• Take a backup of your updated theme files for future reference.

---

Alternative Method: Use a Plugin

If you’re uncomfortable editing theme files, you can use a plugin to add the button. Here’s how:

1. Install a WooCommerce Customization Plugin:
   • Go to Plugins > Add New in your WordPress dashboard.
   • Search for a plugin like “Custom Add to Cart Button for WooCommerce” or similar.
   • Install and activate the plugin.
2. Configure the Plugin:
   • Go to the plugin settings.
   • Look for an option to add a “Continue Shopping” button to the cart page.
   • Set the button text and URL (usually your shop page).

Using a plugin is a safer option for beginners, but it may add extra features you don’t need.

---

Final Thoughts

Adding a “Continue Shopping” button to the WooCommerce cart page is a simple yet effective way to improve your store’s usability. Whether you prefer editing theme files or using a plugin, this guide provides everything you need to make the change easily.

By following these steps, you’ll offer customers a smoother shopping experience, increasing the likelihood of them adding more items to their cart.

About The Author