Unify your WooCommerce cart and checkout page in 4 easy steps. – Learn WordPress from a to z

How to merge WooCommerce cart with checkout page?

Some people desperately need to merge the checkout page and WooCommerce cart but don’t know how. If you are in a similar situation then here is the method for you. Here are four simple and quick steps, let’s find out!

Step 1: Merge cart page and checkout page.

First you need to add a WooCommerce cart above the checkout page. Take the code below and add it to the functions.php file in your child theme.

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
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>

Step 2: Redirect the cart page to the checkout page.

This paragraph is optional and use it if you don’t want the “View Cart” button to direct the user to the shopping cart page. Also, use this method if you don’t want your users to go directly to the WooCommerce cart.

Take the code below and add it to your functions.php file. Note that the “cart” or “/checkout/” sections are part of the cart or checkout page slug. If you have any other slug types (eg gio-hang or giohang for example) then change them accordingly.

add_action( 'template_redirect', function() {
// Replace "cart"  and "checkout" with cart and checkout page slug if needed
    if ( is_page( 'cart' ) ) {
        wp_redirect( '/checkout/' );
        die();
    }
} );
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

Step 3: Redirect the WooCommerce checkout page to the store page.

This section is only necessary if you added a redirect from the WooCommerce cart page to the checkout page in step 2. If you haven’t done that, you can skip this part.

If you have done step 2 then this part is very important and you need to pay attention. Otherwise you will get “Too many redirects” error on the checkout page after removing the product from the cart.

Take a look at the “shop” slug inside the code. Replace it with the appropriate slug according to your website, such as “crab-hang”.

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' ) ) ); 
        exit;
    }
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
</div>

Alternative option: Show a “Back to the store” button in a blank checkout page.

If you don’t want to redirect your customers to the store page, but instead want to display a “Back to Store” button. Let’s skip the previous code and use it here.

add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );
<div>
<span>1</span><span>2</span>
</div>

Step 4: Customize the WooCommerce checkout page.

Finally, add some custom CSS to make your look more complete.

And here’s what you can achieve:

Epilogue

As you have seen, it is quite easy to merge the WooCommerce cart page and the checkout page. It will most likely take you 5-10 minutes to complete all of that.

If you find it interesting, you can follow the  WordPress basics section  to know more new knowledge.

Follow fanpage to receive the latest posts:  Group