WooCommerce: Cart and 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 no more than 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?

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 Cart Shortcode @ 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.

In the first version of this tutorial I suggested to add the [woocommerce_cart] shortcode above the “woocommerce_checkout” shortcode in the Checkout page. Unfortunately this creates a bug on the “Thank you page” once an order is placed. In fact, an “empty cart” message is displayed. So we need to find a way to load the [woocommerce_cart] shortcode on the Checkout page BUT not on the Thank you page. Here’s the fix, and yes, it’s a neat PHP snippet.

PHP Snippet: Display Cart Table Above Checkout Form @ WooCommerce Checkout Page

/**
 * @snippet       Show Cart @ WooCommerce Checkout
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'woocommerce_before_checkout_form', 'tutoraspire_cart_on_checkout_page', 11 );

function tutoraspire_cart_on_checkout_page() {
echo do_shortcode( '[woocommerce_cart]' );
}

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?

Step 2: Unset 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 it right.

In fact, if the Checkout is emptied (I mean, the Cart is emptied on the Checkout page), WooCommerce will redirect users to the Cart page and display the empty cart message (“Return to Shop”) and the “Checkout is not available whilst your cart is empty.” message as well.

Now, our goal is to completely get rid of the Cart page so that users will never see it.

For this reason you need to unset the Cart page (under WooCommerce > Settings > Advanced) – simply click on the little “x” and “Save Changes”. Here’s the updated screenshot since WooCommerce 3.7:

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 and delete it permanently!

Step 4 (Bonus): Redirect Empty Checkout & Ex Cart Buttons

Then there is a little workaround in case you don’t want to redirect an empty Cart+Checkout to the homepage when the cart is empty.

For example, you might want to redirect empty carts to the Shop page, so that customers can start shopping again.

This also changes the behavior of the “View Cart” buttons if you have any within your WordPress theme. They will also redirect to the Shop page.

PHP Snippet: Redirect Empty Cart To WooCommerce Shop Page

/**
 * @snippet       Redirect Empty Cart To WooCommerce Shop
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 6
 * @donate $9     https://www.tutoraspire.com
 */

add_filter( 'woocommerce_get_cart_url', 'tutoraspire_redirect_empty_cart_checkout_to_shop' );

function tutoraspire_redirect_empty_cart_checkout_to_shop() {
return wc_get_page_permalink( 'shop' );
}