Customizing the WooCommerce Checkout Page

April 24, 2013 · 273 comments

in WooCommerce Tutorials, WP Plugins, WP Theme Tutorials

Custom WooCommerce Checkout Page

How to Customize the WooCommerce Checkout Page

Many questions related to customizing the WooCommerce checkout page have been brought up recently.  As you’ll soon see it is possible to modify fields in the checkout page without spending money on expensive extensions for WooCommerce.  However, before we dive into the details I want to share a quick story to help put it all in perspective.

Way back in 2007 I got my start in the eCommerce business.  I was fresh out of college and knew very little about average order size, payment gateways, SSL certificates or any of the standard eCommerce jargon.  Somehow I was able to land a job as an account manager with an up-and-coming software as a service company.  Their main product was a custom eCommerce platform for small to mid-sized businesses.  I soon found myself working directly with the two guys that owned the company.  Stress levels were high but looking back at it now, the knowledge gained was worth it.

In working with hundreds of clients (over a 2 year period) I learned that no two eCommerce sites were the same.  Each had their own unique characteristics and needs especially in regards to the checkout process.  The out of the box checkout page we had was a starting point but our clients were always looking to customize the fields within it to fit their specific needs.

That was more than five years ago and at the time, making updates to fields on the checkout page was a process to say the least.  Being the middle-man, I had to determine the changes our clients wanted to make and then communicate that to our in-house developers.  They would then give me an estimate of how long it would take, how much it would cost and when they could get started which I would have to communicate back to the client.

My point in telling you that short story is that customizing the checkout page of an eCommerce site used to be a big deal that took time and money.  However, thanks to the combination of WordPress and WooCommerce it’s now easy to customize fields on the checkout page of your eCommerce site.

In this tutorial on customizing the WooCommerce checkout page we’ll show you how to do the following;

  • create a child theme and functions.php file to ensure your customizations are saved
  • modify field labels and placeholder text
  • remove fields
  • add custom fields
  • make fields not required or required

Create a Child Theme before making WooCommerce Checkout Modifications

Customizing the WooCommerce checkout page is a matter of making modifications to your themes functions.php file.  Hooking into the woocommerce_checkout_fields filter allows us to modify any fields on the checkout page.  However, before we jump into the customization details we need to first talk about the correct way to make updates via the use of child themes.

It’s very important that you first install a child theme and make updates to the functions.php file within it.  Do not make updates to the parent files because all customizations will be lost when you upgrade to the latest version of your theme.  The use of a child theme ensures that your hard work is preserved.

So start by reviewing our “Safely Customize your Site with Child Themes” tutorial to learn how to create a child theme (for any theme).  After your child theme has been created you need to add a functions.php file to it.

Here’s how add a functions.php file to your Child Theme

Now that you have a child theme you need to go one step further and create a functions.php file.  The functions.php file for the child theme simply consists of PHP open and close tags as shown here…

child theme functions Customizing the WooCommerce Checkout Page

Copy and paste the following into Notepad++ to create the functions.php file and upload it to the root of your Child theme…

<?php
/*    All child theme functions go here
----------------------------------------------- */

	
?>

Make sure to save the file as “functions.php”.  All customizations will go in-between the PHP open and close tags.  You’re now ready to properly make updates to the WooCommerce checkout page.

Watch the tutorial video below to learn how to create a child theme (and add a functions.php file to it) so that your WooCommerce checkout page customizations will be saved when you upgrade to the latest version of your theme…

How to Change WooCommerce Checkout Field Labels, Placeholder text and Remove Fields Entirely

Now that you know how to properly make updates to your site via the use of child themes, let’s dive into customizing the WooCommerce checkout page.  Specifically, let’s start by learning how to change field labels and the placeholder text within the fields.  We’ll end this segment by showing you how to remove fields from the checkout page entirely.

Customizing WooCommerce Checkout Field Labels and Placeholder Text

Let’s start by showing you how to change WooCommerce checkout field labels and the placeholder text within the fields.  We’ll use the “Order Notes” field as our first example.  Say we want to change the default label (Order Notes) and the placeholder (Notes about your order, e.g. special notes for delivery) to something new.

To modify the Order Notes field Label and the Placeholder text do the following…

In the WordPress admin go to Appearance > Editor > functions.php of your child theme > paste the following code between the PHP open and close tags…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'My new placeholder';
     $fields['order']['order_comments']['label'] = 'My new label';
     return $fields;
}

Here’s what that will look like on the WooCommerce checkout page…

change labels on woocommerce checkout Customizing the WooCommerce Checkout Page

You can change the label as well as the placeholder to anything you’d like by modifying the “My new placeholder” and “My new label” text in the code above.

In addition to the “Order Notes” field, it is possible to modify the label and placeholder for any fields on the checkout page and here’s how to do that…

Let’s say we want to change the “Company Name” field label and add a placeholder to it.  We would do that by making a few simple tweaks to the hook as shown below…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_company']['placeholder'] = 'Enter Company Name';
$fields['billing']['billing_company']['label'] = 'Business Name';
return $fields;
}

Here’s what that update looks like on our WooCommerce demo site…

modify company name field Customizing the WooCommerce Checkout Page

Shipping Address field labels and placeholders are changed in the same way.  For example, you could change the “Address” field label to “Shipping Address” and placeholder to “Enter your Shipping Address” with the following PHP snippet…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_address_1']['placeholder'] = 'Enter your Shipping Address';
$fields['shipping']['shipping_address_1']['label'] = 'Shipping Address';
return $fields;
}

