How to Edit/Delete Fields and Email in WooCommerce Custom Checkout Fields

WooCommerce is, without any doubt, a very powerful ecommerce plugin for WordPress. It is capable enough to set up and manage a successful ecommerce store of sizable proportions.

My previous article covered How to add additional custom fields to the WooCommerce checkout page. In this tutorial, I will continue the topic and explain how you could dynamically customize additional fields, such as removing the billing address, add/edit custom checkout fields, and saving these custom fields to the database. I will also discuss how you could add these custom fields to order emails.

Remove Additional Information From WooCommerce Checkout

The following code removes the address fields from the billing screen.

function woocommerce_remove_additional_information_checkout($fields){
    unset( $fields["billing_first_name"] );
    unset( $fields["billing_last_name"] );
    return $fields;
}
add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );

Add this code snippet to the functions.php located in the theme folder of the WordPress website.

Add WooCommerce Custom Checkout Fields

The following code will add a field to the checkout page, saves the data to the order meta, and displays the order meta in the orders admin. I received several queries about the process of adding multiple fields. To help address the issue, this code snippet has been modified to add two fields.

function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_text_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Input Text Field' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select',
                'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'Third Option' ) ),
                'required'      => true,
                'label' => __( 'Dropdown field' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' );

function cloudways_extra_checkout_fields(){

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php
       foreach ( $checkout->checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );

Save Data of WooCommerce Custom Checkout Fields

function cloudways_save_extra_checkout_fields( $order_id, $posted ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $posted['cloudways_text_field'] ) ) {
        update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );
    }
    if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( 'first', 'second', 'third' ) ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown'] );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );

Display Data of WooCommerce Custom Checkout Fields

function cloudways_display_order_data( $order_id ){  ?>
    <h2><?php _e( 'Extra Information' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Input Text Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Drop Down Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );

Display WooCommerce Admin Custom Order Fields

This code snippet will function as the shipping and billing address data and reveal inputs when the user clicks the little pencil icon.

function cloudways_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">

        <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4>
        <div class="address">
        <?php
            echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?>
        </div>
        <div class="edit_address">
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_text_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_dropdown', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

function cloudways_save_extra_details( $post_id, $post ){
    update_post_meta( $post_id, '_cloudways_text_field', wc_clean( $_POST[ '_cloudways_text_field' ] ) );
    update_post_meta( $post_id, '_cloudways_dropdown', wc_clean( $_POST[ '_cloudways_dropdown' ] ) );
}
add_action( 'woocommerce_process_shop_order_meta', 'cloudways_save_extra_details', 45, 2 );

Add WooCommerce Custom Fields to Order Emails

function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['instagram'] = array(
                'label' => __( 'Some field' ),
                'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
            );
    $fields['licence'] = array(
                'label' => __( 'Another field' ),
                'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ),
            );
    return $fields;
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );

If you wish to customize the email output,  you can add some text to any of the hooks available in the email templates.

function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {
    $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true );
    $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true );
    if( $plain_text ){
        echo 'The value for some field is ' . $cloudways_text_field . ' while the value of another field is ' . $cloudways_dropdown;
    } else {
        echo '<p>The value for <strong>input text field</strong> is ' . $cloudways_text_field. ' while the value of <strong>drop down</strong> is ' . $cloudways_dropdown . '</p>';
    }
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );

Summary

In this tutorial, I demonstrated how to add, edit, and save custom fields to the WooCommerce checkout page. I also added code to edit the email templates and add the custom fields’ information to the emails. If you face any issues with the code or would like to contribute to the discussion, do leave a comment below.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum