Move Order Summary Right

March 21, 2025 · AI Conversations

User

Assistant

To **move only the "Order Summary" to the right side**, and keep all **billing/shipping (customer details)** and **payment methods** on the left side (even though payment is part of the `woocommerce_checkout_order_review` hook), you can restructure the layout with some custom HTML/CSS *without removing the default WooCommerce hooks*. Here’s how you can do it.

### ✅ Updated `form-checkout.php` layout:

Replace the content inside the “ tag with this modified structure:

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data" aria-label="<?php echo esc_attr__( 'Checkout', 'woocommerce' ); ?>">

    <div class="custom-checkout-wrapper" style="display: flex; flex-wrap: wrap; gap: 2rem;">

        <div class="checkout-left" style="flex: 1 1 60%;">
            <?php if ( $checkout->get_checkout_fields() ) : ?>

                <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

                <div class="col2-set" id="customer_details">
                    <div class="col-1">
                        <?php do_action( 'woocommerce_checkout_billing' ); ?>
                    </div>

                    <div class="col-2">
                        <?php do_action( 'woocommerce_checkout_shipping' ); ?>
                    </div>
                </div>

                <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

            <?php endif; ?>

            <?php
            // Show payment methods here instead of in order summary box
            // but only if you want to extract it — otherwise it'll show on the right.
            do_action( 'woocommerce_checkout_before_order_review_heading' );
            ?>
        </div>

        <div class="checkout-right" style="flex: 1 1 35%;">
            <?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>

            <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>

            <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

            <div id="order_review" class="woocommerce-checkout-review-order">
                <?php do_action( 'woocommerce_checkout_order_review' ); ?>
            </div>

            <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
        </div>

    </div>

</form>

—

### 🧠 How it works:
– `display: flex;` on `.custom-checkout-wrapper` separates the left and right sections.
– `checkout-left` contains billing and shipping.
– `checkout-right` contains the "Your Order" summary (and payment methods inside `woocommerce_checkout_order_review`).

—

### ✅ Optional: Split payment methods if needed
If you want to **extract the payment methods from the summary** (which is tricky but doable), you'd need to:
1. Override `review-order.php`
2. Hook into `woocommerce_review_order_before_payment` and `woocommerce_review_order_after_payment` to wrap payment method section and move it.

Let me know if you'd like help doing that as well — but the above layout should be enough to move just the order summary box to the right.

Want me to help style it better or make it responsive too?

Move Order Summary Right

Leave a Comment Cancel