Here’s a screen capture of what that looks like on the Checkout page of our demo site…

change shipping field label Customizing the WooCommerce Checkout Page

So you can use that same snippet of PHP to change the labels and placeholders for any of the checkout fields.

How to Remove Fields from the WooCommerce Checkout Page

Now lets take a look at how to remove fields entirely from the WooCommerce checkout page.  Again lets use the “Order Notes” field in our first example.  Say we want to remove the field from the checkout page.  To remove the Order Notes field paste the following hook between the PHP open and close tags…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);

return $fields;
}

Here’s what that looks like on our demo site…

remove order notes field Customizing the WooCommerce Checkout Page

If you want to remove multiple fields from the checkout page simply add additional “unset($fields” to the hook.  For example, say you wanted to remove the Order Comments, Phone and Email fields.  You would copy/paste the following code into the functions.php file within your child theme…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);
unset($fields['billing']['billing_phone']);
unset($fields['billing']['billing_email']);

return $fields;
}

Here’s what that modification to the checkout page looks like on our demo site…

remove multiple fields from woocommerce checkout Customizing the WooCommerce Checkout Page

Here’s the full list of WooCommerce fields.  Use this list to modify any fields on the checkout page…

array passed to woocommerce checkout fields Customizing the WooCommerce Checkout Page

Take a few minutes to watch our tutorial video below which demonstrates how to do the following…

  • Modify WooCommerce Checkout field labels and placeholder text
  • Remove any of the fields on the WooCommerce checkout page

Adding Custom Fields to the WooCommerce Checkout Page

Every business has its own unique traits and in many cases that requires adding custom fields to the checkout.  The good news is that with WooCommerce it’s easy to add functional, custom fields to the checkout process.  In fact, it’s as simple as copying the PHP snippet below and pasting it into the functions.php file within your child theme.

To add a custom field to your checkout copy/paste the following code in your child theme functions.php file…

/**
* Add the field to the checkout
**/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>'.__('My Field').'</h2>';

woocommerce_form_field( 'my_field_name', array(
'type'          => 'text',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('Fill in this field'),
'placeholder'       => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}

/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
global $woocommerce;

// Check if set, if its not set add an error.
if (!$_POST['my_field_name'])
$woocommerce->add_error( __('Please enter something into this new shiny field.') );
}

/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['my_field_name']) update_post_meta( $order_id, 'My Field', esc_attr($_POST['my_field_name']));
}

Here’s a screen capture of what it looks like on our demo site…

add custom field to checkout Customizing the WooCommerce Checkout Page

Watch the video below to learn how to add special custom fields to the WooCommerce checkout page.  They will show up when you look at the Order Details in the WordPress admin…

How to Make WooCommerce Checkout Fields Required or Not Required

At this point, you’ve learned how to change field labels, placeholders, add custom fields and remove fields altogether.  The last thing I want to show you is how to make WooCommerce checkout fields not required or required depending on the specific needs of your WordPress powered eCommerce site.

It’s possible to make any of the WooCommerce checkout fields required or not required.  The important thing to note is that “true” makes the field required and “false” makes it not required.

For example, to make the Billing Address “Phone” field not required paste the following code between the PHP open and close tags in the functions.php file of your child theme…

add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );

function wc_npr_filter_phone( $address_fields ) {
$address_fields['billing_phone']['required'] = false;
return $address_fields;
}

Below is a screen capture of what it looks like on our demo site when we make the Billing Address “Phone” field not required…

make woocommerce checkout fields not required Customizing the WooCommerce Checkout Page

Here’s how to make a field that is not require, required.  Take the Shipping Address “Company Name” field for example.  Let’s say we want to make that field required.  Using a slightly modified version of the same snippet of code as above we can change the Shipping Address “Company Name” field to required and here’s how…

add_filter( 'woocommerce_shipping_fields', 'wc_npr_filter_company', 10, 1 );

function wc_npr_filter_company( $address_fields ) {
$address_fields['shipping_company']['required'] = true;
return $address_fields;
}

Pasting the above code between the PHP open and close tags in the functions.php file of your child theme will result in the following…

make woocommerce checkout field required Customizing the WooCommerce Checkout Page

Take a few minutes to watch our tutorial video below to see how to make WooCommerce checkout fields not required or to make them required…

For your reference:

  • Learn more about the importance of using child themes when customizing your WordPress site here, “Why use a Child Theme
  • To learn more about how checkout fields are loaded into WooCommerce refer to WooThemes documentation on “Customizing checkout fields using actions and filters
  • We use a Mystile Child theme in the videos above, however, this will work with any theme
  • The process for creating a child theme is the same for all themes

Please use the new Upload WP Community Forums to post questions and comments on Customizing the WooCommerce Checkout page.  Thanks

Teddy Triton

Article by

I'm a blogger and the founder of UploadWP.com. Upload WP was originally created as a training tool for my Flippa.com clients. Having bought and sold a large number of WordPress sites on Flippa, I needed an effective and efficient way to teach people how to make updates to their new sites. Upload WP was the answer and the site has since grown into a leading WordPress Tutorials destination. I enjoy helping people solve their WordPress related issues. If you have any questions or a WP issues that you need help with, please leave a comment below and we'll do our best to help.

Adam has written 106 awesome articles for us at Upload WordPress

Stay Updated - Subscribe

{ 273 comments… read them below or add one }