Let’s face it—WooCommerce is awesome. WooCommerce powers over 7 million websites, according to the WordPress plugins directory.

But sometimes the checkout page can be a little overwhelming. For your users to finish the process, they have to fill so many fields, and a lot of these fields are unnecessary.

It’s a big deal because your checkout page is where the magic (aka money) happens.

If you want to tweak some fields, add or remove a few, this post is going to help you. We will use custom code to do all that. And don’t worry, you don’t need to be a hardcore coder to make it happen.

Let’s dive into how you can customize your WooCommerce checkout fields using custom code and no plugins at all—step by step.

Why Customize Your WooCommerce Checkout Fields?

Before we get into the code snippets, let’s talk about why you’d want to edit the WooCommerce checkout form in the first place. Here’s the deal:

  • Improve User Experience: You only need to display the absolute necessary fields. This will make it easier for your customers to buy from you.
  • Collect Extra Data: This depends on your business needs. If you want to display specific extra fields, you can do that easily using our code.
  • Reduce Cart Abandonment: A lot of users change their minds at the final stage of the process. If you use what is necessary only in the checkout form, this will simplify the process, remove distractions, and you’ll see fewer people bouncing off at checkout.

Here are the steps you should follow when using custom code in general with WordPress:

Step 1: Add Custom Code to Your Child Theme’s Functions.php File

Here’s the first step to becoming a checkout page (and WordPress in general) customization pro. You’ll be working with your child theme’s functions.php file. Never modify the files of your main (parent) theme. Use a child theme to keep your website safe, and if you update the parent theme, you don’t lose your custom code.

Here are the steps:

  1. Backup Your Site: Always, always, ALWAYS backup before making changes. Seriously, do it.
  2. Access Your Child Theme’s Functions.php File: You can find this in your WordPress dashboard under Appearance > Theme File Editor.
  3. Add the Custom Code: Copy and paste the code below to add, remove, or modify checkout fields.

Step 2: Test Your Changes

So, you’ve added the code. Awesome! But don’t leave it at that—testing is crucial. This is PHP code; a tiny mistake will break your entire website. You don’t want this to happen.

  • Go to Your Checkout Page: Test everything, be 100% sure that the fields look exactly how you want them.
  • Test Different Scenarios: For example, check what happens when you leave fields blank or enter incorrect info. Fix any errors you spot.

Now, let’s see the code snippets you can use with each scenario

Add a custom field to the WooCommerce checkout page

add-custom-field-checkout-woocommerce

Here’s a code snippet that demonstrates how to add a new custom field to the WooCommerce checkout page using custom code, with explanations for each function.

/**
 * Add a custom field to the WooCommerce checkout page.
 * Author: DiviKingdom.Com
 */
add_action('woocommerce_after_order_notes', 'dk_add_custom_checkout_field');

function dk_add_custom_checkout_field($checkout) {
    echo '<div id="dk_custom_checkout_field"><h3>' . __('Additional Information', 'woocommerce') . '</h3>';

    woocommerce_form_field('dk_custom_field', array(
        'type'        => 'text',
        'class'       => array('dk-custom-class form-row-wide'),
        'label'       => __('Custom Field', 'woocommerce'),
        'placeholder' => __('Enter your custom data here'),
        'required'    => false,
    ), $checkout->get_value('dk_custom_field'));

    echo '</div>';
}

/**
 * Validate the custom field during checkout submission.
 * Author: DiviKingdom.Com
 */
add_action('woocommerce_checkout_process', 'dk_validate_custom_checkout_field');

function dk_validate_custom_checkout_field() {
    // Check if the custom field is set and not empty (if required).
    if (!$_POST['dk_custom_field']) {
        wc_add_notice(__('Please fill in the custom field.', 'woocommerce'), 'error');
    }
}

/**
 * Save the custom field value to the order meta.
 * Author: DiviKingdom.Com
 */
add_action('woocommerce_checkout_update_order_meta', 'dk_save_custom_checkout_field');

function dk_save_custom_checkout_field($order_id) {
    if (!empty($_POST['dk_custom_field'])) {
        update_post_meta($order_id, '_dk_custom_field', sanitize_text_field($_POST['dk_custom_field']));
    }
}

/**
 * Display the custom field value in the admin order edit page.
 * Author: DiviKingdom.Com
 */
add_action('woocommerce_admin_order_data_after_billing_address', 'dk_display_custom_field_in_admin_order');

function dk_display_custom_field_in_admin_order($order) {
    $custom_field_value = get_post_meta($order->get_id(), '_dk_custom_field', true);
    if ($custom_field_value) {
        echo '<p><strong>' . __('Custom Field:', 'woocommerce') . '</strong> ' . esc_html($custom_field_value) . '</p>';
    }
}

Code Explanation:

1. Adding the Custom Field (dk_add_custom_checkout_field):

This function adds a new field to your checkout form, right after the order notes section. It creates a text input where customers can enter additional data.

woocommerce_after_order_notes hook is used to place the new field after the order notes on the checkout page.

