Menu Close
    Searching for an experienced Woocommerce Development Company ?

    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.

    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 –

    Add Custom Fields WooCommerce Checkout Page

    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

    Still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/

    Thanks for Your Time! Have a Good Day!

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index