Add Custom Fields WooCommerce Checkout Page

Add Custom Fields WooCommerce Checkout Page – In this post we’ll see how we can add custom fields to checkout page in WooCommerce.

Now question arises that why we need custom fields on checkout page. Sometimes, we need some extra information from customer like delivery time priority, shipping address is of office address or residence, etc.

We’ll perform this by creating one test plugin and with the help of filters and actions. WooCommerce provides hooks which can be used to add custom fields on WooCommerce Checkout Page.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

Let’s start with example plugin –

<?php

/**
 *  Plugin Name: Custom Checkout Field Webkul
 *  Description: A plugin to add custom field in checkout form
 *  Author: Webkul
 *  Author URI: https://webkul.com
 */

add_filter( 'woocommerce_checkout_fields', 'wk_add_custom_checkout_field' );

function wk_add_custom_checkout_field( $fields ) {
  return $fields;
}

In above code snippet, we added filter on hook ‘woocommerce_checkout_fields’ and return all default fields in callback function. This is a filter so it provides all default fields and we can append our custom field data in this array.

Lets add one custom field to shipping address section for address type. After that we’ll see how we can add special custom field other than with default one’s.

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;
}

In above code, we define arguments for our custom field like label, type, placeholder, etc.

This will add a field labeled Address Type in shipping address section. Please check below –

Now, if we want to add special or we can say separate custom field from default sections then we can do so by adding action on hook ‘woocommerce_after_order_notes’. Like this –

add_action( 'woocommerce_after_order_notes', 'wk_add_custom_checkout_field' );

function wk_add_custom_checkout_field( $checkout ) {
  echo '<div><h2>' . __( 'Shipping Address Type' ) . '</h2>';

  woocommerce_form_field( 'address_type', array(
      'type'          => 'text',
      'class'         => array( 'address-type' ),
      'label'         => __( 'Address Type' ),
      'placeholder'   => __( 'type' ),
    ), $checkout->get_value( 'address_type' ) );

  echo '</div>';
}

This will add the field after order notes section. Check below –

Now, we’ll see how to save these custom fields data. For this, we can use action hook ‘woocommerce_checkout_update_order_meta’.

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'] ) );
    }
}

We saved custom field data as metadata to order.

Reference –

http://hookr.io/filters/woocommerce_checkout_fields/

http://hookr.io/actions/woocommerce_checkout_update_order_meta/

Support