The woocommerce_form_field function is used to define the new field. Here’s a quick breakdown:

  • type: Specifies the type of input. In this case, it’s a text field.
  • class: Adds CSS classes to the field for styling.
  • label: The label that appears above the field.
  • placeholder: The placeholder text inside the input box.
  • required: If set to true, the field must be filled; false means it’s optional.

2. Validating the Field (dk_validate_custom_checkout_field):

This function checks the custom field when the checkout form is submitted to ensure the data is valid.

It hooks into the woocommerce_checkout_process action, which runs when the checkout is submitted.

The code checks if the custom field (dk_custom_field) is empty. If it is, WooCommerce displays an error message (wc_add_notice), stopping the checkout process until the error is fixed.

3. Saving the Field Value (dk_save_custom_checkout_field):

This function saves the input from the custom field to the order meta, storing the information with the order.

It hooks into woocommerce_checkout_update_order_meta, which runs when the checkout data is saved.

The function checks if the custom field (dk_custom_field) has a value and, if so, saves it to the order’s meta data using update_post_meta.

4. Displaying the Field in the Admin (dk_display_custom_field_in_admin_order):

This function shows the value of the custom field on the order edit page in the WooCommerce admin, so store owners can see what the customer entered.

It hooks into woocommerce_admin_order_data_after_billing_address, which allows custom content to be added to the order edit screen.

The function retrieves the saved custom field value using get_post_meta and displays it in a formatted paragraph.

Remove a specific field from the WooCommerce checkout page

Here’s a code snippet that will help you remove a field from the WooCommerce checkout form.

/**
 * Remove a specific field from the WooCommerce checkout page.
 * Author: DiviKingdom.Com
 */
add_filter('woocommerce_checkout_fields', 'dk_remove_checkout_field');

function dk_remove_checkout_field($fields) {
    // Remove the billing company field
    unset($fields['billing']['billing_company']);

    // Remove any other fields as needed (example: shipping address line 2)
    // unset($fields['shipping']['shipping_address_2']);
    // unset($fields['order']['order_comments']);

    return $fields;
}

Code Explanation:

Function Name: dk_remove_checkout_field This function is hooked to woocommerce_checkout_fields to modify the fields array that WooCommerce uses to generate the checkout form.

Removing Fields with unset():

Remove the Billing Company Field: The line unset($fields['billing']['billing_company']); removes the company name field from the billing section of the checkout page.

Additional Examples: You can remove other fields by using the unset() function. For example:

unset($fields['shipping']['shipping_address_2']); removes the second line of the shipping address field.

unset($fields['order']['order_comments']); removes the order comments field.

Make specific checkout fields optional

optional field woocommerce checkout fields

Next, this code snippet makes certain fields optional (i.e., not required) in the WooCommerce checkout page. You may want to display some fields but without forcing the user to fill them. This code snippet will save the day!

/**
 * Make specific checkout fields optional (unrequired).
 * Author: DiviKingdom.Com
 */
add_filter('woocommerce_checkout_fields', 'dk_make_checkout_fields_optional');

function dk_make_checkout_fields_optional($fields) {
    // Make the billing company field optional
    $fields['billing']['billing_company']['required'] = false;

    // Make other fields optional as needed (examples below)
    // Make the billing phone field optional
    $fields['billing']['billing_phone']['required'] = false;

    // Make the shipping address line 2 field optional
    $fields['shipping']['shipping_address_2']['required'] = false;

    return $fields;
}

Code Explanation:

Function Name: dk_make_checkout_fields_optional This function hooks into the woocommerce_checkout_fields filter, which allows you to modify the fields used during the checkout process.

Making Fields Optional:

Billing Company Field: The line $fields['billing']['billing_company']['required'] = false; changes the billing company field to optional.

Additional Examples:

$fields['billing']['billing_phone']['required'] = false; makes the billing phone field optional.

$fields['shipping']['shipping_address_2']['required'] = false; makes the second line of the shipping address optional.

Customize placeholders for WooCommerce checkout fields.

labels-placeholders-woocommerce-checkout-form

Placeholder is the text that appears inside the fields. This code snippet allows you to customize the placeholders for specific fields on the WooCommerce checkout page.

/**
 * Customize placeholders for WooCommerce checkout fields.
 * Author: DiviKingdom.Com
 */
add_filter('woocommerce_checkout_fields', 'dk_customize_checkout_placeholders');

function dk_customize_checkout_placeholders($fields) {
    // Customize the placeholder for the billing first name field
    $fields['billing']['billing_first_name']['placeholder'] = 'Enter your first name';

    // Customize the placeholder for the billing last name field
    $fields['billing']['billing_last_name']['placeholder'] = 'Enter your last name';

    // Customize the placeholder for the billing email field
    $fields['billing']['billing_email']['placeholder'] = 'Enter your email address';

    // Customize the placeholder for the billing phone field
    $fields['billing']['billing_phone']['placeholder'] = 'Enter your phone number';

    // Customize the placeholder for the shipping address line 1 field
    $fields['shipping']['shipping_address_1']['placeholder'] = 'Enter your street address';

    return $fields;
}

