Let\’s suppose you want your customer to add their nickname as well on checkout form for better shipping expeience .
You can do so without any plugin or prior coding knowledge. All you need to do is to paste the below code in your theme\’s functions.php file and its done.
** You can either add this code directly to your functions.php file or you can use code-snippet plugin and add the below code in that snippet.
PHP snippet 1 of 3 : Add new field @woocommerce checkout
We will display the new field Nichkname on the WooCommerce Checkout page, and specifically above the “Order Notes”, which usually display in the shipping column.
/** * @snippet Add Custom Field @ WooCommerce Checkout Page * @author miqtiquedesigns * @testedwith WooCommerce 5.8 */ add_action( \'woocommerce_before_order_notes\', \'md_add_custom_checkout_field\' ); function bbloomer_add_custom_checkout_field( $checkout ) { $current_user = wp_get_current_user(); $saved_license_no = $current_user->nick_name; woocommerce_form_field( \'nick_name\', array( \'type\' => \'text\', \'class\' => array( \'form-row-wide\' ), \'label\' => \'Nick Name\', \'placeholder\' => \'kumar\', \'required\' => true, \'default\' => $saved_nick_name, ), $checkout->get_value( \'nick_name\' ) ); }
PHP snippet 2 of 3 : Validate new checkout field
Since we already made this field required by doing required=>true , we want user to see some message if they leave this field empty.
/** * @snippet Add Custom Field @ WooCommerce Checkout Page * @author miqtiquedesigns * @testedwith WooCommerce 5.8 */ add_action( \'woocommerce_checkout_process\', \'md_validate_new_checkout_field\' ); function md_validate_new_checkout_field() { if ( ! $_POST[\'nick_name\'] ) { wc_add_notice( \'Please enter your Nick Name\', \'error\' ); } }
PHP snippet 3 of 3 : Save & show new field @woocommerce orders & email
Now if the validation id passed , woocommerce will process the order but we didn\’t saved the nick name yet so its value will be lost. We will have to add a function to save and show this field\’s value inside order details and order email.
/** * @snippet Add Custom Field @ WooCommerce Checkout Page * @author miqtiquedesigns * @testedwith WooCommerce 5.8 */ add_action( \'woocommerce_checkout_update_order_meta\', \'md_save_new_checkout_field\' ); function bbloomer_save_new_checkout_field( $order_id ) { if ( $_POST[\'license_no\'] ) update_post_meta( $order_id, \'_nick_name\', esc_attr( $_POST[\'nick_name\'] ) ); } add_action( \'woocommerce_admin_order_data_after_billing_address\', \'md_show_new_checkout_field_order\', 10, 1 ); function bbloomer_show_new_checkout_field_order( $order ) { $order_id = $order->get_id(); if ( get_post_meta( $order_id, \'_nick_name\', true ) ) echo \'<p><strong>Nick Name:</strong> \' . get_post_meta( $order_id, \'_nick_name\', true ) . \'</p>\'; } add_action( \'woocommerce_email_after_order_table\', \'md_show_new_checkout_field_emails\', 20, 4 ); function bbloomer_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) { if ( get_post_meta( $order->get_id(), \'_nick_name\', true ) ) echo \'<p><strong>Nick Name:</strong> \' . get_post_meta( $order->get_id(), \'_nick_name\', true ) . \'</p>\'; }