This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

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

Updated on November 21, 2022

4 Min Read
how to edit or delete fields in woocommerce checkout page

WooCommerce comes with powerful features and one of them is custom fields for the checkout process. This can be useful for gathering additional information from your customers, such as their preferred shipping address or phone number. However, there may come a time when you need to edit or delete these fields for various reasons.

In this tutorial, I will show you how to edit or delete additional fields, such as removing the billing address, adding/editing custom checkout fields, and saving these custom fields to the database. This will also help you customize your WooCommerce checkout process to meet your business requirements.

Remove Additional Information From WooCommerce Checkout

Remove Billing Address of WooCommerce Custom Checkout Fields

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.

theme folder of the WordPress website

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

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

Input text field

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

additional information

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

Billing address

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now