Introduction
The checkout process is one of the most critical parts of any e-commerce website. A streamlined, user-friendly checkout can significantly improve conversion rates and customer satisfaction. WooCommerce, the popular WordPress e-commerce plugin, offers a flexible checkout system that can be customized to meet your specific business needs.
In this comprehensive guide, we’ll explore how to customize WooCommerce checkout fields using code. Whether you want to add new fields, remove unnecessary ones, or modify existing fields, this tutorial will provide you with the knowledge and code snippets to accomplish these tasks.
Understanding WooCommerce Checkout Fields
Before diving into customization, it’s important to understand how WooCommerce organizes checkout fields. The checkout form is divided into three main sections:
- Billing fields: Customer billing information
- Shipping fields: Delivery address details
- Additional fields: Order notes and other supplementary information
Each field has properties like label, placeholder, required status, and class that can be modified to suit your needs.
Adding Custom Fields to WooCommerce Checkout
Adding a New Billing Field
Let’s start by adding a simple custom field to the billing section. This example adds a “Company VAT Number” field:
/**
* Add custom field to the checkout billing form
*/
function add_vat_number_field($fields) {
$fields['billing_vat_number'] = array(
'label' => 'VAT Number',
'placeholder' => 'Enter your VAT number',
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
'priority' => 120, // Position after company field
);
return $fields;
}
add_filter('woocommerce_billing_fields', 'add_vat_number_field');Saving Custom Field Data
After adding a custom field, you need to save its data when an order is placed:
/**
* Save custom field value to order meta
*/
function save_vat_number_field($order_id) {
if (!empty($_POST['billing_vat_number'])) {
update_post_meta($order_id, '_billing_vat_number', sanitize_text_field($_POST['billing_vat_number']));
}
}
add_action('woocommerce_checkout_update_order_meta', 'save_vat_number_field');Displaying Custom Field in Admin Order Page
To make your custom field visible in the admin order details:
/**
* Display custom field in admin order page
*/
function display_vat_number_in_admin_order($order) {
$vat_number = get_post_meta($order->get_id(), '_billing_vat_number', true);
if ($vat_number) {
echo '<p><strong>VAT Number:</strong> ' . esc_html($vat_number) . '</p>';
}
}
add_action('woocommerce_admin_order_data_after_billing_address', 'display_vat_number_in_admin_order', 10, 1);Removing Checkout Fields
Sometimes you may want to simplify the checkout process by removing unnecessary fields. Here’s how to remove specific fields:
/**
* Remove unnecessary checkout fields
*/
function remove_unnecessary_checkout_fields($fields) {
// Remove billing fields
unset($fields['billing_company']);
unset($fields['billing_phone']);
// Remove shipping fields
unset($fields['shipping_company']);
return $fields;
}
add_filter('woocommerce_billing_fields', 'remove_unnecessary_checkout_fields', 20, 1);
add_filter('woocommerce_shipping_fields', 'remove_unnecessary_checkout_fields', 20, 1);Modifying Existing Checkout Fields
You can also modify existing fields to change their labels, placeholders, or other properties:
/**
* Modify existing checkout fields
*/
function modify_checkout_fields($fields) {
// Change field labels
$fields['billing_first_name']['label'] = 'First Name';
$fields['billing_last_name']['label'] = 'Last Name';
// Change placeholders
$fields['billing_address_1']['placeholder'] = 'Street address';
$fields['billing_postcode']['placeholder'] = 'Postal / Zip Code';
// Make a field optional
$fields['billing_phone']['required'] = false;
// Change field priority (order)
$fields['billing_email']['priority'] = 25;
return $fields;
}
add_filter('woocommerce_billing_fields', 'modify_checkout_fields');Reordering Checkout Fields
If you want to change the order of fields in the checkout form:
/**
* Reorder checkout fields
*/
function reorder_checkout_fields($fields) {
// Change priority to reorder fields
$fields['billing_first_name']['priority'] = 10;
$fields['billing_last_name']['priority'] = 20;
$fields['billing_company']['priority'] = 30;
$fields['billing_country']['priority'] = 40;
$fields['billing_address_1']['priority'] = 50;
$fields['billing_address_2']['priority'] = 60;
$fields['billing_city']['priority'] = 70;
$fields['billing_state']['priority'] = 80;
$fields['billing_postcode']['priority'] = 90;
$fields['billing_phone']['priority'] = 100;
$fields['billing_email']['priority'] = 110;
return $fields;
}
add_filter('woocommerce_billing_fields', 'reorder_checkout_fields');Adding Custom Validation
To ensure data integrity, you might want to add custom validation to your checkout fields:
/**
* Add custom validation for VAT number
*/
function validate_vat_number_field() {
// Check if the field is set and not empty
if (!empty($_POST['billing_vat_number'])) {
$vat_number = sanitize_text_field($_POST['billing_vat_number']);
// Simple validation - check if VAT number starts with two letters
if (!preg_match('/^[A-Z]{2}/', $vat_number)) {
wc_add_notice('VAT Number should start with two capital letters representing country code.', 'error');
}
}
}
add_action('woocommerce_checkout_process', 'validate_vat_number_field');Adding Fields to Specific Countries
You might want to show certain fields only for specific countries:
/**
* Show VAT number only for EU countries
*/
function conditional_vat_number_field($fields) {
$eu_countries = array('AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE');
// Add VAT number field
$fields['billing_vat_number'] = array(
'label' => 'VAT Number',
'placeholder' => 'Enter your VAT number',
'required' => false,
'class' => array('form-row-wide', 'eu-countries-only'),
'clear' => true,
'priority' => 120,
);
// Add JavaScript to show/hide field based on country selection
wc_enqueue_js("
jQuery(document).ready(function($) {
// Initial check
var euCountries = " . json_encode($eu_countries) . ";
var countryField = $('#billing_country');
function checkCountry() {
if ($.inArray(countryField.val(), euCountries) !== -1) {
$('.eu-countries-only').show();
} else {
$('.eu-countries-only').hide();
}
}
// Check on page load
checkCountry();
// Check when country changes
countryField.on('change', function() {
checkCountry();
});
});
");
return $fields;
}
add_filter('woocommerce_billing_fields', 'conditional_vat_number_field');Adding Custom Sections to Checkout
For more complex customizations, you might want to add entirely new sections to the checkout:
/**
* Add custom section to checkout
*/
function add_custom_checkout_section() {
echo '<div class="custom-checkout-section">';
echo '<h3>Additional Information</h3>';
woocommerce_form_field('delivery_instructions', array(
'type' => 'textarea',
'class' => array('form-row-wide'),
'label' => 'Delivery Instructions',
'placeholder' => 'Special instructions for delivery',
'required' => false,
));
echo '</div>';
}
add_action('woocommerce_checkout_before_order_review', 'add_custom_checkout_section');
/**
* Save custom section data
*/
function save_custom_checkout_section($order_id) {
if (!empty($_POST['delivery_instructions'])) {
update_post_meta($order_id, '_delivery_instructions', sanitize_textarea_field($_POST['delivery_instructions']));
}
}
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_section');Adding Custom Field Types
WooCommerce supports various field types like text, textarea, select, radio, and checkbox. Here’s how to add a custom select field:
/**
* Add custom select field to checkout
*/
function add_preferred_contact_field($fields) {
$fields['billing_preferred_contact'] = array(
'type' => 'select',
'label' => 'Preferred Contact Method',
'required' => true,
'class' => array('form-row-wide'),
'options' => array(
'' => 'Select an option',
'email' => 'Email',
'phone' => 'Phone',
'sms' => 'SMS',
),
'priority' => 115,
);
return $fields;
}
add_filter('woocommerce_billing_fields', 'add_preferred_contact_field');Displaying Custom Fields on Thank You Page and Emails
To display custom field data on the thank you page and in order emails:
/**
* Display custom fields on thank you page and emails
*/
function display_custom_fields_in_emails($order, $sent_to_admin, $plain_text) {
$vat_number = get_post_meta($order->get_id(), '_billing_vat_number', true);
$delivery_instructions = get_post_meta($order->get_id(), '_delivery_instructions', true);
if ($vat_number) {
echo '<p><strong>VAT Number:</strong> ' . esc_html($vat_number) . '</p>';
}
if ($delivery_instructions) {
echo '<p><strong>Delivery Instructions:</strong> ' . esc_html($delivery_instructions) . '</p>';
}
}
add_action('woocommerce_email_order_meta', 'display_custom_fields_in_emails', 10, 3);
add_action('woocommerce_order_details_after_order_table', 'display_custom_fields_in_emails', 10, 3);Best Practices for Customizing WooCommerce Checkout Fields
- Use Child Themes: Always add your customizations to a child theme to prevent losing changes during theme updates.
- Create a Custom Plugin: For more extensive customizations, consider creating a dedicated plugin.
- Test Thoroughly: After making changes, test the checkout process thoroughly to ensure everything works as expected.
- Consider Mobile Users: Ensure your customized checkout looks good and functions well on mobile devices.
- Keep It Simple: Only add fields that are absolutely necessary. A cluttered checkout can lead to cart abandonment.
- Use Proper Validation: Always validate user input to prevent errors and security issues.
- Maintain Accessibility: Ensure your custom fields are accessible to all users, including those with disabilities.
Conclusion
Customizing WooCommerce checkout fields gives you the flexibility to create a checkout experience tailored to your business needs. By using the code snippets and techniques outlined in this guide, you can add, remove, modify, and validate checkout fields to improve the user experience and collect the information you need from your customers.
Remember that while customization is powerful, it’s important to keep the checkout process as simple and streamlined as possible. Only add fields that provide value to your business or improve the customer experience.
With these tools at your disposal, you can create a checkout process that not only meets your business requirements but also enhances the overall shopping experience for your customers.