Code Explanation:

Function Name: dk_customize_checkout_placeholders This function hooks into the woocommerce_checkout_fields filter, allowing you to modify the placeholders of various fields on the checkout page.

Customizing Placeholders:

First Name Field: $fields['billing']['billing_first_name']['placeholder'] = 'Enter your first name'; changes the placeholder text for the billing first name field.

Additional Examples:

$fields['billing']['billing_last_name']['placeholder'] = 'Enter your last name'; sets a custom placeholder for the billing last name field.

$fields['billing']['billing_email']['placeholder'] = 'Enter your email address'; customizes the email field placeholder.

You can continue customizing other fields by modifying the relevant array keys.

Customize labels for WooCommerce checkout fields

Fields labels appear above the fields; think of them as the titles for each field. This code snippet demonstrates how to customize labels for specific fields on the WooCommerce checkout page.

/**
 * Customize labels for WooCommerce checkout fields.
 * Author: DiviKingdom.Com
 */
add_filter('woocommerce_checkout_fields', 'dk_customize_checkout_labels');

function dk_customize_checkout_labels($fields) {
    // Customize the label for the billing first name field
    $fields['billing']['billing_first_name']['label'] = 'Your First Name';

    // Customize the label for the billing last name field
    $fields['billing']['billing_last_name']['label'] = 'Your Last Name';

    // Customize the label for the billing email field
    $fields['billing']['billing_email']['label'] = 'Email Address';

    // Customize the label for the billing phone field
    $fields['billing']['billing_phone']['label'] = 'Contact Number';

    // Customize the label for the shipping address line 1 field
    $fields['shipping']['shipping_address_1']['label'] = 'Street Address';

    return $fields;
}

Code Explanation:

Function Name: dk_customize_checkout_labels This function is hooked into the woocommerce_checkout_fields filter, which allows you to modify the labels of the checkout fields.

Customizing Labels:

First Name Field: $fields['billing']['billing_first_name']['label'] = 'Your First Name'; updates the label for the billing first name field.

Additional Examples:

$fields['billing']['billing_last_name']['label'] = 'Your Last Name'; changes the label for the billing last name field.

$fields['billing']['billing_email']['label'] = 'Email Address'; sets a custom label for the email field.

Modify the labels as needed for each field by adjusting the array keys.

Add Validation Rules to Your Checkout Fields

woocommerce-checkout-form-validation

In our first example, we added a little function to check if the fields are filled or not. In this code snippet, I will add some more examples to validate form fields.

/**
 * Add custom validation rules to WooCommerce checkout fields.
 * Author: DiviKingdom.Com
 */
add_action('woocommerce_checkout_process', 'dk_custom_checkout_field_validation');

function dk_custom_checkout_field_validation() {
    // Validate billing phone - check if it is not empty
    if ( empty($_POST['billing_phone']) ) {
        wc_add_notice(__('Please enter your phone number.', 'woocommerce'), 'error');
    }

    // Validate billing first name - ensure it's at least 2 characters long
    if ( isset($_POST['billing_first_name']) && strlen(trim($_POST['billing_first_name'])) < 2 ) {
        wc_add_notice(__('First name must be at least 2 characters long.', 'woocommerce'), 'error');
    }

    // Validate custom field example - only allow alphanumeric characters
    if ( isset($_POST['dk_custom_field']) && !preg_match('/^[a-zA-Z0-9]+$/', $_POST['dk_custom_field']) ) {
        wc_add_notice(__('Custom field can only contain letters and numbers.', 'woocommerce'), 'error');
    }
}

Code Explanation:

Function Name: dk_custom_checkout_field_validation This function adds custom validation rules to WooCommerce checkout fields using the woocommerce_checkout_process hook. It checks various conditions on fields and shows error messages if the validation fails.

Validation Rules:

Billing Phone: if ( empty($_POST['billing_phone']) ) ensures that the phone number is not empty; if it is, an error message is displayed.

Billing First Name: if ( strlen(trim($_POST['billing_first_name'])) < 2 ) ensures the first name has at least two characters.

Custom Field Validation: if ( !preg_match('/^[a-zA-Z0-9]+$/', $_POST['dk_custom_field']) ) checks if a custom field value contains only alphanumeric characters.

Final Thoughts

There you have it—a step-by-step guide to customizing your WooCommerce checkout fields without using any plugins. Custom code gives you the freedom to do a lot of great things, and WooCommerce has so many hooks that we can use to do that.

Remember, your checkout page is one of the most important parts of your WooCommerce website, keeping it simple is essential. Keep experimenting with the code snippets above to find what works best for your customers.

And if you’re still feeling stuck, hit me up in the comments or reach out to a developer for more complex changes. But now, you’ve got the tools to start customizing like a pro!

If you found this post helpful, share and leave a comment below!

See you in the next one!

Share this guide