Support » Plugin: WooCommerce » change checkout page flow

  • Resolved hahaone23


    Currently, the checkout page is put the billing and shipping info first, then order summary.

    But I need to move the order summary which including shipping option to the first, how to do this?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Senff


    Hi! Thanks for reaching out.

    I’m not entirely clear what you’re trying to do exactly. Do you want to move the grey bar (with all the details) to the left of the page, and the billing/shipping info to the right?

    If so, then the easiest/quickest way to do this, is to add some CSS code:

    @media screen and (min-width: 1025px) {
      .woocommerce-checkout #order_review {
        float: left;
      .woocommerce-checkout #customer_details {
        float: right;
        padding: 0 10px 0 90px;

    This will work on desktop screens. On mobile screens, it is not recommended to move the grey section on top of the address fields, since that block contains the “PLACE ORDER” button, which you (probably) don’t want to show on top of the address fields.

    Let me know if this helps or if I misunderstood your question!

    • This reply was modified 1 month ago by Senff.
    • This reply was modified 1 month ago by Senff.
    Plugin Support Kenin


    Automattic Happiness Engineer

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.