Alter Checkout Page Format

I’d like to change the format of the checkout page. I’m sure it all comes down to Action Hooks.

On the checkout page, at the top of the left column are the billing details. Underneath the billing details is where event registration details are (when applicable.)

At the top of the right column is the verify order. Underneath that is the credit card information and the “place order” button.

I’d like to move the billing details on top of the verify order. That’s easy enough to move the DIVs to display the information in the order I want.

But the action hooks don’t work in that order. If I now fill in the registration information FIRST, the information is erased when I fill out the billing details.

Here is the current form-checkout.php code:

<?php if ( $checkout->get_checkout_fields() ) : ?>
<div>
<?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’ ); ?>
</div>
<?php endif; ?>

<div>
<h3 id=”order_review_heading”><?php esc_html_e( ‘Your order’, ‘mesmerize’ ); ?></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>

Any suggestions?

Thank you