How to Change WooCommerce Checkout Layout

by

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.

You may Also Like:

Leave a Comment