How to merge Woocommerce cart and checkout page?

I had a customer who needed to show Woocommerce cart and checkout page on the same page. So, if you need a similar solution then in this post I’m going to show you how to merge Woocommerce cart and checkout page.

Before you take a look at the code snippets I’m using it would be wise to see the video here below. This way it’ll be a bit easier to understand what you should do.

Video: How to merge Woocommerce cart and checkout page?

And this is what you’ll going to accomplish.

How to merge Woocommerce cart and checkout page?

Step 1: Merge Woocommerce cart and checkout page

In this step we’re going to add a Woocommerce cart table above the checkout table Thus, grab this code here below and add it inside your child theme’s functions.php file or better yet, use Code Snippets plugin for it. There is nothing to configure, just paste it as it is.

// 1. Add Woocommerce cart page on the checkout page

add_action( 'woocommerce_before_checkout_form', 'add_cart_on_checkout', 5 );
function add_cart_on_checkout() {
 if ( is_wc_endpoint_url( 'order-received' ) ) return;
 echo do_shortcode('[woocommerce_cart]'); // Woocommerce cart page shortcode

Step 2: Redirect Woocommerce cart page to checkout page

This part is optional and use it if you don’t want the “View cart” buttons to direct your users to cart page. Also, use it if you don’t want your users to access Woocommerce cart page directly.

So, grab this code and add it to you functions.php file or Code Snippets code box. Pay attention that “cart” and “/checkout/” parts are your cart and checkout pages slugs. If you have any other slugs (karte or kassa for example) then change them accordingly.

// 2. Redirect cart page to checkout
add_action( 'template_redirect', function() {
// Replace "cart"  and "checkout" with cart and checkout page slug if needed
    if ( is_page( 'cart' ) ) {
        wp_redirect( '/checkout/' );
} );

Step 3: Redirect empty Woocommerce checkout page to shop page

Now, this part is needed only if you added a redirection from Woocommerce cart page to checkout page in the step 2. If you didn’t do it then you can skip this part.

BUT if you are redirecting your cart page then this part is crucial because otherwise you will end up with “Too many redirects” error on your checkout page after deleting the products from cart.

Take a look at the “shop” slug inside the code. Replace it with your own shop page slug.

// Redirect to home url from empty Woocommerce checkout page

add_action( 'template_redirect', 'redirect_empty_checkout' );
function redirect_empty_checkout() {
    if ( is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
   wp_safe_redirect( get_permalink( wc_get_page_id( 'shop' ) ) ); 

Alternative option: Show “Return to shop” button in empty checkout page

If you don’t want to redirect your customer to the shop page and want to show “Return to shop” button instead, then skip the previous snippet and use this one here instead.

add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );

Step 4: Automatically remove out of stock products from cart

This code checks each item in the cart and automatically removes it if it’s out of stock. It also displays an error notice to the user to let them know that one or more items have been removed. NB! This code works only if Woocommerce cart and checkout pages are merged. t woesn’t work for default Woocommerce setup. See next snippet for that.

// Automatically remove Woocommerce out of stock products from cart
add_action( 'woocommerce_check_cart_items', 'wpsh_remove_from_cart' );
function wpsh_remove_from_cart() {
    global $woocommerce;
    $refresh_count = 0;
    foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $cart_item ) {
        $_product = $cart_item['data'];
        if ( ! $_product->is_in_stock() ) {
            $woocommerce->cart->remove_cart_item( $cart_item_key );
            wc_add_notice( __( 'One or more items in your cart are out of stock and have been removed.', 'woocommerce' ), 'error' );
    if ( $refresh_count > 0 ) {
        wp_safe_redirect( wc_get_cart_url() );

If you would like to remove out of stock products for default Woocommerce setup, then use this snippet instead. NB! This doesn’t work for merged cart and checkout pages. See the previous snippet for that.

add_action( 'woocommerce_check_cart_items', 'wpsh_remove_out_of_stock_products_from_cart' );
function wpsh_remove_out_of_stock_products_from_cart() {
    global $woocommerce;
    foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $cart_item ) {
        $_product = $cart_item['data'];
        if ( ! $_product->is_in_stock() ) {
            $woocommerce->cart->remove_cart_item( $cart_item_key );
            wc_add_notice( __( 'One or more items in your cart are out of stock and have been removed.', 'woocommerce' ), 'error' );

Step 5: Customize Woocommerce checkout page

This part here is again optional. I will do that because I am using a Blocksy theme and it shows me the cart table in a 2/3 with. I would like to show it in a full with. So, all these CSS snippets go to the Customizer >> Additional CSS and applies only for Blocksy theme.

Blocksy theme


Kadence theme


This will make the cart form full width.

@media only screen and (min-width: 1000px) {
.ct-cart-form {
    grid-template-columns: 1fr;

Hide Woocommerce coupon toggle from checkout page

Both cart table and checkout table have their own coupon code box. Since I need only one of them I’ll hide checkout page coupon toggle (“Have a coupon? Click here to enter your code”)

    display: none;

This should work with every decent theme.

Customize Woocommerce checkout order review table

Now I’ll add a background to the Woocommerce order review table, add some spacing between this and cart table and make some other adjustments. All classes with ct- is for Blocksy theme only. Two last ones should work with every theme.

/* Blocksy theme order review table background and border */
.ct-order-review {
	background: #fbfbfb;
	border: 2px dashed #ebebeb;
.ct-cart-form {
	margin-bottom: 2em;
	border-bottom: 1px solid #ebebeb;

/* Payment methods background + radio and checkbox customization */
    background: #fff;
/* Payment methods background */
.woocommerce-shipping-totals input[type="radio"] {
  border: 1px solid #000;
	background: #fff;

To sum up: It is easy to add Woocommerce cart page to checkout page

As you saw it is fairly easy to merge Woocommerce cart page and checkout page. It will most likely take you 5-10 minutes to accomplish all that.

More useful Woocommerce tricks

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). Btw, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 102