how to add custom field in woocommerce checkout form

How to Customize WooCommerce Checkout Field.

To add a Customize WooCommerce Checkout Field, you can do this by adding some code to your theme’s functions.php file. Here are the steps to achieve this:

Step 1: Add the Customize WooCommerce Checkout Field

Add the following code to your theme’s functions.php file. This example adds a custom text field called “Custom Field”:

// Add the custom field to the checkout form add_action('woocommerce_after_order_notes','custom_checkout_field');

function custom_checkout_field($checkout) { echo '<div id="custom_checkout_field"><h2>' . __('Custom Field') . '</h2>';

woocommerce_form_field('custom_field', array(
'type' => 'text',
'class' => array('custom-field-class form-row-wide'),
'label' => __('Enter something here'),
'placeholder' => __('Placeholder text'),
), $checkout->get_value('custom_field'));
echo '</div>'; 
}

Step 2: Validate the Custom Field

Add the following code to validate the custom field:

// Validate the custom field add_action('woocommerce_checkout_process','custom_checkout_field_process');

function custom_checkout_field_process() {
 if (!$_POST['custom_field']) { wc_add_notice(__('Please enter a value for the custom field.'), 'error'); } }

Step 3: Save the Custom Field

Add the following code to save the custom field value:

// Save the custom field add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

function custom_checkout_field_update_order_meta($order_id) { 
if (!empty($_POST['custom_field'])) { update_post_meta($order_id, 'Custom Field', sanitize_text_field($_POST['custom_field'])); } }

Step 4: Display the Custom Field in the Order Admin

Add the following code to display the custom field value in the WooCommerce order admin:

// Display the custom field in the order admin add_action('woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1);

function custom_checkout_field_display_admin_order_meta($order) { echo '<p><strong>' . __('Custom Field') . ':</strong> ' . get_post_meta($order->get_id(), 'Custom Field', true) . '</p>'; }

Step 5: Display the Custom Field in the Order Email

Add the following code to display the custom field value in the WooCommerce order email:

// Display the custom field in the order email add_filter('woocommerce_email_order_meta_keys', 'custom_checkout_field_order_meta_keys');

function custom_checkout_field_order_meta_keys($keys) { $keys[] = 'Custom Field'; return $keys; }

This will add a custom field to the WooCommerce checkout form, validate it, save the data, display it in the admin order details, and include it in the order emails.

Additional Notes

1. Backup Your Site: Always make a backup of your site before making any changes to the code.
2. Child Theme: If possible, use a child theme to add custom code so that your changes are not lost when the parent theme is updated.
3. Test Changes: Test the changes on a staging site or local development environment before applying them to your live site.

If you need further customization or face any issues, feel free to ask!