WooCommerce Layout

Question

I would like to change the layout of my WooCommerce validation page, but I cannot figure out how to do this because it consists of several PHP pages.

What I'm trying to achieve is moving the final part and the delivery information at the top and subsequent input fields for the delivery address.

Should I make these changes using CSS or can I just reorder the hooks in the template?

Thanks!

Answer 1

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

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

Move it a little lower

 <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 ) . '" />' ); ?> 

slightly lower

 <?php endif; ?> 

and save the file. This will lead to the fact that the amount and delivery will exceed the input field, but you will still have a button "Place an order" at the top of the page. Copy the contents of "review-order.php" to "yourtheme / woocommerce / checkout / review-order.php" and delete 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 this is not recommended, because when you update woocommerce you will lose these changes. Copying the file to "yourtheme / woocommerce / checkout / form-checkout.php" will cancel the file, and you will not lose these changes if you update woocommerce.