Black Friday: Up to Off!

DAYS
HOURS
MINUTES
SECONDS

How to Edit the WooCommerce Cart Page

Want to learn how to edit the WooCommerce Cart page?

WooCommerce is an excellent tool for building eCommerce websites. It’s easy to set up, super extensible, and highly scalable. As soon as you install it on your WordPress website, it guides you through the setup process and even generates the essential eCommerce pages without you having to create them from scratch. 

Despite its many positives, there is a lot of room for improvement. For example, cart abandonment is a common problem that most eCommerce businesses encounter because the design of the Cart page is not focused on conversions. 

In this article, I will show you the exact steps you need to take to improve the design and functionality of your WooCommerce Cart page.

Let’s dive into the tutorial.

How to Edit the WooCommerce Cart Page

There are a couple of ways to edit and customize the WooCommerce Cart page. 

You can use the default WooCommerce blocks, WordPress page builders, or third-party WooCommerce plugins, or you can add CSS code manually to customize the page. 

Unfortunately, these methods are not always efficient and can end up causing more trouble than they’re solving.

For instance, custom CSS codes can break your site, page builders and other plugins can slow your site down, and you can do only so much with the default WooCommerce blocks. 

However, a well-designed eCommerce plugin such as Botiga Pro has been built to add powerful features to WooCommerce stores while ensuring fast loading speed. 

In this tutorial, I will show you how to use Botiga Pro to make customizations that are proven to reduce cart abandonment and boost sales. We’ll be carrying out the following steps: 

  • Improving the Cart page layout 
  • Displaying an off-canvas side mini cart
  • Allowing customers to increase the product quantity in the mini cart
  • Displaying a floating mini cart icon
  • Showing a ‘Continue Shopping’ button on the Cart page

Let’s start with installing Botiga for your WordPress site.

1. Install the Botiga Pro Plugin

Botiga Pro is a powerful plugin loaded with features that will transform your WooCommerce store for the better.

After purchasing Botiga Pro, download it to your local computer, go to Plugins → Add New, and upload and install the plugin:

installing the botiga pro plugin in woocommerce

Click the ‘Start building your site’ button to install and activate the free Botiga theme.

That’s it. By now, both the theme and plugin are activated on your WordPress site (you can refer to our quick start guide for more on getting set up with Botiga Pro).

However, before I show you how to edit the WooCommerce Cart page, let’s take a quick look at the starter sites offered by Botiga and Botiga Pro and why you may want to import one into your WooCommerce store. 

2. Import a Starter Site (Optional)

Starter sites are pre-made website designs that can be imported into an existing WordPress site.

It’s worth noting that installing a starter site is not a prerequisite of Botiga (you can also create a website design from scratch, using the built-in theme options), but I recommend that you import one, as it’ll improve your WooCommerce store significantly.

Botiga starter sites come equipped with clean, professional designs and pre-built pages that are essential for your business. With Botiga Pro, you get access to multiple starter sites targeting various eCommerce niches, including beauty, apparel, furniture, jewelry, and others. 

You can preview the designs by going to Botiga → Starter Sites and clicking the Preview button that appears on the thumbnail of each site.

Choose the starter site that you like the most, then click the Import button:

botiga starter sites

As soon as you click the Import button, a popup will appear asking you to choose whether you want to import the entire website (including all the images) or just the layout with placeholders for the content elements. 

By default, Botiga imports all the widgets, Customizer settings, and images of the starter site, but you have the option to deselect any of those if you don’t want to import them. 

When you are done, click the Next button and the import process will begin:

importing botiga starter sites

Note that it will take Botiga a few seconds to import the starter site.

3. Edit the WooCommerce Cart Page

Now, let’s see how to utilize Botiga’s built-in Cart page features to reduce cart abandonment and boost your conversion rate. 

The first thing you need to do is go to Appearance → Customize → Cart:

cart panel botiga theme

You will notice that some of the options in the Cart panel are already enabled. Keep them as they are and proceed to enable or modify the following features:

i. Improve the Cart Page Layout

The primary objective of a Cart page is to move customers to the next stage of the sales funnel, which is the Checkout page. 

