Custom fields to payment page - WooCommerce

Introduction

WooCommerce is hands-down one of the most popular plugins for WordPress users. For those unfamiliar, it transforms any WordPress site into a full-featured store that can sell physical or digital products. Although WooCommerce is a powerful and flexible tool, it doesn’t always cover every custom need out of the box. Fortunately, you can customize it extensively—often without the need for third-party plugins.

In this guide, you’ll learn how to manually add, remove, and customize checkout fields using just a few lines of code.

Removing Unnecessary Default Fields

WooCommerce comes with a range of default checkout fields. Some of them may not be relevant to your store. For example, if you're selling exclusively in Israel, the "Country" or "Company" fields might be unnecessary.

You can remove fields by adding the following code to your child theme’s functions.php file:

add_filter( 'woocommerce_checkout_fields' , 'custom_remove_woo_checkout_fields' );

function custom_remove_woo_checkout_fields( $fields ) {

    // remove billing 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_state']);

    return $fields;

In the code below, I removed the following fields from the WooCommerce checkout page, under the Billing section:

• Company name
• Address
• City
• Post code
• State

Of course, everything can be customized — you can easily add or remove lines yourself from the list of available fields. Click here to view the full list of available fields..

Adding Custom Checkout Fields

In the screenshot attached - the custom fields I've added.

WooCommerce does not allow you to add custom fields via its settings, but with a few lines of code, you can inject custom fields exactly where you want them.

Below is a code snippet (Credit to Savvy) to add two custom date fields: one for "Departure Date" and one for "Return Date". You can paste this into your child theme’s functions.php file:

function savvy_select_field( $checkout ){


	woocommerce_form_field( 'departure', array(
		'type'          => 'date', // text, textarea, select, radio, checkbox, password, about custom validation a little later
		'required'	=> false, // actually this parameter just adds "*" to the field
		'class'         => array('savvy-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
		'label'         => 'תאריך המראה לדרום אפריקה',
		'label_class'   => 'savvy-label', // sometimes you need to customize labels, both string and arrays are supported
		), $checkout->get_value( 'departure' ) );
}

function savvy_subscribe_checkbox( $checkout ) {

woocommerce_form_field( 'landing', array(
		'type'          => 'date', // text, textarea, select, radio, checkbox, password, about custom validation a little later
		'required'	=> false, // actually this parameter just adds "*" to the field
		'class'         => array('savvy-field', 'form-row-wide'), // array only, read more about classes and styling in the previous step
		'label'         => 'תאריך חזרה לישראל',
		'label_class'   => 'savvy-label', // sometimes you need to customize labels, both string and arrays are supported
		), $checkout->get_value( 'landing' ) );
}

// save field values
function savvy_save_what_we_added( $order_id ){

	if( !empty( $_POST['departure'] ) )
		update_post_meta( $order_id, 'departure', sanitize_text_field( $_POST['departure'] ) );


	if( !empty( $_POST['landing'] ) )
		update_post_meta( $order_id, 'landing', sanitize_text_field( $_POST['landing'] ) );

}

// add fields
add_action( 'woocommerce_after_checkout_billing_form', 'savvy_select_field' );
add_action( 'woocommerce_after_checkout_billing_form', 'savvy_subscribe_checkbox' );

Using this code, I added two custom fields – a departure field from Israel and a landing field.

1. Please notice - I named the fields 'landing' and 'departure' because they refer to departure and return dates. You’re welcome to change the names as you like, but make sure the names are consistent across all functions.
2. Please notice - Under the 'type' property, I set the fields as Date fields.Of course, you can change the field type to any of the following:
   1. text
   2. textarea
   3. select
   4. radio
   5. checkbox
   6. password
3. Reminder 1 - Under 'label', define the title you'd like to give each field.
4. Reminder 2 - If you want your custom field to be required, set the 'required' parameter to true.

Saving Custom Field Data

Adding the fields is not enough - you also need to save the submitted data so it appears in the order details. WooCommerce - Orders - The relevant order.

Add the following to the functions.php file as well:

add_action( 'woocommerce_checkout_update_order_meta', 'savvy_save_what_we_added' );

function savvy_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('תאריך המראה לדרום אפריקה').'</strong> <br/>' . get_post_meta( $order->get_id(), 'departure', true ) . '</p>';
    echo '<p><strong>'.__('תאריך חזרה לישראל').'</strong> <br/>' . get_post_meta( $order->get_id(), 'landing', true ) . '</p>';
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'savvy_checkout_field_display_admin_order_meta', 10, 1 );

In Conclusion

In this guide, we covered how to: Remove unnecessary checkout fields Add new custom fields (like dates or text inputs) Save and display these fields in your order details This method helps you tailor the WooCommerce checkout to your exact business needs—without relying on plugins. If you found this guide helpful, feel free to share it with other developers or business owners!