WooCommerce: Cart and Checkout on the Same Page

This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page.

But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than one product per order), if you want to save an additional step (two steps convert better than three: “Add to Cart” > “Cart Page” > “Checkout Page” – and this is not rocket science), if your custom workflow and ecommerce objectives require you to manage Cart and Checkout all together, well, this tutorial is for you.

There is a mix of shortcodes, settings and PHP snippets you can use to make this work out of the box. And trust me, this is easier than you think.

While many developers decide to turn the checkout process into a “Multi-Step Checkout” (ehm, not sure why – the more steps the more likely it is to have a cart abandonment), in here we’ll see the exact opposite.

So, how do they do it?

Here’s the complete, easy, step by step guide to put Cart & Checkout on the same page. Give it a go, do some WooCommerce testing and tracking, and see if it converts better πŸ™‚

Step 1: Add Cart Shortcode @ Checkout Page

First, you need to add the “woocommerce_cart” shortcode to the Checkout page. In this way we’re telling WooCommerce we want to have the cart table on top and the checkout form below it.

In the first version of this tutorial I suggested to add the [woocommerce_cart] shortcode above the “woocommerce_checkout” shortcode in the Checkout page. Unfortunately this creates a bug on the “Thank you page” once an order is placed. In fact, an “empty cart” message is displayed. So we need to find a way to load the [woocommerce_cart] shortcode on the Checkout page BUT not on the Thank you page. Here’s the fix, and yes, it’s a neat PHP snippet.

PHP Snippet: Display Cart Table Above Checkout Form @ WooCommerce Checkout Page