One of the best ways to gently nudge visitors to move to the checkout is by showing the checkout button in a prominent place on the Cart page. 

However, the default WooCommerce Cart page displays the checkout button under the products. This means customers have to scroll down to see it:

default woocommerce cart page

With Botiga, you can change the location of the button to the right side of the page, which highly improves its visibility:

botiga cart page layout

All you need to do is go to Appearance → Customize → Cart and under the Layout heading, select the second layout:

cart page layout change botiga

Note that this is a feature of the free Botiga theme, therefore it’s also available without Botiga Pro.

ii. Display an Off-Canvas Side Mini Cart

A mini cart is a pop-up window that appears on the screen when a customer clicks the cart icon in the menu:

default mini cart woocommerce

Adding a mini cart to your WooCommerce store encourages customers to go straight to the Checkout page. 

In the Cart panel in the Customizer, go to Mini Cart Style and select the second layout, as shown in the image below. 

Then, make sure that the ‘Open on Ajax Add to Cart’ button is toggled on. This will allow visitors to add products to the mini cart without having to reload the entire page and causing disruption to the shopping experience:

open on ajax add to cart option botiga

Then, click the Publish button and check the design of your site’s mini cart:

off canvas mini cart botiga

Important: For the Ajax Add to Cart option to work on the mini cart, you need to have the default WooCommerce Ajax Add to Cart option enabled.

To do so, go to WooCommerce Settings Products Add to cart behaviour, check the ‘Enable AJAX add to cart buttons on archives’ option, and save your changes:

woocommerce ajax add to cart

iii. Allow Customers to Increase the Product Quantity in the Mini Cart

Allowing customers to increase the product quantity in the mini cart will help boost your store’s sales.

All you need to do is toggle on the Mini Cart Quantity option in the Cart panel in the Customizer:

increase mini cart quantity botiga

Here’s how the mini cart looked on our demo site before enabling the Mini Cart Quantity option:

off canvas mini cart botiga

After enabling the option, the mini cart looks like this:

increase product quantity in mini cart

iv. Display a Floating Mini Cart Icon

As the name suggests, a floating mini cart is a cart icon that floats on the screen and encourages customers to go to the Cart page:

botiga floating cart button

To add a floating mini cart icon to your WooCommerce store, open the Cart panel and make sure the second style is chosen under Mini Cart Style. 

Then, toggle on the Floating Mini Cart Icon option and proceed to configure the icon by clicking the Floating Mini Cart Settings button:

enabling floating mini cart icon

New options will appear in the Customizer where you can choose a mini cart icon, set its display rules, and modify its style (e.g. color, background color, border radius, shadow, etc.), size, position, and distance from the corner of the page:

botiga floating cart icon settings

v. Show a ‘Continue Shopping’ Button on the Cart Page

As I mentioned before, the primary objective of the Cart page is to move customers to the Checkout page. 

Adding a ‘Continue Shopping’ button to the Cart page may seem like contradictory advice — however it’s known to significantly increase the conversion rates for some WooCommerce stores. 

So I highly recommend that you experiment with a Continue Shopping button. Enable it on your store and see if it improves your conversion rate. 

To add a Continue Shopping button to your Cart page, go to the Cart panel in the Customizer, toggle on the Display Continue Shopping Button option, and proceed to modify the text of the button if you feel the need to:

display continue shopping button in botiga

Conclusion

Customizing your WooCommerce store’s Cart page is a great way to reduce cart abandonment and improve your conversion rate. 

While there are a number of ways to customize the WooCommerce Cart page, not every technique will make a difference to your revenue. 

In this article, I covered five Cart page customizations that are proven to boost conversion rates:

  1. Use a horizontal layout for the Cart page to make the checkout button easier to find.
  2. Display an off-canvas side mini cart that includes a Checkout button.
  3. Allow customers to increase product quantity in the mini cart.
  4. Show a floating mini-cart icon to encourage customers to move to the Cart or Checkout page.
  5. Experiment with a ‘Continue Shopping’ button to see if it works for your store.

With Botiga Pro, you can implement all of these techniques easily — without having to write any code.

If you have any questions about how to edit the WooCommerce Cart page, let us know in the comments section below.

Leave a Reply

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