How to add extra fields to the Woocommerce Checkout page and have those values get sent in the order email.
This expands on a tutorial here.
We will be adding two extra checkout fields, “Student’s Name” and “Teacher’s” Name, both text inputs. First we create the fields, then save them. We will also show them in the order in the dashboard as well as send the info through the new order email.
The first function creates the field. Put all of these in your theme’s functions file.
/** * Add the field to the checkout */ add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' ); function my_custom_checkout_field( $checkout ) { echo '<div id="my_custom_checkout_field"><h2>' . __('School Info') . '</h2>'; woocommerce_form_field( 'student_name', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide'), 'label' => __('Student\'s Name' . ' <abbr class="required" title="required">*</abbr>'), 'placeholder' => __('Name'), ), $checkout->get_value( 'student_name' )); woocommerce_form_field( 'student_teacher', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide'), 'label' => __('Student\'s Teacher' . ' <abbr class="required" title="required">*</abbr>'), 'placeholder' => __('Teacher\'s Name'), ), $checkout->get_value( 'student_teacher' )); echo '</div>'; } //
Next we process the fields when we submit and check to see if they’re required. In this case, we will require them:
/** * Process the checkout */ add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process'); function my_custom_checkout_field_process() { // Check if set, if its not set add an error. if ( ! $_POST['student_name'] ) wc_add_notice( __( '<strong>Student\'s name</strong> is a required field.' ), 'error' ); if ( ! $_POST['student_teacher'] ) wc_add_notice( __( '<strong>Teachers\'s name</strong> is a required field.' ), 'error' ); } //
Next we save the values, if not empty, to the orders meta:
/** * Update the order meta with field value */ add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' ); function my_custom_checkout_field_update_order_meta( $order_id ) { if ( ! empty( $_POST['student_name'] ) ) { update_post_meta( $order_id, 'Student Name', sanitize_text_field( $_POST['student_name'] ) ); } if ( ! empty( $_POST['student_teacher'] ) ) { update_post_meta( $order_id, 'Teacher Name', sanitize_text_field( $_POST['student_teacher'] ) ); } }
This function will display the values on the order edit page in the backend under orders:
/** * Display field value on the order edit page */ add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 ); function my_custom_checkout_field_display_admin_order_meta($order){ echo '<p><strong>'.__('Student Name').':</strong> ' . get_post_meta( $order->id, 'Student Name', true ) . '</p>'; echo '<p><strong>'.__('Teacher Name').':</strong> ' . get_post_meta( $order->id, 'Teacher Name', true ) . '</p>'; }
/** * Display field value on the order edit page */ add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 ); function my_custom_checkout_field_display_admin_order_meta($order){ echo '<p><strong>'.__('Student Name').':</strong> ' . get_post_meta( $order->id, 'Student Name', true ) . '</p>'; echo '<p><strong>'.__('Teacher Name').':</strong> ' . get_post_meta( $order->id, 'Teacher Name', true ) . '</p>'; }
Lastly we can send the values out through the email. There are a number of emails to choose from. We will choose the on located here: Dashboard > Woocommerce > Settings > Emails (tab) > New Order. At the bottom of this page, you can see the html email template. Open thatĀ up and place the following in that file.
<?php if ( get_post_meta( $order->id, 'Student Name', true ) ) : ?> <p><strong><?php _e( 'Student\'s Name:', 'woocommerce' ); ?></strong> <?php echo get_post_meta( $order->id, 'Student Name', true ) ?></p> <?php endif; ?> <?php if ( get_post_meta( $order->id, 'Teacher Name', true ) ) : ?> <p><strong><?php _e( 'Teacher\'s Name:', 'woocommerce' ); ?></strong> <?php echo get_post_meta( $order->id, 'Teacher Name', true ) ?></p> <?php endif; ?>