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

WooCommerce Provides the ability to create a new account in the checkout process withCustom FieldsThe Features. Great for collecting additional information about your customers, such as their preferred shipping address or phone number. However, sometimes these fields need to be edited or deleted.

In this tutorial, it will be shown how to edit or delete additional fields, such as deleting billing address, adding/editing custom checkout fields, and saving these custom fields to the database. You can customize the WooCommerce checkout process according to your business needs.

Removing Additional Information from WooCommerce Checkout

The following code removes the address field from the billing page.

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 your WordPress siteThemes folder in the functions.php fileCenter.

Adding WooCommerce Custom Checkout Fields

The following code will add a field to the checkout page, save the data to the order metadata, and display that order metadata on the order management page. I've received a few queries before about how to add multiple fields. To address this, the 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',
                
                'label' => __( 'Input Text Field' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select', 'options' => array(
                'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'Third Option' ), 'required' => true, __( 'Input Text Field' ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array(
                
                '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>

    checkout_fields['cloudways_extra_fields'] as $key =&gt; $field ) : ? &gt;

            get_value( $key ) ); ? &gt;
    </div>

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

Saving Data for WooCommerce Customized 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 ); }

Displaying data from 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 );

Show WooCommerce Admin Custom Order Fields

This code snippet will be used as delivery and billing address data and will be available when the user clicks on theSmall Pencil IconThe input box is displayed.

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">
            '_cloudways_text_field', 'label' =&gt; __( 'Some field' ), 'wrapper_class' =&gt; '_billing_company_ field' ) ); ? &gt;
             '_cloudways_dropdown', 'label' =&gt; __( 'Another field' ), 'wrapper_class' =&gt; '_billing_company_ field' ); ? &gt; ? field' ) ); ? &gt;
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

Adding 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['license'] = 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 want to customize the email output, you can add some text to any of the hooks available in the email template.

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 'The value for some field is ' . $cloudways_text_field .
    } 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 );

summarize

In the tutorial, it is demonstrated how to add, edit and save custom fields on the WooCommerce checkout page. It also adds the code to edit the email template and add the custom field's information to the email. If you guys have problems with the code or want to participate in the discussion, you can leave a comment below the article.

Frequently Asked Questions

Q: How do I customize the WooCommerce checkout fields?

1. Install and activate "Checkout Field Editor"Plugins.
2. Go to the checkout field editor.
3. Click "Add Field"and select the field type.
4. To edit an existing field, clickPencil icon next to the fieldThe
5. To remove a field, clickTrash can icon next to the fieldThe
6. Click "Save Changes" button to update the checkout page.

Q: How do I add custom fields in WooCommerce?

1. leave for WooCommerce > Checkout FieldsThe
2. Click "Add Field" to create a custom field.
3. optionField typeThe
4. Select where the custom fields will be displayed.
5. After adding and configuring the custom fields, click "Save Changes".

Q: How do I customize the WooCommerce checkout button?
Method 1: Modify via WooCommerce Settings

1. Go to WooCommerce > Settings > Checkout (or WooCommerce > Settings > Payments).
2. Find the "Checkout button text" setting and change it to the desired text.

Method 2: Customize with CSS

leave for Appearance > Customize > Additional CSS, add the following code:

.woocommerce-checkout .button {
    background-color: #FF5733; /* Change the background color */
    color: #fff; /* Change the text color */
    font-size: 16px; /* Adjust the font size */
}