Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / Show WooCommerce Cart and Checkout on the Same page Free No Plugin
Duplicate Snippet

Embed Snippet on Your Site

Show WooCommerce Cart and Checkout on the Same page Free No Plugin

This post outlines the code implementation for creating a streamlined checkout experience by merging the cart and checkout functionalities within a single webpage. This approach offers several potential benefits, including:

Reduced Checkout Steps: By eliminating the need to switch between separate cart and checkout pages, you can simplify the purchase journey for your customers. This streamlined process can lead to increased conversion rates, as users are less likely to abandon their carts during checkout.

Enhanced User Experience: A combined cart and checkout page provides a more intuitive shopping experience. Users can easily review their cart items and make adjustments before proceeding to checkout. This transparency and control can foster trust and encourage customers to complete their purchases.

Improved Mobile Optimization: In today’s mobile-first world, ensuring a seamless checkout experience on various devices is crucial. Combining the cart and checkout simplifies the process for mobile users, potentially leading to higher conversion rates on smartphones and tablets.

Zakaria Kalatozishvili
<10
Code Preview
Comments
php
<?php
// 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
}
// 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/' );
        die();
    }
} );
//3. 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' ) ) ); 
        exit;
    }
}
 //4. Show “Return to shop” button in empty checkout page
add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );
// Custom CSS
function add_custom_checkout_styles() {
    ?>
    <style>
	/* 1. Style the "Return to Shop" button */
.woocommerce-info a.button.wc-backward {
    text-decoration: none;
    background-color: #your_color; /* Replace with your preferred color code */
    color: #fff; /* Replace with your preferred text color */
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
}
/* 2. Adjust the cart table styles on the checkout page */
.woocommerce-checkout table.shop_table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
/* 3. Customize the checkout page container */
.woocommerce-checkout .col2-set {
    display: flex;
    justify-content: space-between;
}
/* 4. Style the cart items in the cart table */
.woocommerce-cart .product-thumbnail img {
    max-width: 80px; /* Adjust the max-width as needed */
    height: auto;
}
/* 5. Customize the empty cart message */
.woocommerce-cart .cart-empty {
    text-align: center;
    margin-top: 20px;
}
/* 6. Style the checkout form fields */
.woocommerce-checkout form .form-row {
    margin-bottom: 15px;
}
/* 7. Customize the "Place Order" button */
.woocommerce-checkout #place_order {
    background-color: #your_color; /* Replace with your preferred color code */
    color: #fff; /* Replace with your preferred text color */
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
/* 8. Adjust the spacing between order review and additional information */
.woocommerce-checkout #order_review + div {
    margin-top: 20px;
}
</style>
    <?php
}
add_action( 'wp_head', 'add_custom_checkout_styles' );
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet