]Although most shopping cart solutions default behaviour is to direct customers to the shopping cart before continuing to checkout (like WooCommerce), some store owners might prefer to have both on the same page.
This particular set up offer some benefits, which we will review later. However, keep in mind that there are some drawbacks, mostly derived from the fact that we are doing a customisation that is not the default WooCoomerce set up and we need to keep an eye in future updates of the plugin.
It is important to note that there are some plugins that addresses this (like wooCommerce one page checkout), however I am very careful when it comes to adding more plugins into the website and I knew I could solve this problem without any additional plugin. In this article I will explain the detailed process I followed to achieve this for my ecommerce business herbolab.
Why would you want to have the WooCommerce cart and checkout on same page?
Before getting started, let’s consider why anyone would want to have this specific set up.
The most obvious advantage is to save 1 extra click and loading page to the customer, namely, the cart page. Although a seemingly small advantage, this extra simplicity could result in improved revenue over the long term. It is a well known fact that the easier and speedier the checkout process, the better conversion rate can be expected.
Do keep in mind that some people might argue that having one small step (clicking on checkout button) might increase inertia and therefore increase the chance of completing the checkout process. I recommend that you split test the advantages of setting WooCommerce cart and checkout on same page when in doubt.
The process
The first step is to place both the WooCommerce cart and checkout shortcodes on the same page. You will do this on the existing checkout page, the final result will look like this:
[woocommerce_cart] [woocommerce_checkout]Technically, that’s all there is to it, you now have the WooCommerce cart and checkout on the same page. However, to make it fool proof there are a few extra measures and considerations to take into account.
Removing “Proceed to checkout” button from cart and other unnecessary information
Now that we have the WooCommerce cart and checkout on same page, there are some cart-specific elements that are no longer necessary, such as proceed to checkout button, cart totals, etc. One way to remove those is to override the normal WooCommerce template by inserting code in functions.php or modifying the template files. However, I think it’s much easier to hide them with CSS and prevent breaking some functionality. Here is the code I use to hide those elements on my own site, you can add this code at the top of your checkout page (make sure you use plain text view that allows you to insert HTML elements)
<style media="screen" type="text/css">
.cart_totals {
display: none!important;
}
.checkout-button {
display: none!important;
}
.wc-forward {
display: none!important;
}
</style>
Depending on the theme you use, these CSS classes might have different names or you might need other rules to hide these elements.
Adding products to cart from URL
If you are using URLs to direct the user to checkout bypassing the cart page (example: http://yoursite.com/checkout/?add-to-cart=[product-id]), then you need to remove the argument ?add-to-cart=[product-id] from the URL by the time the user lands on the checkout page or else updating the cart won’t work properly on this page. This happens because as the argument is kept in the URL when the user lands on checkout, after modifying the cart it will refresh the page and re-add the product because it was contained as an argument in the URL.
The most reliable way I found to solve this issue is to send the user to a page that redirects to checkout. For example, if we call this page “redirect”, the actual URL to add the product to cart would be http://yoursite.com/redirect/?add-to-cart=[product-id], which would immediately redirect to http://yoursite.com/checkout/ without any extra arguments on the URL and the user is free to modify the cart content.
On my experience the best way to make this redirect is by using a nifty plugin called Page links to. It’s quite simple to do, create a new page and in the new “Page links to” box (scroll to bottom) you can select “A custom URL” and then http://yoursite.com/checkout/.
Using “WooCommerce Cart Notices” plugin
If you are using this specific plugin like I do on my site, then you will notice that cart notices are displayed twice on the page. This is because by default the plugin outputs these notices at the top of the cart and and the top of the checkout page. Unfortunately, I have not found a way to avoid this situation by hiding one of the cart notices with CSS. The only way I know is to modify one line in the plugin code to remove the output of the notices at the top of the checkout page.
To accomplish this, you will need to open the file “woocommerce-cart-notices.php” with a text editor, this file is contained in the plugin folder woocommerce-cart-notices. Search and remove this line (line 117 in my version of the plugin):
add_action( 'woocommerce_before_checkout_form', array( $this, 'add_cart_notice' ) );
And you are all set. Don’t forget to remove that line of code again after updating the plugin.
Bonus download
Even though by now we have managed to display cart and checkout on the same page, they can be optimised a bit more. As it is right now, changing the cart content won’t update the checkout content unless the user clicks on the update cart button and refresh the page, this can cause some confusion and frustration.
To solve this problem, we have created a nifty plugin that automatically updates the cart and checkout via ajax if the user makes any changes to the cart. Download it for free clicking on the button below.
Final words
This is the specific set up I used to have WooCommerce cart and checkout on same page for my specific store. Please take into account that your store theme or plugins might require you to do some extra customisation. Always test and make a purchase as an user to make sure everything is working.
What are your thoughts on this approach? Don’t forget to leave a comment behind!