WooCommerce checkout layout

Question

I would like to change the layout of my WooCommerce checkout page, but I can't figure out how to do it since it seems to consist of multiple PHP pages.

What I'm trying to achieve is moving the summary part and shipping info to the top, and have the input fields for the shipping address shown afterwards.

Should I make these changes using CSS, or can I simply change the order of the hooks in the template?

Thanks!

Answer 1

In the "woocommerce/templates/checkout" folder there is a file called "form-checkout.php". Copy the contents of that file to "yourtheme/woocommerce/checkout/form-checkout.php" On line ~54 there is the following code:

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

Move that to just below

<form name="checkout" method="post" class="checkout" action="<?php echo esc_url( $get_checkout_url ); ?>">

and add:

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

to just below the

<?php endif; ?>

and save file the. That will bring the summary and shipping to above the input fields, but you will still have "Place Order" button at the top of the page. Copy the contents of the "review-order.php" to "yourtheme/woocommerce/checkout/review-order.php" and remove the following (from line ~169):

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

Removing the above will remove the "Place order" button at the top of the page.

You can edit the "form-check.php" file in "woocommerce/templates/checkout/form-checkout.php", but it is not recommended as when you update woocommerce you will lose those changes. Copying the file to "yourtheme/woocommerce/checkout/form-checkout.php" will override the file and you won't lose those changes if you update woocommerce.