Displaying a cart on the WooCommerce payment form page is a need for many e-commerce users. This feature, which provides great convenience in terms of user experience, is not one of the WooCommerce default features and requires special coding. It is possible to show the cart on the WooCommerce payment page with codes. For an example use, you can take a look at the image below.
Step 1: Add Custom Code to Your Theme
You need to add the code below to the functions.php file in your WordPress theme. If you are going to use FTP, you can follow the path wp-content> themes> YOUR THEME> functions.php. If you are going to do this on WordPress admin panel, you can follow the path View> Theme editor> functions.php.
add_action( 'woocommerce_before_checkout_form', 'wpcomtr_cart_on_checkout_page_only', 5 );
function wpcomtr_cart_on_checkout_page_only() {
if ( is_wc_endpoint_url( 'order-received' ) ) return;
echo do_shortcode('[woocommerce_cart]');
}If you have trouble applying both methods, you can use the Snippets plugin. I gave an example of how you can add code with the Snippets plugin below:
Step 2: Remove the Cart Page
If you have successfully added the code above to your theme, the cart and payment will be on the same page. But there is a point to be aware of here. You should remove the WooCommerce default cart page. Go to WooCommerce> Settings> Advanced tab and leave the cart page blank as in the image below.
After this, the default cart page will be set as the payment form. In addition, if you want to prevent your customers from reaching the cart page completely, you can redirect the cart page to the payment page with a 301 redirect.
The implementation is up to here, if you have any questions, please join me in the comments. Don’t forget to follow the WooCommerce category for tutorials like this one.
