How to Put WooCommerce Cart and Checkout on One Page

Table of Contents

In this brief tutorial, I will share a solution on how you can put a WooCommerce cart and checkout on one page.

This would greatly optimize the checkout process, and it will save customers a lot of time, as they do not wait for another page to load.

This solution can be used if you want to save an additional step, especially on high-ticket products that are sold approximately one product per order.

WooCommerce Cart and Checkout on One Page

Customers who regularly shop online always need a fast checkout process. They may opt for another store if the loading speed is low or if they are redirected to other pages before making a payment. The main reason why many people use WooCommerce for their online store is that it allows you to modify it.

The default checkout process in WooCommerce has two separate pages for Cart and Checkout.

I want to illustrate how you can put a WooCommerce cart and checkout on one page to improve the user experience and increase your conversions.

This will be your ultimate guide, as there is a mix of shortcodes, settings, and PHP snippets, which you can use to make this work. This might seem a bit complicated, but if you keenly follow the steps that I am about to share, you will find it easier than you think.

The main reason for doing this is that a Multi-Step Checkout process is more likely to have cart abandonment issues, thereby improving sales in your WooCommerce store.

With all that said, here is an easy step-by-step guide to putting Cart and Checkout on the same page. Moreover, you can decide to do some WooCommerce testing and tracking, to see if the conversion rate is better.

Steps to Put WooCommerce Cart and Checkout on One Page

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will put Cart and Checkout on one page.
Add the following code at the end of the PHP file. This means that we have to add the “woocommerce_cart” shortcode to the Checkout page. Remember to save the changes:

/**

 *       Display Cart @ Checkout Page Only – WooCommerce

*/

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

function njengah_cart_on_checkout_page_only() {

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

echo do_shortcode('[woocommerce_cart]');

}

To see the outcome, simply refresh the checkout page and you should see this:

It is worth mentioning that if you are familiar with the Cart page layout, you might know of the Cart totals section. This piece of neat code that I have shared automatically hides the totals because of the two shortcodes on the same page. This is a nice feature.

The shortcode alone does the trick but if you do a bit of scrutiny, you will find that the cart page still appears as a stand-alone.
Additionally, the Cart is emptied on the Checkout page, and WooCommerce will redirect users to the Cart page and display the empty cart message. This means that a couple of tweaks need to be done to change this. You need to completely get rid of the Cart page so that users will never see it.

On your WordPress Dashboard, click on WooCommerce > Settings. On the settings page click on the Advanced Tab, and simply click on the little “x” and Save Changes as shown:

After that, you need to delete the Cart page. This is because it is no longer useful and redirects are already in place and your cart table is already on the Checkout page.
However, if you want to redirect an empty checkout page if users access it directly or when the cart table is emptied, here is a little snippet for you. This will help you to redirect the empty checkout page to the homepage.

From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will redirect the empty checkout page to the homepage.

Add the following code at the end of the PHP file.

/**

*        Redirect Empty Cart/Checkout - WooCommerce

*/




add_action( 'template_redirect', 'njengah_redirect_empty_cart_checkout_to_home' );

function njengah_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;

}

}

To see the outcome, remove all products in the cart and you will be redirected to the Home page as shown:

Conclusion

That is it! Now you have an optimized checkout process and you do not have to worry about cart abandonment issues in your WooCommerce store.

In the first snippet, I used added the “woocommerce_cart” shortcode to the Checkout page, to add the cart table on top and the checkout form below it. However, it is important to note that you need to completely get rid of the Cart page so that users will never see it.

Additionally, I have added a bonus PHP code snippet that will help you to redirect an empty checkout. I hope that this brief post provided a solution on how you can put a WooCommerce Cart and Checkout on one page.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Put WooCommerce Cart and Checkout on One Page

WooCommerce Cart and Checkout on One Page

Steps to Put WooCommerce Cart and Checkout on One Page

Conclusion

Similar Articles

Related