Posted on

WooCommerce: How to Put Cart & Checkout on the Same Page?

This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page.

But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell approximately one product per order), if you want to save an additional step (two steps convert better than three: “Add to Cart” > “Cart Page” > “Checkout Page” – and this is not rocket science), if your custom workflow and ecommerce objectives require you to manage Cart and Checkout all together, well, this tutorial is for you.

There is a mix of shortcodes, settings and PHP snippets you can use to make this work out of the box. And trust me, this is easier than you think.

While many developers decide to turn the checkout process into a “Multi-Step Checkout” (ehm, not sure why – the more steps the more likely it is to have a cart abandonment), in here we’ll see the exact opposite.

So, how do they do it?

Well, here’s the complete, easy, step by step guide to put Cart & Checkout on the same page. Give it a go, do some WooCommerce testing and tracking, and see if it converts better πŸ™‚

Step 1: Add Both Shortcodes @ Checkout Page

First, you need to add the “woocommerce_cart” shortcode to the Checkout page. In this way we’re telling WooCommerce we want to have the cart table on top and the checkout form below it.

Update: 19/Oct/2018. In the first version of this tutorial, where I simply told you to add the “woocommerce_cart” shortcode above the “woocommerce_checkout” shortcode on the Checkout page (screenshot), however this creates a bug on the “Thank you page” after an order is placed. In fact, an “empty cart” message is displayed there, as the Checkout page content (which includes the cart shortcode) also displays on the Thank you page (not sure why!). So we need to find a way to load the “woocommerce_cart” shortcode on the Checkout page BUT not on the Thank you page. So, here’s the fix, and yes, it’s a neat PHP snippet:

PHP Snippet: Display cart table above checkout form @ WooCommerce Checkout page


/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.7
 */ 

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page_only', 5 );

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

// NOTE: I had to change the name of the shortcode below...
// ...as it would have displayed this site's Cart...
// ... make sure to use "woocommerce_cart" inside "[]":

echo do_shortcode('[enter_here_woocommerce_cart_shortcode_here]');

}

With this tiny change, your new Checkout page will look like in the following screenshot. Please note – if you’re familiar with the Cart page layout, you might remember the “Cart Collaterals” section (i.e. “Cart Totals“, where subtotal, shipping and totals are displayed)… well, this is automatically hidden just because you’re using the two shortcodes on the same page. Isn’t this wonderful?

Cart & Checkout on Same Page: Checkout Page Preview

Step 2: Change Cart Page @ WooCommerce Settings

Probably, the shortcode change alone is sufficient to get what you need (Cart and Checkout on the same page). However, a couple of tweaks are needed in case you really want to do things right.

In fact, if the Checkout is emptied (I mean, the Cart table on the Checkout page of course…), WooCommerce will redirect users to the Cart page and display the empty cart message (“Return to Shop”).

Now, our goal is to completely get rid of the Cart page – yes, exactly, completely delete it from our WordPress pages – so that users will never see it.

For this reason, and mostly for the “Cart to Checkout” redirects, you need toΒ assign the “Checkout” page also to the Cart page (under WooCommerce > Settings > Advanced). Now, empty Carts will “stay” on the Checkout page, and “Redirect to Cart upon Add to Cart” redirects will go straight to Checkout, bypassing entirely the Cart page. Here’s a screenshot:

Cart & Checkout on Same Page: WooCommerce Advanced Settings

Step 3: Delete Cart Page @ WordPress Pages

No need of a screenshot here.

Now that the Cart page is not useful any longer, it’s time to delete it from your WordPress pages. Redirects are already in place and your cart table is already on the Checkout page, so there is no need to worry.

Go ahead and put the Cart page into the trash!

Step 4 (Bonus): Redirect Empty Checkout

Then there is a little workaround in case you don’t want to show an empty Checkout page if users access it directly or when the cart table is emptied.

For example, you might want to redirect empty carts to the homepage, or maybe to the shop page (or even better to the last viewed product), so that customers can start shopping again.

Here’s a little snippet for you – a little bonus – so you can redirect the empty checkout page to the homepage for example. Try it out!

PHP Snippet: Redirect Empty Cart @ WooCommerce Checkout with Cart


/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.4.7
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_home() {
	if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
		wp_safe_redirect( home_url() );
		exit;
	}
}

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

