How to Add Custom Fields to WooCommerce Checkout Page

Recently, I have created e-commerce site using wordpress and woocommerce and it is required to collect more information of customers through extra fields on checkout page.Here, I had many options to customized checkout page using plugins and code.But there was requirement to add fields conditionally according to type of user.For this I used action hook and filter hook to add fields just after “Order notes”.There are many predefined hooks to customize.Please review the below mentioned code.
Please add the below mentioned code in your theme functions.php

1. Add custom fields to checkout page

/**
* Add the custom fields to the checkout page
*/
add_action('woocommerce_after_order_notes', 'add_extra_checkout_fields');

function add_extra_checkout_fields($checkout)
{
echo '<div id="customised_checkout_field"><h2>' . __('Additional Information') . '</h2>';
woocommerce_form_field('field_one', array(
'type' => 'text',
'class' => array(
'custom-field-class form-row-wide'
) ,
'label' => __('Field One') ,
'placeholder' => __('Custom field one') ,
'required' => true,
) , $checkout->get_value('field_one'));

woocommerce_form_field('field_two', array(
'type' => 'text',
'class' => array(
'custom-field-class form-row-wide'
) ,
'label' => __('Field Two') ,
'placeholder' => __('Custom field two') ,
'required' => true,
) , $checkout->get_value('field_two'));

woocommerce_form_field('field_three', array(
'type' => 'textarea',
'class' => array(
'custom-field-class form-row-wide'
) ,
'label' => __('Field Three') ,
'placeholder' => __('Custom field three') ,
'required' => false,
) , $checkout->get_value('field_three'));

echo '</div>';
}

 

2. Validate checkout process

/**
* Validate Checkout Process
*/

add_action('woocommerce_checkout_process', 'validate_checkout_field_process');

function validate_checkout_field_process()
{
// if the field is set, if not then show an error message.
if (!$_POST['field_one']) wc_add_notice(__('Field One is required.') , 'error');
if (!$_POST['field_two']) wc_add_notice(__('Field Two is required.') , 'error');

}

3. Update value of fields as order meta in admin panel

/**
* Update value of fields as order meta in admin panel
*/

add_action('woocommerce_checkout_update_order_meta', 'update_checkout_fields_as_order_meta');

function update_checkout_fields_as_order_meta($order_id)
{


if (!empty($_POST['field_one'])) {
update_post_meta($order_id, 'field_one', sanitize_text_field($_POST['field_one']));
}

if (!empty($_POST['field_two'])) {
update_post_meta($order_id, 'field_two', sanitize_text_field($_POST['field_two']));
}

if (!empty($_POST['field_three'])) {
update_post_meta($order_id, 'field_three', sanitize_text_field($_POST['field_three']));
}
}

4. Displaying Additional information in admin panel after shipping address

/**
* Displaying Additional information in admin panel after shipping address
*/
function display_extra_order_data_after_order_details( $order ) { ?>

<div class="order_data_column">
<h4><?php _e( 'Additional Information' ); ?></h4>
<?php
echo '<p><strong>' . __( 'Field One' ) . ': </strong>' . get_post_meta( $order->id, 'field_one', true ) . '</p>';
echo '<p><strong>' . __( 'Field Two' ) . ': </strong>' . get_post_meta( $order->id, 'field_two', true ) . '</p>';
echo '<p><strong>' . __( 'Field Three' ) . ': </strong>' . get_post_meta( $order->id, 'field_three', true ) . '</p>'; ?>
</div>

<?php }

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'display_extra_order_data_after_order_details', 10, 1 );

Add a Comment

Your email address will not be published. Required fields are marked *