/**
 * @snippet       Show Cart @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_before_checkout_form', 'bbloomer_cart_on_checkout_page', 11 );

function bbloomer_cart_on_checkout_page() {
	echo do_shortcode( '[woocommerce_cart]' );
}

With this tiny change, your new Checkout page will look like in the following screenshot. Please note – if you’re familiar with the Cart page layout, you might remember the “Cart Collaterals” section (i.e. “Cart Totals“, where subtotal, shipping and totals are displayed)… well, this is automatically hidden just because you’re using the two shortcodes on the same page. Isn’t this wonderful?

Cart & Checkout on Same Page: Checkout Page Preview

Step 2: Unset Cart Page @ WooCommerce Settings

Probably, the shortcode change alone is sufficient to get what you need (Cart and Checkout on the same page). However, a couple of tweaks are needed in case you really want to do it right.

In fact, if the Checkout is emptied (I mean, the Cart is emptied on the Checkout page), WooCommerce will redirect users to the Cart page and display the empty cart message (“Return to Shop”) and the “Checkout is not available whilst your cart is empty.” message as well.

Now, our goal is to completely get rid of the Cart page so that users will never see it.

For this reason you need to unset the Cart page (under WooCommerce > Settings > Advanced) – simply click on the little “x” and “Save Changes”. Here’s the updated screenshot since WooCommerce 3.7:

Unsetting the Cart page from the WooCommerce settings (as of WooCommerce 3.7)

Step 3: Delete Cart Page @ WordPress Pages

No need of a screenshot here.

Now that the Cart page is not useful any longer, it’s time to delete it from your WordPress pages. Redirects are already in place and your cart table is already on the Checkout page, so there is no need to worry.

Go ahead and put the Cart page into the trash and delete it permanently!

Step 4 (Bonus): Redirect Cart To Checkout If Not Empty, Or Elsewhere If Empty

If the cart is filled with items, you want people to go to the Checkout page. The first part of the below snippet helps you with that.

Then there is a little workaround in case you don’t want to redirect an empty Cart+Checkout to the homepage when the cart is empty, which is the default behavior.

For example, you might want to redirect empty carts to the Shop page, so that customers can start shopping again.

This also changes the behavior of the “View Cart” buttons if you have any within your WordPress theme.

PHP Snippet: Redirect Empty Cart To WooCommerce Shop Page

/**
 * @snippet       Redirect Empty Cart To Either Checkout or Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

add_filter( 'woocommerce_get_cart_url', 'bbloomer_redirect_empty_cart_checkout_to_shop' );

function bbloomer_redirect_empty_cart_checkout_to_shop() {
	return ( isset( WC()->cart ) && ! WC()->cart->is_empty() ) ? wc_get_checkout_url() : wc_get_page_permalink( 'shop' );
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
  • WooCommerce: Disable Payment Method If Product Category @ Cart
    Today we take a look at the WooCommerce Checkout and specifically at how to disable a payment gateway (e.g. PayPal) if a specific product category is in the Cart. There are two tasks to code in this case: (1) based on all the products in the Cart, calculate the list of product categories in the […]
  • WooCommerce: Add Privacy Policy Checkbox @ Checkout
    Here’s a snippet regarding the checkout page. If you’ve been affected by GDPR, you will know you now need users to give you Privacy Policy consent. Or, you might need customer to acknowledge special shipping requirements for example. So, how do we display an additional tick box on the Checkout page (together with the existing […]
  • WooCommerce: Redirect to Custom Thank you Page
    How can you redirect customers to a beautifully looking, custom, thank you page? Thankfully you can add some PHP code to your functions.php or install a simple plugin and define a redirect to a custom WordPress page (as opposed to the default order-received endpoint). This is a great way for you to add specific up-sells, […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

177 thoughts on “WooCommerce: Cart and Checkout on the Same Page

  1. It seems when you set the one-page checkout, cross-sells no longer works on the cart details?

    1. That’s possible, yes, same as Cart totals

  2. HI there, I tried this code but on checkout page update cart button is not working correctly and redirects to homepage instead of updating quantity. Same issue is now with ajax add to cart from archive page, it directs me to the homepage instead of going to checkout page which has the cart now.

    1. Anyone else experiencing this?

        1. Does that happen all the time, or only in certain conditions?

  3. This worked for me in the end.

    /* Add to cart redirect */
    add_filter('add_to_cart_redirect', 'lw_add_to_cart_redirect');
    function lw_add_to_cart_redirect() {
     global $woocommerce;
     $lw_redirect_checkout = $woocommerce->cart->get_checkout_url();
     return $lw_redirect_checkout;
    }
    

    Thanks.

  4. when you empty the cart you get a redirection loop

    1. Hi John, did you apply “Step 4”?

  5. Hi Rodolfo, thanks a million for this fantastic snippet and explanation. I started this on my dev site some time ago and now trying to finish I noticed that the woocommerce error messages are showing up after the cart and before the “official checkout page stuff”. How can I resolve this? I tried all the remove_action() and add_action() hooks I could think of but I cannot unset these messages and make them appear on the top of the page (before cart).

    Did I miss something?

    1. Hey Judith! Try changing the “woocommerce_before_checkout_form” hook priority from 5 to 11, that should do the trick

  6. You can also keep both pages and add the cart page to the checkout page. You can check out on 1 page (=cart page), and if you payed, you will be redirected to the checkout page with success message. Since it exists on it’s own (without cart page in it), it just displays the succeeded checkout.

      1. Hi @Valerie can you provide some link to this idea?

  7. I use the snippet for a lcient’s site. Works fine but when I add & validate a coupon code, it’s redirecting to homepage instead of to checkout page. Seems missing a redirection?

    1. Weird. Can you please try with a different theme and WooCommerce plugin active only?

      1. I have the same problem.

        1. I’m having the same problem – anyone know a solution?

          1. Hi all – experienced the same issue here. The coupon field that is part of the cart template was redirecting to homepage when a coupon was submitted. Turns out there are two coupon inputs – the one just mentioned and one in the /templates/checkout/form-coupon.php.

            Try using the latter – works for me!

            1. Hi I am having the same issue with astra pro theme. Does anyone know the solution to this??

              1. I’m also a similar problem, when I try to activate a coupon, it doesn’t update the total value of the cart and redirects to the home page, any solution?

                1. You can fix it with this:

                  function change_cart_url_to_checkout() {
                     return wc_get_checkout_url();
                  }
                  add_filter('woocommerce_get_cart_url', 'change_cart_url_to_checkout', 10, 1 );
  8. One small thing – if you delete Cart page from Pages, and will not set Cart Page in WooCommerce settings, an icon for cart in handheld menu on mobile devices will not be shown.

    Solution: leave cart page alone and set it as should be, and redirect everything from cart to checkout using this:

    function change_cart_url_to_checkout() {
       return wc_get_checkout_url();
    }
    add_filter('woocommerce_get_cart_url', 'change_cart_url_to_checkout', 10, 1 );
    
    
    1. Cool

  9. hi, how to place the cart in replacement of the “Your Orders” part in checkout? thank you

    1. Hi, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  10. used this to combine both cart & checkout pages,

    // COMBINE THE CART AND CHECKOUT PAGES
    add_action( 'woocommerce_before_checkout_form', function () {
      if ( is_wc_endpoint_url( 'order-received' ) ) return;
          echo do_shortcode('[woocommerce_cart]');
    }, 5 );
    

    it worked fine. Now need to display the cart total under cart details like this @ https://i.ibb.co/PFSxqT0/display-cart-total-after-merging-cart-and-checkout-page.png

    1. Ok

  11. Thanks for the great tutorial. Do you have one available showing how you putting the billing address info & shipping address info all in the first column, and the order totals and payment method all in the second column?

    1. Cool. No, sorry, but you can achieve that with simple CSS

  12. Rodolfo, thanks for the snippet!
    I wanted to redirect to the shop page in step 4 and replaced the redirect snippet with the one Yiannis suggested here:
    https://www.businessbloomer.com/woocommerce-cart-checkout-same-page/#comment-355899

    And now it’s perfect, thanks!

    Many thanks,
    Mieke

    1. Cool

  13. Hi Rodolfo Melogli,
    Huge thanks for your code.
    But in my site, it only show the product table, could I show the sub total and total behind this table? when I increase the product quatity, total does not update automatically.

    1. Hey Martino, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  14. Great snippet, thanks!

    The problem I am facing is that, once the user goes to the cart/checkout page, there is one or more messages at the top. Each one is generated by the product added to cart, and each one has “See the cart” message. This button is leading to the Homepage, since the Cart page is unset.

    My workaround for now is this:

    .woocommerce-message .wc-forward {
    display: none;
    }

    Thanks!

    1. Cool

  15. Works well except when product added to cart, the WooCommerce message provides link to /index instead of /checkout!

    Would making the Cart page the same as Checkout fix this?

    1. Fixed by using redirects manually, creating a blank “Checkouts” page and setting WooCommerce Cart page to it, then using redirect plugin to direct that page to checkout, showing Cart and Billing checkout.

      1. Ok

        1. I am also experiencing the Checkout button goes to Home Page. I am not a fan of the redirect method above. Is there a reason the Checkout Button directs to home/index.php page though?

          1. For sure this can be customized – in Storefront theme for example there is no problem like this

  16. Followed the steps but just got redirected to the home page when adding anything to the cart.

    1. Weird, must be something else. Try with only WooCommerce active, my snippet, and a different theme

  17. I tried this tutorial but when I tried to pay for what I order it will redirect me to a broken thank you page but order payment is a success. I want to fix the broken thank you page.

    1. woocommerce thank you page is working after I request confirmation for the appointment I book but the issue is if the admin approves the appointment client will pay the appointment after the payment I got a broken thank you page

      1. Hi Jorsen, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom troubleshooting work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  18. Everything is much easier …. on the Checkout page we write
    [woocommerce_cart]
    [woocommerce_checkout]

    function.php

    add_filter('woocommerce_get_cart_url', 'atlier_cart_checkout_override'); 
    function atlier_cart_checkout_override () {
    	if( 0 < WC()->cart->get_cart_contents_count() ){
    		return wc_get_page_permalink( 'checkout' );
    	} else {
           return wc_get_page_permalink( 'cart' );
        }
    }
     

    and css
    .woocommerce-order-received .cartCheckout { display:none !important;}

    everything works and ajax update too ..

    1. Now, load the Thank You page, and you’ll see why this method won’t work πŸ™‚

  19. Hey Rodolfo, I tried your steps with the Salient theme and it didn’t work – as you said, maybe it’s a theme conflict.

    I did come across another snippet from WooSnip (https://woosnip.com/snips/skip-the-cart-page-and-combine-the-cart-and-checkout-pages/) and this worked for the Salient theme:

    // COMBINE THE CART AND CHECKOUT PAGES
    add_action( 'woocommerce_before_checkout_form', function () {
      if ( is_wc_endpoint_url( 'order-received' ) ) return;
          echo do_shortcode('[woocommerce_cart]');
    }, 5 );
    
    
    // SKIP THE CART PAGE WHEN ADDING TO CART
    add_filter('woocommerce_add_to_cart_redirect', function () {
      global $woocommerce;
      $checkout_url = wc_get_checkout_url();
      return $checkout_url;
    });
    1. Hey Danny, that snippet is simply adding the Cart on top of the Checkout page. Cart still exists.

      1. As far as I can tell, Cart still exists in your version too. After following your instructions above, I had to put the Cart page back and set up a 301 redirect from it as your instructions left cart links redirecting to the homepage instead.

        Removing cart page selection from WooCommerce settings aside, the WooSnip code seems to work just the same. What is (or is supposed to be) different? (I may be having a compatibility issue with theme but it’s hard to tell).

        1. Well not 100% sure. If that works for you that’s ok

          1. I had the same issue using storefront as Ted. After following all the steps, I found that the cart did indeed display at the checkout page but clicking on the cart link in the store only reloaded the shop page. I tried a redirect but that timed out. So I just undid everything to put it back to normal.
            The reason I came across this thread is because I’m getting reports from only a small number of people that when they go to checkout after adding items to cart, the cart displays as empty, even though the icon shows a number. It seems exclusive to androids from the reports but I cannot duplicate the problem.
            I would accept a custom work offer to help with this as I’ve tried all the recommendations I found searching elsewhere including resaving permalinks, clearing cache and sessions, checking for errors on woocommerce status…

  20. Great solution to avoid a plugin for this functionality.

    Everything work fine execept when, on the checkout page, i empty de cart. The browser go on white screen for too many redirection.

    1. Ciao Maurizio, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

      Hope this helps!

      R

      1. Hello
        I have the same problem. I disabled all the plugins except WooCommerce, I changed to default twenty something theme, and cleared all snippets in functions.php except the ones regarding this post (one page checkout). The problem still continues. “this page isn’t working, ERR_TOO_MANY_REDIRECTS”
        Please help

        1. Yiannis, thanks your code. It works for me too!

      2. I ve just found the solution for the too many redirects error:

        add_action('template_redirect', 'redirection_function');
        
        function redirection_function(){
            global $woocommerce;
        
            if( is_checkout() && 0 == sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count) && !isset($_GET['key']) ) {
                wp_redirect( get_permalink( wc_get_page_id( 'shop' ) ) ); 
        		 // ( home_url() ); 
                exit;
            }
        }
        
        1. Nice!

  21. Rodolfo you are the man! I’ve come across several of your tutorials that have been very helpful. Thank you for contributing so much to the community.

    1. Thank you!

  22. Hey,

    I tried this, seems to be working, however, when I try to update a product quantity in cart and hit ‘update’ button, it doesnt work. is that normal?

    1. Nevermind, Didn’t know what happened but it is working now

      1. Great!

  23. Thank you, this is great! The only issue that I’ve encountered is that there is no “update cart” button. I’ve followed your instructions and the cart items show up on the checkout page, but in order to update the totals if you change the number is to press the “enter” button which is not intuitive. Is there a way to get this to show up?

    1. Emma, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

      Hope this helps!

      R

  24. Just a little heads up; The ‘?p=19055’ page ID from the comment block returns a 404 error.
    Other than that, thanks for the clear instructions and code.

    1. Thanks for that Ronald, you were right. I’ve updated the links now. Cheers!

  25. Hi! Thanks for this, everything seems to be working perfectly so far. I have a question, shouldn’t there be an “existing customer login” section somewhere still? I noticed even with the Woo setting “Allow customers to log into an existing account during checkout” enabled I see nowhere to login to an existing account. Do we need to add that back in somehow? Thanks for any help you can give!

    1. If you allow that from the settings I don’t see why it should not show there Leslie… have you tried with a different theme maybe?

  26. Hi,
    Thanks for the code. I have my payout page on a custom page using your code. When the cart is empty or when I empty he cart, I cannot access this page. I’m always sent back to the home page (302 redirection), even when I don’t use your second snippet. Do you have an idea how to get around this.
    Thanks a lot.

    1. Hi Rich, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  27. Hi Rodolfo/ Ithink i found some weak point in this brilliant solution.
    Look
    1) registred & logged in buyer put smth in the cart and left the site
    2) registred & logged in byer return, he has the same products in the cart
    3) but if the products currently out of stock, he can`t put anything else in the cart
    4) he can`t remove items, the are not shown in the cart cos they are currently out of stock
    5) he can`t proceed to checkout
    6) registred & logged in byer has error message that he trying to buy outof stock items
    7) woo asks him to get back to CART page and remove the items form cart
    8) there is no CART page registred & logged in byer can`t do anything
    9) registred & logged in byer just leaving the site

    1. Thanks for reporting that Alex, I’m sure this edge case can be fixed in some way

  28. Hi Rodolfo,

    This is great! However the problem I have is that all the ‘view cart’ messages which are displayed after adding items to the cart (either on category or product page) just link to the homepage, because the cart page is no longer set. Is there a way to change them to go to the checkout page (which now also incorporates the cart)?

    Thanks

    1. Hi Lyall! Yes, you should look into the wc_get_page_permalink() function. It comes with a filter and therefore you can change the ‘cart’ permalink to something else. Hope this helps

      1. Thanks, I think maybe this should be added to your article? As all sites will have the same problem if the cart page is left blank in the settings as suggested…

        The closest example I’ve found regarding the function you mention is here, would this work? https://stackoverflow.com/questions/38072237/set-cart-permalink-when-cart-is-not-empty

        1. Thanks!

          1. Is there any update on how to do this? Is it possible to change the cart link throughout the site to refer to the checkout page instead? Otherwise the solution in the article doesn’t work (I tried on several of our sites).

            Thanks

            1. Hi Rodolfo,

              Now that version 3.8 has been released with the following changes:

              Tweak – Use wc_get_checkout_url() to get checkout URL. #24544

              Dev – Use wc_get_cart_url instead of wc_get_page_permalink( ‘cart’ ) because former has a filter woocommerce_get_cart_url to allow customization. #24530

              Is it possible to set the cart URL (the one displayed on the product page or category page after adding to cart etc.) to point to the checkout instead of always going back to homepage because the page is not set in WooCommerce settings?

              1. I’m sure it is – you need to find the piece of code that generates the notification, and then see if it offers a filter you can hook into to change the URL. I’m sure this is possible

                1. Hi Rodolfo,

                  Rather than update the links individually, is there a way to globally set the cart URL as the checkout URL, so whenever it’s referenced throughout the site it goes to the checkout?

                  1. Lyall, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

                    1. Will this work? Seem to be working for me.

                      function change_cart_url_to_checkout() {
                      	return wc_get_checkout_url();
                      }
                      add_filter('woocommerce_get_cart_url', 'change_cart_url_to_checkout', 10, 1 );
                      
  29. Hi,

    I followed your steps and it worked. I just have one challenge. The Cart section is duplicated on my page.

    Can you help with a workaround?

    1. Maybe you forgot to remove the cart shortcode from the page itself?

    2. I have the same issue. After deleting the snippet ” HP Snippet: Display cart table above checkout form @ WooCommerce Checkout page” it works fine, but I’m stuck with the empty cart message. Did you find a workaround in the meantime?

  30. WordPress 5.2.2
    In your screenshot, the Totals pane sits to the right of the form, but on mine it sits at the bottom leaving a huge space through the right half of the page. I tried floating it to the right but it won’t move up there automatically. I can raise it using Top: but then I’ll need to manually set it for responsiveness. How come your sits good but mine doesn’t?

    .woocommerce-checkout-review-order{
    width: 50%;
    position: relative;
    float: right;
    top: 0px;
    }

    1. Woocommerse 3.7.0

      1. It’s my theme, Storefront

  31. Hello,
    In Woocoommerce 3.7 not working πŸ™

    1. I’ve updated the tutorial, let me know if it works now!

      1. Not working. redirecting to home page .

      2. Hello,
        Well it works πŸ™‚

        But now ajax – quanity buttons not working they redirect to homepage.

        https://businessbloomer.com/woocommerce-automatically-update-cart-quantity-change/

        cupon in cart section redirects too homepage.

        so this:

        remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

        needs to be removed

        and we need to remove cupon in cart section of the checkout page. But how?

  32. Hi,
    Thanks – worked perfectly!
    In woocommerce 3.7:
    “Why is it incorrect to set the Cart, Checkout and My Account pages to the same page? ↑ Back to top
    It results in incorrect redirects and broken payment gateway functionality. WooCommerce 3.7 prevents this from happening”

    https://docs.woocommerce.com/document/woocommerce-pages/#section-5

    I didn’t update woocommerce yet because of that. What does this mean for your solution?

    Regards,
    Ami

    1. Not sure Ami, haven’t moved to 3.7 yet

    2. Hi,
      be carefull because last woocommerce have this surprise:

      Enhancement – Prevent the Cart, Checkout and My Account pages from being set to the same pages. #23479

      We have tested this in our dev environment, and we have not set a cart page in settings (because now this doesnt allow). As a result the “update cart” button now redirects to the index page, but the x (remove product) works well.

      I guess Woocommerce is not interest in evolving and have cart and checkout on the same page.

      Any solution to this now ?

      Thanks

      1. Hi there, the “update cart” redirects to the homepage only if you’re emptying the Cart (as of WooCommerce 3.7) – otherwise it works on my end. Let me know!

        1. Not work. redirect to home page .

        2. Hi,
          thanks for the update, but the “update cart” still redirects to home.
          Try to change some product quantity and press the button, and you will see.

          I guess itΒ΄s because the cart page in setup is empty.

          Thanks !

          1. Hi,
            he have added this fix to functions.php and now it seems to work, when we press the update button in 3.7.

            /* overrides cart url  to checkout url, since it has no cart page set, and to make the update button work */
            add_filter('woocommerce_get_cart_url', 'atlier_cart_checkout_override');
            
            function atlier_cart_checkout_override () {
                return wc_get_page_permalink( 'checkout' );
            }
            

            Care to check if itΒ΄s ok, and working now ?

            Thanks

  33. Thank you! This is exactly what I was looking for and it looks super easy. Thought I would have to spend a day fixing this. πŸ™‚

    1. Excellent

  34. Hi!

    I like this solution, with one exception here:

    “the β€œCart Collaterals” section (i.e. β€œCart Totalsβ€œ, where subtotal, shipping and totals are displayed)… well, this is automatically hidden just because you’re using the two shortcodes on the same page. Isn’t this wonderful?”

    Well, I want to display “cart totals” anyway under the cart table. Why? Well, I want to show the customer what he is going to pay, with delivery fee and coupons applied.

    How can I do this?

    1. Hey Dariusz, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  35. Hi Rodolfo – is there a way to make this combined cart/checkout page work with WooCommerce product dependencies (https://wordpress.org/plugins/woocommerce-product-dependencies)?

    Right now if a customer adds a dependent product and proceeds to the combined cart/checkout, an error is displayed due to the product dependency not being met (“There are some issues with the items in your cart. Please go back to the cart page and resolve these issues before checking out.”). There is then a link to “Return to Cart”, which obviously redirects to the combined cart/checkout with the same error message (ie. it loops).

    Is there a way to force the validation to occur on the combined cart/checkout page, so the dependency notice error appears on top of the cart on the combined cart/checkout page, as with coupon code additions and other notices?

    1. Hi Robyn, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  36. HI,

    I was on a similar not I was wondering how to make a single page checkout: product page and checkout page all on one page. So that would work for donations.

    Thank you.

    1. Hello there, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  37. Hey. Great post and all makes sense.

    apart from I can’t work how to edit/personalise the code snippet you’ve shared

    add_action( ‘woocommerce_before_checkout_form’, ‘bbloomer_cart_on_checkout_page_only’, 5 );

    function bbloomer_cart_on_checkout_page_only() {

    if ( is_wc_endpoint_url( ‘order-received’ ) ) return;

    echo do_shortcode(‘[woocommerce_cart]‘);

    }

    In this you’ve used the bloomer credentials but how do I find the exact path/description to use for my own domain/website?

    1. Hi Ryan, that’s only how I name PHP functions, you can leave them as-is or you can use whatever name you like πŸ™‚

  38. Hey Rodolfo – thanks for the snippet! Super helpful πŸ™‚ Just wondering if you have any ideas why the snippet, which inserts the cart using the WooCommerce shortcode, inserts a non-responsive version of the cart? Any way to ensure that when adding the cart above the checkout it inserts a responsive cart?

    1. Hi Robyn, I guess you need to add some custom CSS to fix that πŸ™‚

  39. Hi Rudolpho,
    thank you so much for this snippet. I have an add occurance though. When I refresh the page (after doing all of your steps) the fields for “Different shipping address” show up filled with the billing address details. Any ideas?

    1. Classic Autocorrect, please forgive me the wrong spelling of your name, Rodolfo!

      1. No problem Tobi πŸ™‚ I just retested this on the latest version of WooCommerce and it still works. Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  40. Hello…my cart is displayed incorrectly, it is too big and does not look like the original cart page is not responsive on the phone. What is the cause ?

    1. Not sure Martin, maybe you need to adjust some CSS?

  41. I`ve recovered one bug within ur method. When it happends that customer has more items in cart than u got in stock, system asks to return to the cart page and reduce the amount of items, but thre is no cart page anymore, so it loops. And there is noway to solve this in fronend.

    1. Hey Aleks, thanks for your comment. I understand this but it’s a very specific issue so I can’t fix this for now. If you find a solution let me know πŸ™‚

  42. hello again,

    I have just one problem with your great code. You are saying:
    “you might remember the β€œCart Collaterals” section (i.e. β€œCart Totalsβ€œ, where subtotal, shipping and totals are displayed)… well, this is automatically hidden just because you’re using the two shortcodes on the same page. Isn’t this wonderful?”

    But the problem is that when using “WooCommerce PayPal Checkout Payment Gateway” By WooCommerce, the yellow Paypal Express button is usually displayed on this part of the /cart/ page that we do not see anymore.
    So now your new /checkout/ page has no yellow Paypal express button.

    Do you know how we can do to add β€œCart Collaterals” again or just the Paypal yellow button on top of your new checkout page?

    Thanks again for all !

    1. Hi there, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

    2. I am looking exactly for this too, how did you solve it at the end? I also need to display the Paypal express button under the cart.

  43. Hello! that’s great and works well for me. The only thing is that I get at the top of the cart section – The box for the coupon code, and then just before the billing – as part of the check out section, I get another opportunity to add the coupon code…
    “Have a coupon? Click here to enter your code”

    Can I removed the “Have a coupon? Click here to enter your code” section and only have the box for the coupon at the top?

    If yes, how?

    Thanks!!!

    Laura

    1. Hello Laura thanks for your comment! Yes, check this: https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

  44. yesssss! Finally I’ve found a tutorial explaining this. Many many thanks Rodolfo!!!

    1. Brilliant πŸ™‚

  45. I have a problem. If I am in the cart and update the quantity of a product, but the maximum availability has been reached, it shows the woocommerce-error message twice. How can I solve this?

    1. Fabian, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Ok, I understand (maybe just a hint? ;). Anyways, thanks for your awesome site. First time WooCommerce user here and your site is giving a lot of useful informations. Thanks for your work.

      1. Thank you so much Fabian! I would do a file search through the WooCommerce plugin files to see how the message is generated – after that, I would find a way to edit or disable the notification via a PHP snippet. This is all I can say – good luck πŸ™‚

  46. FYI
    The script for auto-updating the cart does not work when using a combined cart and checkout even if you change it to include cart && checkout. Might be worth updating that as well since this has been updated?

    1. Thanks for that Peter, I’ll see what I can do

  47. Thanks Rudolfo, I have heard a lot about putting the checkout on the same page as product listings, but not about adding the cart as well. This is a good solution for people wanting to be able to edit product quantities and remove products from the cart on the one-page checkout.

    A lot of people will want to use this method with a list of products above so that customers can implement true one-page ordering, in which they choose products and complete their order from a single page. You can use this method with the WooCommerce Product Table plugin to list the products above the cart and checkout. Would you like me to send you an extra paragraph about this to include in your article, as I think it will be of interest to a lot of you readers?

    1. Thanks for your input, Katie, much appreciated πŸ™‚

  48. Hi Rodolfo, thanks for this awesome trick !
    One thing I regret is that when going to an empty cart we don’t have the nice “Return to shop” button.
    You used the condition : if ( is_wc_endpoint_url( ‘order-received’ ) ) return;
    is their another one that could be added to be used in case of empty cart ?

    Best.

    1. Thanks Thibault! The second part of the snippet redirects to a given page, so you could redirect to the shop πŸ™‚

  49. Rodolfo! You surprise us with a gem in every newsletter. I’m doing this on a live site–it’s exciting! πŸ™‚

    One cosmetic problem I have: upon clicking Checkout, Checkout page loads with Cart at the top but the billing address fields are visible. So the customer has to scroll up to see the coupon message and the cart above it. The links point to /checkout/ but the page is not loaded to be at the top. Can my theme (Divi) mess with the load position?

    1. Thanks Peter! Simply switch theme temporarily and try that again – then let me know πŸ™‚

  50. Hi and thank you for the code!
    There is one thing that I don’t understand. When I entered your main code there is a code

    [enter_here_woocommerce_cart_shortcode_here]

    still showing up in checkout page. How can I make it dissapears. I hope you understand my poor english.
    Best regards
    JanOve

    1. Hi there, thanks for your comment! Please substitute “enter_here_woocommerce_cart_shortcode_here” with “woocommerce_cart” πŸ™‚

  51. Hi Rodolfo,

    Congrats for your posts! best on the web for woocommerce ! learned a lot !

    There is a problem on my side when i send a pay for order email (sometimes customer has problem to pay and we have to send a payment link). It gets redirected to home page, instead of payment page. To fix, i added pay endpoint to exclude it from conditions to redirect to home page:

    
    function bbloomer_redirect_empty_cart_checkout_to_home() {
        if ( !is_wc_endpoint_url( 'order-pay' ) &amp;&amp; is_cart() &amp;&amp; is_checkout() &amp;&amp; 0 == WC()-&gt;cart-&gt;get_cart_contents_count() ) {
            wp_safe_redirect( home_url() );
            exit;
        }
    
    

    it works on my end, hope it’s correct for everybody.

    1. That’s awesome Julio πŸ™‚ Thank you!

  52. On a dev site, with this solution (all steps) in place, I’m still getting the cart page. And on the checkout page I’m getting two cart tables above the billing area. Looking deeper into this site’s plugins and other configs but thought I’d mention it doesn’t work out of the gate for every site.

    1. Hey Rob, thanks for your comment πŸ™‚ This works so there is something else conflicting with it. So, it’s possibly your theme. Try to swithΓΉch temporarily to 2017, apply the snippets, and it should work – in that case you’ll know there is something wrong in your theme or the coding needs to be adjusted for your custom coding

  53. One much waited snippet here. Thanks a lot ! πŸ™‚

    1. Excellent πŸ™‚

  54. Ooo just noticed something.. with the removal of the cart page, something occurs.

    A user buys something and goes to the “new” checkout – what if they want to add more? or if they want to add another item? or simply add to the existing product count – all that is no longer available.

    This is an interesting curve ball

    1. Hey Roberta, yes, make sure to add the Cart shortcode above the Checkout form. Please use the PHP way (tutorial now updated) and not the manual way, otherwise you will have an “empty” cart notice on the thank you page. Cheers πŸ™‚

  55. This is brilliant! I have a theme where the cart icon is in the menu – and this still works even with this change. I am hoping the streamlined process will improve conversions. Thank you.

    1. Awesome πŸ™‚

  56. Thank you Rodolfo!
    It works, but now there is no option to remove items added to checkout
    If someone added by mistake 3 items instead of 2, he cannot modify the order as he was able in the shopping cart.
    How can I overcome this problem?
    Ugo

    1. Ciao Ugo, thanks for your comment! As you can see from the screenshots, my checkout displays the little red “X” buttons to remove items and also the quantity selectors, as well as the “update cart” button. So, you probably have some other problem / conflict πŸ™‚

  57. Hi, great hack.

    Can we do something about this message on the checkout page after the order is made?

    https://prntscr.com/l7objo

    Thanks

    1. You’re absolutely correct Cristian – let me find a different solution. Be right back!

      1. Tutorial updated πŸ™‚

    2. Good question, and I didn’t see the answer. Could you clarify how this can be done?

  58. Great little tweak.
    We love your work.

    1. Thanks Bob πŸ˜€

  59. Rodolfo,

    Thanks for the explanation. I really like how this functions, however it breaks some custom code I have. I have a coupon code programmatically added to the cart on multiple quantities of certain products being added. My PHP leverages the following:

     WC()->cart->remove_coupons();
    WC()->cart->add_discount( $coupon1 );
    WC()->cart->calculate_totals(); 

    Putting the cart and checkout short codes on the same page breaks this function. I get the notice that the code has been added, but the discount is not reflected in the checkout totals. Any suggestion on how to modify my custom function to apply the coupon codes if the checkout and cart are on the same page?

    1. Hello grant, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

    2. I’d like to piggyback off this. For me it shows the discount in the checkout totals, but when code is applied it doesn’t show discounted price in the cart itself – while it did before. Rodolfo, is discount applied properly on your end in the cart section after coupon is added?

      1. Hey Miroslav πŸ™‚ Yes, despite the “Cart Totals” are gone, if I scroll down to the Checkout Order Review table I see the coupon row once I add a valid coupon, together with the discount applied. Hope this helps!

  60. Ohh I’m so trying this on my shop tomorrow! Thanks so much for sharing all your knowledge πŸ™‚

    1. Excellent πŸ™‚

  61. Crazy bug great tip Rodolfo πŸ˜‰

    Hugs from Spain

    1. Thanks a million Fernando! Same to you πŸ™‚

  62. That’s a good idea, but what happens to the shipping options (calculate shipping option on the cart page) – where do these get selected?
    Lyse

    1. Hey Lyse, thanks for your comment! Shipping options are inside the checkout form shipping total, so no need of a shipping calculator πŸ™‚

  63. This is really useful if you have multiple items.

    In another scenario, what if there was only one item for sale, could this all be added to the single page or template?

    That way you go to the product and simply add it and go through the purchasing process right there…

    I’ve seen single product themes use that methodology (then it woul be applied to the current theme in use)

    1. Hello Roberta, thanks so much for your comment! You could totally try to add the “woocommerce_checkout” shortcode inside the single product page and see what happens πŸ™‚

  64. “even better to the last viewed product” How do I do this ?

    1. Hey Alain, thanks so much for your comment! Yes, this is possible by using a WordPress function called “wp_get_referer()” – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  65. Hi Rudolfo

    That looks a REALLY useful idea. Thank you!

    If I wanted to redirect to another page other than the home page, how should I insert its URL in your snippet line:

    wp_safe_redirect( home_url() );

    Many thanks

    Garry

    1. Thank you Garry πŸ™‚

      You’d use something like:

      wp_safe_redirect( 'https://your-custom-url.com' );

      Let me know

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *