was successfully added to your cart.

Setting up WooCommerce cart and checkout on same page

By June 25, 2015 How to guides

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:

Your cart is currently empty.

Return To Shop


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.

Download free plugin

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!

13 Comments

  • RwkY says:

    Thank you for this on-the-fly guide, simple and effective!

  • DanTheModel says:

    Just as an update, instead of altering the plugin file for cart notices you can use this line in your functions.php file to remove the cart notices from the checkout form.

    remove_action( 'woocommerce_before_checkout_form', array( wc_cart_notices(), 'add_cart_notice' ) );

  • Ruben says:

    Hi! I’ve tested your idea in two differents themes, and one of the problems I find, is that Returning Customer link is not working. When you click on it, the div for login is not displaying. The browser moves its view, but nothing else happens. I see that in your shop it works OK. Any ideas? Thank you for your help!

    • Fran Sanchez says:

      Hi Ruben,

      It sounds like your theme might have an issue with this kind of implementation. Perhaps it’s as simple as adding a line of CSS to solve the problem, however it is difficult for me to suggest the solution. Your best bet is explaining the issue to the theme’s support.

      Good luck!
      Fran

  • Ales says:

    Hi
    Ive made that as you suggested, but there is one major problem. When you change quantity and update cart, the amount on checkout doesnt update. So you have to refresh page to update amount on checkot, otherwise its not correct amount for customer to see when place oreder. Do you have any suggestions how to achieve that, it wiuld be awsome if cart and checkot amount would update with ajax when changing quantity

    • Fran Sanchez says:

      Hi Ales,

      You have a point, I actually didn’t think this was a problem until you mentioned it. There is a free plugin in wordpress that can update the cart totals via ajax, however, it does not update the checkout. We are currently building a custom plugin to handle this, we will release for free shortly, I will update you here.

    • Fran Sanchez says:

      Hi Ales,
      We have updated the post and included the free plugin I told you about. Check it out.
      Fran

  • Mitchell Kantarovich says:

    Hi Ales,

    When I placed the cart shortcode on top of the checkout shortcode, wordpress automatically removed cart totals and proceed to checkout without me having to paste the css that you provide. Not sure if this is due to a wordpress, woocommerce update or something of the sort.

    I want the cart totals to show up.

    How can I stop wordpress from automatically removing them.

    https://eagleklaw.com/checkout/

  • Cindy says:

    Hello, the plugin works great now, thanks !
    Is there any way to hide the update cart button ? I tried on style.css but couldn’t work.
    Thanks again for the plugin 🙂

  • Lucas says:

    I cant download plugin. Doesnt appear on my Downloads tab.

Leave a Reply

Loading...