How to Set Up WooCommerce Cart and Checkout on the Same Page

WooCommerce Cart and Checkout on the Same PageAre you looking for a way to put the cart and checkout on the same page? Then read on, as this post aims to provide you with all the information you need to achieve this. However, you need to have some technical skills to implement this solution.

If you are looking for a way to improve the shopping experience for your customers, you need to optimize the checkout process. One way of doing this is to reduce the number of steps customers need to complete an order by having the checkout and cart on the same page.

It is important to note that the more likely it is to have a cart abandonment if you have a multi-step checkout. This is why we made this guide to help you out.

WooCommerce Cart and Checkout on the Same Page

In today’s brief tutorial, we will share shortcodes, snippets, and workarounds to help you completely skip the cart page. In addition, you will have both the cart table and the checkout form on the same page.

It is worth mentioning that we need to modify some of WooCommerce’s core files to achieve the desired result. This is why we recommend creating or installing a child theme. It is very easy to create one, but you can download a plugin and install it on your WordPress installation if you do not know how to.

Let us look at how you can add the cart and checkout on the same page.

Steps to Add the Cart and Checkout on the Same Page

Here are the simple steps you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add the “woocommerce_cart” shortcode for adding the cart on the checkout page.
  3. Add the following code to the php file:
[php] 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]’);
}
[/php]
  1. This is the outcome:cart on checkout
  2. The shortcode change alone is probably enough for you, but we need to make a couple of tweaks if you want to do it right. We need to completely get rid of the Cart page because we have already added the cart on the checkout page. To do this, go to WooCommerce > Settings > Advanced:advanced
  3. Click on the little “x” and “Save Changes”.
  4. The next step is to delete the cart page from your WordPress pages.
  5. The last step is to redirect an empty checkout if you do not want to see it. Add the following code to the functions file:
[php] 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;
}
}
[/php]

Wrapping Up

By now, you should be able to add the cart on the checkout page. In addition, we have shared a bonus snippet to redirect an empty checkout. This will help to reduce the cart abandonment rates because the steps of completing an order have been reduced.

If you need additional functionality, you can reach out to us. We will make a tailor-made solution for you.

We hope that this post helped you learn more about editing the checkout process.

Similar Articles