How to customize WooCommerce Checkout Page

WooCommerce is by far the best E-Commerce plugin for WordPress, but they don’t offer the options (at least not for free) within their settings to customize the checkout page. Here is how to customize WooCommerce checkout page in order to remove the checkout fields for billing and shipping info in case you don’t need them.

There are a few ways to approach here, as in any other problem solving situation. The first and easy way is to simply buy the plugin called Checkout Field Editor from WooThemes. The checkout field editor provides you with an interface to add, edit and remove fields shown on your WooCommerce checkout page.

In case you want to get dirty and under the hood, well then… here is how to remove the WooCommerce checkout fields. Bare in mind that different themes may have different layouts for checkout page.

1. Modify your theme’s functions.php file

I hope you perform regular backups and keep copies of your original files because shit goes wrong too often! Download your theme’s functions.php file, make a copy of it and open in text editor. Scroll to the bottom and paste the following code into it:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_last_name']);
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_phone']);
unset($fields['order']['order_comments']);
unset($fields['billing']['billing_email']);
unset($fields['account']['account_username']);
unset($fields['account']['account_password']);
unset($fields['account']['account_password-2']);
return $fields;
}

DONE!

There are, of course, many scenarios here depending on the theme layout, as I mentioned above. So if you have to remove Ship to a different address fields or Create an account option after removing the billing info, you can do it within the WooCommerce plugin settings:

To hide Ship to a different address fields navigate to:
Woocommerce ⇒ Settings ⇒ Shipping (there’s a radio button to check Force shipping to billing address only).

To remove Create an account option navigate to:
Woocommerce ⇒ Settings ⇒ Accounts (uncheck Enable registration on the “Checkout” page).

Real life example

In my case I worked on a French website so we are now talking about two sections translated to Facturation & Expédition in the left column and Expédier à une adresse différenete? in the right column.

Due to specific business circumstances where the store owner doesn’t ship their products but customers have to personally pick them up, they do need some of the fields on the checkout page. So my final code in functions.php file is this:

//Removing fields on checkout page.

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_city']);
return $fields;
}

So in the end the checkout page looks like the bottom image.