39 thoughts on “WooCommerce: How to Put Cart & Checkout on the Same Page?

  1. Hi Rodolfo, thanks for this awesome trick !
    One thing I regret is that when going to an empty cart we don’t have the nice “Return to shop” button.
    You used the condition : if ( is_wc_endpoint_url( ‘order-received’ ) ) return;
    is their another one that could be added to be used in case of empty cart ?

    Best.

    1. Thanks Thibault! The second part of the snippet redirects to a given page, so you could redirect to the shop πŸ™‚

  2. Rodolfo! You surprise us with a gem in every newsletter. I’m doing this on a live site–it’s exciting! πŸ™‚

    One cosmetic problem I have: upon clicking Checkout, Checkout page loads with Cart at the top but the billing address fields are visible. So the customer has to scroll up to see the coupon message and the cart above it. The links point to /checkout/ but the page is not loaded to be at the top. Can my theme (Divi) mess with the load position?

    1. Thanks Peter! Simply switch theme temporarily and try that again – then let me know πŸ™‚

  3. Hi and thank you for the code!
    There is one thing that I don’t understand. When I entered your main code there is a code

    [enter_here_woocommerce_cart_shortcode_here]

    still showing up in checkout page. How can I make it dissapears. I hope you understand my poor english.
    Best regards
    JanOve

    1. Hi there, thanks for your comment! Please substitute “enter_here_woocommerce_cart_shortcode_here” with “woocommerce_cart” πŸ™‚

  4. Hi Rodolfo,

    Congrats for your posts! best on the web for woocommerce ! learned a lot !

    There is a problem on my side when i send a pay for order email (sometimes customer has problem to pay and we have to send a payment link). It gets redirected to home page, instead of payment page. To fix, i added pay endpoint to exclude it from conditions to redirect to home page:

    
    function bbloomer_redirect_empty_cart_checkout_to_home() {
        if ( !is_wc_endpoint_url( 'order-pay' ) && is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() ) {
            wp_safe_redirect( home_url() );
            exit;
        }
    
    

    it works on my end, hope it’s correct for everybody.

    1. That’s awesome Julio πŸ™‚ Thank you!

  5. On a dev site, with this solution (all steps) in place, I’m still getting the cart page. And on the checkout page I’m getting two cart tables above the billing area. Looking deeper into this site’s plugins and other configs but thought I’d mention it doesn’t work out of the gate for every site.

    1. Hey Rob, thanks for your comment πŸ™‚ This works so there is something else conflicting with it. So, it’s possibly your theme. Try to swithΓΉch temporarily to 2017, apply the snippets, and it should work – in that case you’ll know there is something wrong in your theme or the coding needs to be adjusted for your custom coding

  6. One much waited snippet here. Thanks a lot ! πŸ™‚

    1. Excellent πŸ™‚

  7. Ooo just noticed something.. with the removal of the cart page, something occurs.

    A user buys something and goes to the “new” checkout – what if they want to add more? or if they want to add another item? or simply add to the existing product count – all that is no longer available.

    This is an interesting curve ball

    1. Hey Roberta, yes, make sure to add the Cart shortcode above the Checkout form. Please use the PHP way (tutorial now updated) and not the manual way, otherwise you will have an “empty” cart notice on the thank you page. Cheers πŸ™‚

  8. This is brilliant! I have a theme where the cart icon is in the menu – and this still works even with this change. I am hoping the streamlined process will improve conversions. Thank you.

    1. Awesome πŸ™‚

  9. Thank you Rodolfo!
    It works, but now there is no option to remove items added to checkout
    If someone added by mistake 3 items instead of 2, he cannot modify the order as he was able in the shopping cart.
    How can I overcome this problem?
    Ugo

    1. Ciao Ugo, thanks for your comment! As you can see from the screenshots, my checkout displays the little red “X” buttons to remove items and also the quantity selectors, as well as the “update cart” button. So, you probably have some other problem / conflict πŸ™‚

  10. Hi, great hack.

    Can we do something about this message on the checkout page after the order is made?

    http://prntscr.com/l7objo

    Thanks

    1. You’re absolutely correct Cristian – let me find a different solution. Be right back!

    2. Tutorial updated πŸ™‚

  11. Great little tweak.
    We love your work.

    1. Thanks Bob πŸ˜€

  12. Rodolfo,

    Thanks for the explanation. I really like how this functions, however it breaks some custom code I have. I have a coupon code programmatically added to the cart on multiple quantities of certain products being added. My PHP leverages the following:

     WC()->cart->remove_coupons();
    WC()->cart->add_discount( $coupon1 );
    WC()->cart->calculate_totals(); 

    Putting the cart and checkout short codes on the same page breaks this function. I get the notice that the code has been added, but the discount is not reflected in the checkout totals. Any suggestion on how to modify my custom function to apply the coupon codes if the checkout and cart are on the same page?

    1. Hello grant, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

    2. I’d like to piggyback off this. For me it shows the discount in the checkout totals, but when code is applied it doesn’t show discounted price in the cart itself – while it did before. Rodolfo, is discount applied properly on your end in the cart section after coupon is added?

    3. Hey Miroslav πŸ™‚ Yes, despite the “Cart Totals” are gone, if I scroll down to the Checkout Order Review table I see the coupon row once I add a valid coupon, together with the discount applied. Hope this helps!

  13. Ohh I’m so trying this on my shop tomorrow! Thanks so much for sharing all your knowledge πŸ™‚

    1. Excellent πŸ™‚

  14. Crazy bug great tip Rodolfo πŸ˜‰

    Hugs from Spain

    1. Thanks a million Fernando! Same to you πŸ™‚

  15. That’s a good idea, but what happens to the shipping options (calculate shipping option on the cart page) – where do these get selected?
    Lyse

    1. Hey Lyse, thanks for your comment! Shipping options are inside the checkout form shipping total, so no need of a shipping calculator πŸ™‚

  16. This is really useful if you have multiple items.

    In another scenario, what if there was only one item for sale, could this all be added to the single page or template?

    That way you go to the product and simply add it and go through the purchasing process right there…

    I’ve seen single product themes use that methodology (then it woul be applied to the current theme in use)

    1. Hello Roberta, thanks so much for your comment! You could totally try to add the “woocommerce_checkout” shortcode inside the single product page and see what happens πŸ™‚

  17. “even better to the last viewed product” How do I do this ?

    1. Hey Alain, thanks so much for your comment! Yes, this is possible by using a WordPress function called “wp_get_referer()” – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  18. Hi Rudolfo

    That looks a REALLY useful idea. Thank you!

    If I wanted to redirect to another page other than the home page, how should I insert its URL in your snippet line:

    wp_safe_redirect( home_url() );

    Many thanks

    Garry

    1. Thank you Garry πŸ™‚

      You’d use something like:

      wp_safe_redirect( 'https://your-custom-url.com' );

      Let me know

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.