Reorder woocommerce checkout

May 10, 20230 Views

I’m looking to reorder the WooCommerce Checkout page. It’s almost like the post found here.

But I would like the payment section to remain at the bottom but I can seem to be able to separate the order info and the payment info.

The layout I would like to achieve is

    - CART REVIEW INFO
    - BILLING/SHIPPING INFO
    - PAYMENT INFO

Thanks for the help

Post Views: 0

1 comment

Anonymous says:

May 10, 2023 at 10:19 pm
You’ll need to edit the form-checkout.php file within:
public_html/yourfolder/wp-content/plugins/woocommerce/templates/checkout

Within this file you’ll see the html skeleton, with the php injectors/hooks within.

You’ll need to look for the div’s that contain the billing/shipping info and the cart review/payment info.

Once you’ve found these, you’ll need to move the hooks for the billing/shipping info into a newly created div/container between the cart review/payment info information.

billing/shipping info hooks:
```
<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
```
Be careful, in some cases moving the payment info out of the order_review div can cause the checkout to stop working.

Comments are closed.