Putting Cart and Checkout on the Same Page in WooCommerce
David Mainayar on | 8 min read
This lack of seamless checkout can be an issue. The default setup sends a customer from your shop page to a separate checkout screen, and potentially onto a third-party payment gateway. This workflow clashes against the need for a super-easy way for customers to checkout in order to maximize sales. As such, you’ll need to find a way to optimize the checkout to ensure it’s fast and friction-free.
For this tutorial, we’re going to explore how you can put the WooCommerce cart and checkout on the same page. First though, we’re going to talk about why this streamlining is so important.
The Importance of a Streamlined WooCommerce One-Page Checkout
To understand why a streamlined WooCommerce one-page checkout can be so vital, it’s easiest to stop and think about a situation where checkout wasn’t streamlined. To do this, consider the default (or ‘vanilla’) WooCommerce checkout page:
The native checkout page serves its purpose but lacks optimization. A customer will head from your shop to another page in order to start the checkout process. From here, they could also head offsite to a third-party merchant or payment gateway page. This isn’t going to be ideal for a number of reasons:
-
The greater number of steps a shopper has between clicking the ‘Add to Cart’ button and completing a transaction, the less likely they are to go through them. 41 percent will click away from a site based on an extra required action.
-
You give the customer impetus to think about their purchase. A better approach is to help them buy an item straight away, from the screen they are on.
-
The multi-page checkout approach also brings a performance hit. Each click-through will result in a HTTP request, which means your server spends more time processing those requests. This can impact your site in lots of different ways.
In contrast, a streamlined checkout that focuses on the buyer brings a number of good benefits:
-
If the checkout process is fast, this will let more shoppers buy at once and over time. This will increase your sales, at the minimum.
-
If a customer believes your checkout process to be straightforward, they might come back to shop again. This increases customer loyalty and retention.
As such, simplifying your checkout is a solid idea that can net you a number of positives for your WooCommerce store. However, you might also consider putting the WooCommerce cart page in the same place as the checkout. Next, we’ll discuss this further.
Why You Should Put the WooCommerce Cart and Checkout on the Same Page
One of the ways you can streamline the buying process is to put the WooCommerce cart page and checkout page together. This is where the default WooCommerce implementation fails, but doing this can provide a number of fantastic benefits for both the customer and your online store:
-
At its core, you have at least one less step in the buying process. This is a one-degree reduction in friction, which can make all the difference if a customer is on the fence about a purchase.
-
This near-frictionless setup can mean that a customer is more inclined to add further products to the cart. Remember, you’ll want to consider how fuss-free the product selection process is too, as this can be a barrier to buying.
-
Speaking of barriers, the customer has none between choosing a single product and buying it, which again can make a big difference to your conversion rate.
-
The User Experience (UX) will benefit as a whole because the shopper doesn’t have to leave your site to checkout. What’s more, you’ll keep page requests to a minimum, and these performance improvements can rub off on the customer’s buying habits.
When it comes to putting the WooCommerce cart and checkout on the same page, you could either bring a developer onboard to implement the functionality or integrate a checkout window into your store on your own. Let’s talk about this next.
How PeachPay’s Checkout Window Can Help You Combine Your WooCommerce Cart and Checkout
A checkout window is a fantastic way to place the WooCommerce cart and checkout in the same website area. To implement such a window, you can use PeachPay (we’re going to showcase what this free plugin can do in more detail later on).
PeachPay automatically places a checkout button on product pages, the cart page, and the mini/sidebar cart. Beyond that, you can display the PeachPay checkout button anywhere you need to by using shortcodes. For example, you can utilize it on your home page, shop page, and gallery sections.
You’re also able to include a floating PeachPay button that is displayed at the bottom of any page. This gives customers a constant reminder of what’s in their cart and lets them check out right away.
As such, you have an accessible cart from almost anywhere you like in your store. What’s more, because you can combine multiple elements into a single page checkout, you’re able to implement a number of streamlining elements at once.
We’ll showcase some of this later. For now, let’s talk about how a one-click checkout can give your store a boost.
How a One-Click Checkout Window Can Supercharge Your Site
While it may seem similar, putting the WooCommerce cart and checkout on the same page has some differences to a one-click checkout window. You are still redirecting users to the checkout page afterward. Thus, you still have something to optimize here, namely that you’ll send the customer to another page on your site. We can do much better with a one-click checkout window.
This is where you combine the cart and checkout pages into one window, rather than a dedicated page. On the front-end, you’ll be able to access this anywhere you specify: product pages, the cart page, the mini/sidebar cart, and beyond.
There are tons of benefits to using the PeachPay checkout window:
-
Reducing the number of steps the buyer needs to complete a transaction increases the likelihood of conversion
-
Returning customers get access to a one-click checkout experience because PeachPay remembers their information so they don’t have to re-enter it
-
Easily enable multiple payment methods for customers to check out with: Stripe, PayPal, Klarna, Afterpay, Google Pay, Apple Pay, and more
-
Add product recommendations to the PeachPay checkout window to increase average order value
-
Add new checkout fields to gather extra information about your customers
-
Enable the currency switcher to show customers prices in their preferred currencies
Rather than discuss it further, we can show you how a one-click checkout window (and by extension, putting the WooCommerce cart and checkout on the same page) works in practice. For the rest of this tutorial, we’re going to show you what PeachPay can offer.
How You Can Put the WooCommerce Cart and Checkout on the Same Page Using PeachPay’s One-Click Checkout
When it comes to adding a checkout window to your WooCommerce store, the process is super straightforward.
Over the next few sections, we’ll show you what happens once you set up and use PeachPay (and the associated WordPress plugin) to put the WooCommerce cart and checkout on the same page, through a one-click checkout window.
First, let’s see how real-life businesses are using PeachPay.
How Companies in the Real World Use One-Click Checkouts
There are lots of businesses that use PeachPay to improve the checkout experience, process more customer transactions, and earn more revenue from sales. One successful company is MinifigWorks – a LEGO arbitrage business and reseller.
Through using a PeachPay checkout window, the business turns over around $500,000 in revenue, based on around 6,000 sales. The checkout window is a big part of this.
This implementation is one the customer can access from any product page:
Despite PeachPay’s fuss-free checkout window functionality, the shopper still has access to the individual cart and checkout pages too. This helps if the customer wants to take a little more time with their purchase, but the takeaway is that you give them choice and control. This is going to build trust and a relationship between parties, which could result in a greater number of sales.
In fact, all of the PeachPay windows include functionality that we’re going to talk about and reference in later sections. Let’s do some of this next, as we look at what PeachPay offers.
Touring the PeachPay Functionality
For a checkout window that takes up only a portion of the screen, there’s a lot to take in:
This might not seem vital, but it gives the customer an at-a-glance way to understand the payment process. As for payment methods, PeachPay accepts Stripe and PayPal, along with Apple Pay, Google Pay, Klarna, and Afterpay, as aforementioned.
This gives each shopper a plethora of payment types to choose from – key for your friction-free approach to the checkout. What’s more, because PeachPay is free, there are no extra costs or fees (other than transaction charges).
The checkout window can open from any page – access to the shopping cart on the MinifigWorks site is within the header. It’s unobtrusive, and means you can access it with one click regardless of the page you’re on:
A by-product of this is how a click on the summary here doesn’t redirect the customer elsewhere. In fact, the summary and the express checkout window don’t have to open in a new page, and won’t redirect the user elsewhere.
PeachPay’s Friendly User Experience
Speaking of which, PeachPay offers plenty of user-focused elements that come as standard, without the need to customize the default setup. However, with a little tweaking, you can tailor your own checkout window to the needs of your customers.
For example, you’re able to choose specific custom fields for your checkout to help you collect the right information for the future. MinifigWorks uses a set of standard fields, but you can use the PeachPay checkout field editor to assign your own:
One great UX aspect is how PeachPay will save user information once they enter it into the checkout form. This way, those details can pop up again when the customer returns. It takes a minimum number of clicks and reduces it even further for returning shoppers.
PeachPay can also help you enhance the overall e-commerce experience your store offers. Let’s discuss this next.
PeachPay’s Extra E-Commerce Functionality
PeachPay isn’t just a checkout window. It can have a part in almost every aspect of your WooCommerce store. There are a number of extra pieces of functionality that can help you get more sales, boost your AOV, and bring customers back time and again.
For starters, there are some essential features that no checkout window should be without:
-
The ability to add coupon and discount code fields to your window.
-
You can also let customers add order notes. This is going to help if you sell WooCommerce products that offer custom variant options, such as t-shirt colors or engraving.
-
You have the option to show pricing in the right currency for the customer’s location, which stops them from going off-site to figure out the price.
PeachPay also lets you work with cross-sells and upsells to make even more money from each transaction. You’ll set this up from the WordPress back-end, but once you complete your customization, you can view related WooCommerce products within the express checkout window:
Finally, because PeachPay integrates with your WooCommerce store, you can also take advantage of certain functionality. For example, you can use PeachPay’s checkout window along with the WooCommerce Subscriptions add-on to take those types of payments too.
On the whole, it’s a full-featured checkout window that can become the backbone of the e-commerce store, regardless of how you use it: either as a supplementary checkout option or to power the entire checkout & payment process (meaning you dispense with your checkout page).
Conclusion
If your checkout process runs the shopper through a number of pages, you could see fewer completed sales and a greater number of abandoned carts. Using a one-click way to put the WooCommerce cart and checkout on the same page will help customers complete their orders faster, and enable you to serve more buyers in the same amount of time.
If you want to put the WooCommerce cart and checkout on the same page, PeachPay could be the answer. It’s a checkout window that integrates with your store to help you optimize the flow of your checkout process. Its one-click checkout experience enables you to reduce your cart abandonment rate and its product recommendation options increase your AOV. As such, your overall revenue will take a considerable upward turn too.
The best part? After you get set up with PeachPay, you’ll still only be paying the standard transaction fee for every purchase made on your store. There is no increase to your transaction fee.