How to Add Custom Checkout Fields to WooCommerce Programmatically

In this tutorial, we’ll cover how to add custom fields to the WooCommerce checkout page. These fields are helpful when you need to gather extra information from your customers, such as delivery preferences or the type of address (home or office).

Adding New Custom Fields

To add custom fields, we’ll use the woocommerce_checkout_fields filter. This filter allows us to modify the default checkout fields and add new ones.

add_filter( 'woocommerce_checkout_fields', 'wk_add_custom_checkout_field' );
function wk_add_custom_checkout_field( $fields ) {
$fields['shipping']['address_type'] = array(
'label' => __( 'Address Type', 'example' ),
'type' => 'text',
'placeholder' => _x( 'Type', 'placeholder', 'example' ),
'required' => false,
'class' => array( 'address-type' ),
'clear' => true
);
return $fields;
}

Saving New Custom Fields

To save the custom field data when an order is placed, use the woocommerce_checkout_update_order_meta action.

add_action( 'woocommerce_checkout_update_order_meta', 'wk_save_custom_field_data' );
function wk_save_custom_field_data( $order_id ) {
if ( ! empty( $_POST['address_type'] ) ) {
update_post_meta( $order_id, 'address_type', sanitize_text_field( $_POST['address_type'] ) );
}
}

Qaisar Satti

Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!