Add a Custom Checkout Field in Woocommerce
In this blog post you will learn how to add a custom field that is not part of billing and shipping to your Woocommerce checkout page. In our example we add a PO Number above the Notes field.
Step 1: Add a New Field to the WooCommerce Checkout
In the first step, we display the new custom field on the Woocommerce checkout page and tell where it should be displayed, in this case above the “order notes”, for this we use the “woocommerce_before_order_notes” hook. The ID of the new field is “po_number”, we also need this in the next steps.
add_action( 'woocommerce_before_order_notes', 'arrowdesign_add_custom_checkout_field' );
function arrowdesign_add_custom_checkout_field( $checkout ) {
$current_user = wp_get_current_user();
$saved_po_number = $current_user->po_number;
woocommerce_form_field( 'po_number', array(
'type' => 'text',
'class' => array( 'form-row-wide' ),
'label' => 'PO Number',
'placeholder' => 'CA12345678',
'required' => true,
'default' => $saved_po_number,
), $checkout->get_value( 'po_number' ) );
}
Step 2: Validate the new Checkout Field
As we have chosen “required” => true in the first step, a “required” symbol (*) is displayed next to the label of our field. But this is not enough to make sure that the field is not empty. In this step we make sure that an error message is displayed if the field is empty.
add_action( 'woocommerce_checkout_process', 'arrowdesign_validate_new_checkout_field' );
function arrowdesign_validate_new_checkout_field() {
if ( ! $_POST['po_number'] ) {
wc_add_notice( 'Please enter your PO Number', 'error' );
}
}
Step 3: Save all and show the new Field in the WooCommerce Orders & Emails
When the field is filled in and the order is completed, the order is processed, but the PO Number value is lost because it is not stored. In this step we save the field with the value in the “Order Meta Data” so that it is displayed in the orders and order emails.
add_action( 'woocommerce_checkout_update_order_meta', 'arrowdesign_save_new_checkout_field' );function arrowdesign_save_new_checkout_field( $order_id ) {
if ( $_POST['po_number'] ) update_post_meta( $order_id, '_po_number', esc_attr( $_POST['po_number'] ) );
}add_action( 'woocommerce_admin_order_data_after_billing_address', 'arrowdesign_show_new_checkout_field_order', 10, 1 );
function arrowdesign_show_new_checkout_field_order( $order ) {
$order_id = $order->get_id();
if ( get_post_meta( $order_id, '_po_number', true ) ) echo '<p><strong>PO Number:</strong> ' . get_post_meta( $order_id, '_po_number', true ) . '</p>';
}add_action( 'woocommerce_email_after_order_table', 'arrowdesign_show_new_checkout_field_emails', 20, 4 );
function arrowdesign_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
if ( get_post_meta( $order->get_id(), '_po_number', true ) ) echo '<p><strong>PO Number:</strong> ' . get_post_meta( $order->get_id(), '_po_number', true ) . '</p>';
}
Conclusion
We hope this post was helpful and you now know how to add a custom field to your Woocommerce Checkout Page on your own website. You can find more articles here:
Read another Woocommerce post : ‘Woocommerce Single Product Page Hook Guide‘
For more excellent information on this topic, visit businessbloomer.com
Arrow Design, based in Dublin, Ireland, provides quality website design services in Dublin and beyond at affordable prices. If you would like help with implementing the above code, or any wordpress website development project, contact us. We love website design and it shows! We provide custom wordpress plugin development, website design training and lots more.
We do it all, so you don’t have to!
Related Posts
Woocommerce Account Page Hook Guide
In this article you will find a visual hook guide for the Woocommerce Account Pages, like the Login/Register page, the Downloads page or the Orders page.
Woocommerce Single Product Page Hook Guide
In this article you will find a visual hook guide for the Woocommerce Single Product Page. This should help you to quickly and easily find the hook positions on the page.
Woocommerce PHP – Product Categories by Product ID
In this tutorial you will learn how to check if a product is assigned to a tag, a category or a custom taxonomy. You can check if a product is is on the shop page, in the cart, in an order & more.
…We do more, so you can do less 🙂