Posted on

How to customise WooCommerce checkout

If you want to sell digital products online, WooCommerce might be a good solution for you. It is a plugin for WordPress that allows to sell online both normal, physical goods and digital products. It is available for free and in its pure form offers a decent functionality however there will be occasions that you want to change and improve things. There are many extensions that will help you but you need to usually pay for them. Alternatively, you might try to change the code yourself.

A few days ago I had this problem. I have a website with resources for studying Polish, it is called I will teach you Polish. There, I want to sell my ebook Polish language basics with audio. Because it is a WordPress site and I knew Woocommerce a little bit, I decided to install the plugin and start a small online store (I will publish more ebooks and courses about Polish language soon).

Everything went well but I noticed that the default WooCommerce checkout is a bit cluttered. When you buy digital products there really is no need for the customer to fill out a long form with address and other additional information. You do not send anything physical so this information is irrelevant. The customer wants to buy something quickly and asking for all this information can can put him or her off. This is how default WooCommerce checkout looked like:

Default Woocommerce checkout

So I decided to clean it a bit but also did not want to buy the extensions. They are around $75-$100 each and I thought that I had just started selling online, I did not have a single sale yet and I am not prepared to fork out $100. The other solutions was to change the code of the website. I followed these steps.

How to remove fields from Woocommerce Checkout

To change the look of the checkout and get rid of some fields, you need to add a custom function to functions.php file of your WordPress theme. The file is located at: root of your website / wp-content / themes / name of your WordPress theme / functions.php . Connect to the FTP server and copy the file into your hard drive. I think it is a good idea to keep the original file. Things may go wrong and if you website breaks, you need to be able to quickly restore original file and make it run again. So after I copied functions.php I changed it name to functions_.php and copied the file again from the server. I will work and replace functions.php but if something happens, I will be able to restore original code from functions_.php.

When you open the file, you fill find the area:

/*---------------------------------------------------------------*/
/* You can add custom functions below */
/*---------------------------------------------------------------*/

Add the following function:

/* WooCommerce: The Code Below Removes Checkout Fields */
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
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['account']['account_username']);
unset($fields['account']['account_password']);
unset($fields['account']['account_password-2']);
return $fields;
}

I have decided to leave only 3 fields for: First Name, Last name and email address. I think this is a good balance and by doing so you will also allow the users to quickly create account on your website. There is a checkout box “Create an account?” for it, in case they want to check their purchase history, buy quickly something else, etc. However, if you do not want to leave anything there, you can delete these fields as well. You need to add to the code above these lines:

unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_last_name']);
unset($fields['billing']['billing_email']);

In my case when I had changed and uploaded the file, the checkout page looked like this:

Improved Woocommerce checkout

I think it is much better, however I would like to improve it even further. First of all there is this heading “Additional information”, there is nothing there so we don’t need it. Also, the field for the email address looks a bit weird, it should be either after the “Last name” or below the “First name”. You can sort these two problems with CSS. After some tweaking I discovered that following code does the job:

h3 {display: block; clear: both;}
div.col-2 {display: none;}
p#billing_email_field {width: 100%; float: left; display: block; clear: both;}

I think it make sense to use this CSS only on the checkout page, so I created a separate checkout.css file, upload it and linked it from the checkout page .

That is all really, the WooCommerce checkout page looks much neater and everything works well:

Final Woocommerce checkout

Of course you need to double check if everything looks and works fine and that the customers can actually buy the products. Depending on the settings you might encounter an error when users want to create the account and some fields needed for it are not visible. I have changed the settings in Woocommerce so that the application creates users names and passwords automatically.

More additional information on this topic can be found in this article WooCommerce: How To Easily Remove The Checkout Fields. Some of the code in my tutorial also comes from this article.

Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen + 9 =