How to add custom field to WooCommerce checkout

WooCommerce is one of the fastest growing E-commerce platform on the internet. It comes with lots of built-in features and functionality which allows users to easily build a small to medium size online shopping website.

Quick Tip : Automatically add product to cart on visit in WooCommerce

In one of my previous posts, we have seen how we can remove default WooCommerce checkout fields. In this tutorial, we are going to add a custom field to WooCommerce checkout page in WordPress.

To add a custom field we need to follow the steps given below:

1. Add a new custom field.
2. Validate the custom field.
3. Save the values of custom field when user place the order.
4. Display the values of custom field on the order page in the WordPress dashboard.

Step 1: Add a new custom field.

Paste the following code in your functions.php file.

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
 
function my_custom_checkout_field( $checkout ) {
 
    echo '<div id="my_custom_checkout_field"><h2>' . __('Extra Information') . '</h2>';
 
    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
        ), $checkout->get_value( 'my_field_name' ));
 
    echo '</div>';
 
}

This will output a field as show in image below.

how-to-add-custom-field-to-woocommerce-checkout-step-1

Step 2: Validate the custom field.

In the next step, we are going to validate the field. For this example, I will make it a required field.

/**
 * Validate the custom field.
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
 
function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}

This code will generate an error, if our custom field is left empty.

how-to-add-custom-field-to-woocommerce-checkout-step-2

Step 3. Save the values of custom field.

The following code will save the value of custom field when user hits the “Place Order” button.

/**
 * Save the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
 
function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'my_field_name', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

 

Step 4: Display the values of custom field on the order page in the WordPress dashboard.

Finally, we are going to display the value of custom field on the order page of WordPress dashboard. To do this, simply paste the following code to your functions.php file.

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
 
function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Extra Information').':</strong> ' . get_post_meta( $order->id, 'my_field_name', true ) . '</p>';
}

 

Adding a custom special field to WooCommerce Checkout step 4

Display the values of custom field on the order page in the WordPress dashboard.

6 Comments

  1. The tutorial is great, just if you were following some consistency in the naming of the field. The problem that Pablo is getting comes from this line: get_post_meta( $order->id, ‘extra-field’, true ). We don’t have field called extra-field so that’s why he doesn’t get anything on the front end.
    I used the following code and it worked ok:

    //Custom field in checkout page for wishes
    add_action( ‘woocommerce_after_order_notes’, ‘wish_field’ );
    function wish_field( $checkout ) {
    echo ”;
    woocommerce_form_field( ‘wish_field’, array(
    ‘type’ => ‘textarea’,
    ‘class’ => array(‘form-row-wide’),
    ‘label’ => __(‘Your wishes to the recipient’),
    ‘placeholder’ => __(‘Add your personal wishes to the recipient of the gift’),
    ), $checkout->get_value( ‘wish_field’ ));

    echo ”;
    }

    //Save the order meta
    add_action( ‘woocommerce_checkout_update_order_meta’, ‘wish_field_admin_save’ );
    function wish_field_admin_save( $order_id ) {
    if ( ! empty( $_POST[‘wish_field’] ) ) {
    update_post_meta( $order_id, ‘wish_field’, sanitize_text_field( $_POST[‘wish_field’] ) );
    }
    }

    //Display field value on the admin order page
    add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘wish_field_admin_display’, 10, 1 );
    function wish_field_admin_display($order){
    echo ‘‘.__(‘Wish message’).’: ‘ . get_post_meta( $order->id, ‘wish_field’, true ) . ”;
    }

    Reply

Leave a Comment.