WooCommerce is, without any doubt, a very powerful ecommerce plugin for WordPress. It is capable enough to set up and manage successful ecommerce store of sizable proportions.
In my previous article, I covered How to add additional custom fields into 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 save these custom fields to the database. I will also discuss how you could add these custom fields to order emails.
Remove Billing Address of WooCommerce Custom Checkout Fields
The following code removes the address fields from the billing screen.
|
1 2 3 4 5 6 |
function cloudways_billing_filter($fields){ unset( $fields["billing_first_name"] ); unset( $fields["billing_last_name"] ); return $fields; } add_filter( 'woocommerce_billing_fields', 'cloudways_billing_filter' ); |
Add this code snippet to the functions.php located in the theme folder of the WordPress website.
Addition of WooCommerce Custom Checkout Field
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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 the Data of Custom Checkout WooCommerce Fields
|
1 2 3 4 5 6 7 8 9 10 |
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 the Data of WooCommerce Custom Fields to User
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 the Data of WooCommerce Custom Fields in Admin
This code snippet will function as the shipping and billing address data and reveal inputs when the user clicks the little pencil icon.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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' ); |
|
1 2 3 4 5 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 output in the emails, you can add some text to any of the hooks available in the email templates.
|
1 2 3 4 5 6 7 8 9 10 |
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 ); |
Conclusion
In this tutorial, I demonstrated how you could you add, edit and save custom fields to the WooCommerce checkout page. I also added code to edit the email templates to add the information from the custom fields 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 owais.alam@cloudways.com
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
