Website Building » WooCommerce » How Do I Change the Checkout Layout in WooCommerce?

How Do I Change the Checkout Layout in WooCommerce?

Last updated on October 1, 2022 @ 6:02 pm

If you’re using WooCommerce to sell products on your WordPress site, you may want to change the default checkout layout. By default, WooCommerce displays the checkout fields in a single column. However, you can easily change this to a two-column layout using a few lines of code.

First, you need to edit the checkout.php file in your WooCommerce folder. You can find this file in the following location:

/wp-content/plugins/woocommerce/templates/checkout/

Once you’ve opened checkout.php, look for the following line of code:

PRO TIP: Please be aware that changing the checkout layout in WooCommerce can be a complex process and may result in errors on your site. We recommend that you seek professional help before making any changes.

This line determines where the customer details are displayed on the checkout page. By default, WooCommerce displays the customer details before the billing and shipping sections.

However, you can easily change this by moving the line of code above to after the billing and shipping sections. Doing so will display the customer details in a separate column on the right side of the page.

Once you’ve made this change, save your changes and upload the file to your server. You should now see a two-column layout on your WooCommerce checkout page!

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.