Tutorial: WooCommerce Checkout: Add multiple custom fields to billing area. This code adds priority placement of field. Shows the custom fields in the backend Order Details screen and in e-mails to the admin and customer. I have also adjusted the checkbox field to give a text result instead of a value of 1. Checkbox is also pre-selected.
/* --------- Adds custom fields using filters. ------ | |
The below custom fields shows various types one can use. | |
It is then displayed in the backend Order Details page and in admin and customer e-mails. | |
Checkboxes by default result only show the number 1 when clicked. I have added code so that when the a checkbox is clicked it will | |
show text such as On and Yes. Checkbox is also pre-selected. | |
Tutorial: https://easywebdesigntutorials.com/woocommerce-modifying-the-checkout-page/ | |
*/ | |
// Initial inspiration: https://businessbloomer.com/woocommerce-add-shipping-phone-checkout/ | |
// My Custom Fields | |
// Can be added to billing, shipping or order area. For the account page use the word account. | |
add_filter( 'woocommerce_checkout_fields', 'custom_fields_checkout' ); | |
function custom_fields_checkout( $fields ) { | |
$fields['billing']['billing_checkbox'] = array( | |
'label' => 'Checkbox', | |
'type' => 'checkbox', | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 26, | |
); | |
$fields['billing']['billing_text'] = array( | |
'label' => 'Text', | |
'type' => 'text', | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 27, | |
); | |
$fields['billing']['billing_textarea'] = array( | |
'label' => 'Text area', | |
'type' => 'textarea', | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 28, | |
); | |
// Added below the order notes area. | |
$fields['order']['billing_date'] = array( | |
'label' => 'Date', | |
'type' => 'date', | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 29, | |
); | |
// Added below the order notes area. | |
$fields['order']['billing_checkbox2'] = array( | |
'label' => 'Checkbox2', | |
'type' => 'checkbox', | |
'default' => 1, //This will pre-select the checkbox | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 28, | |
); | |
// Added below the order notes area. | |
$fields['order']['billing_dropdown'] = array( | |
'label' => 'Drop Down', | |
'required' => true, | |
'class' => array( 'form-row-wide' ), | |
'priority' => 28, | |
'type' => 'select', | |
'options' => array( // options for <select> or <input type="radio" /> | |
'' => 'Please select', // empty values means that field is not selected | |
// 'value'=>'Name' | |
'Option 1' => 'Option 1 text', | |
'Option 2' => 'Option 2 text', | |
'OPtion 3' => 'Option 3 text' | |
) | |
); | |
return $fields; | |
} | |
// Save the custom checkout fields in the order meta, when checkbox has been checked | |
// https://stackoverflow.com/questions/12958193/show-custom-field-on-order-in-woocommerce | |
// NB! Use this instead: https://stackoverflow.com/questions/45905237/add-a-custom-checkbox-in-woocommerce-checkout-which-value-shows-in-admin-edit-or | |
// Custom fields that were added to the Order area will here be shown in the Billing area inside the WP backend WooCommerce -> Order and "Order Details" page. | |
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['billing_checkbox'] ) ) | |
update_post_meta( $order_id, 'billing_checkbox', $_POST['billing_checkbox'] ); | |
if ( ! empty( $_POST['billing_checkbox2'] ) ) | |
update_post_meta( $order_id, 'billing_checkbox2', $_POST['billing_checkbox2'] ); | |
} | |
// Display the custom field result on the order edit page (backend) when checkbox has been checked | |
// https://stackoverflow.com/questions/45905237/add-a-custom-checkbox-in-woocommerce-checkout-which-value-shows-in-admin-edit-or | |
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_on_order_edit_pages', 10, 1 ); | |
function display_custom_field_on_order_edit_pages( $order ){ | |
$billing_checkbox = get_post_meta( $order->get_id(), 'billing_checkbox', true ); | |
if( $billing_checkbox == 1 ) | |
echo '<p><strong>Checkbox: </strong> <span style="color:red;">On</span></p>'; | |
$billing_checkbox2 = get_post_meta( $order->get_id(), 'billing_checkbox2', true ); | |
if( $billing_checkbox2 == 1 ) | |
echo '<p><strong>Checkbox 2: </strong> <span style="color:red;">Yes</span></p>'; | |
} | |
// Display fields in the backend Order details screen. | |
add_action( 'woocommerce_admin_order_data_after_billing_address', 'customfields_billing_checkbox_checkout_display' ); | |
function customfields_billing_checkbox_checkout_display( $order ){ | |
echo '<p><b>Text:</b> ' . get_post_meta( $order->get_id(), '_billing_text', true ) . '</p>'; | |
echo '<p><b>Text Area:</b> ' . get_post_meta( $order->get_id(), '_billing_textarea', true ) . '</p>'; | |
echo '<p><b>Date:</b> ' . get_post_meta( $order->get_id(), '_billing_date', true ) . '</p>'; | |
echo '<p><b>Drop Down:</b> ' . get_post_meta( $order->get_id(), '_billing_dropdown', true ) . '</p>'; | |
} | |
// Display fields in the admin and customer e-mails. | |
// https://www.tychesoftwares.com/how-to-customize-woocommerce-order-emails/ | |
add_action( 'woocommerce_email_after_order_table', 'ts_email_after_order_table', 10, 4 ); | |
function ts_email_after_order_table( $order, $sent_to_admin, $plain_text, $email ) { | |
echo '<h2>Additional information</h2>'; | |
echo '<p><strong>'.__('Text').':</strong> <br/>' . get_post_meta( $order->get_id(), '_billing_text', true ) . '</p>'; | |
echo '<p><strong>'.__('Text Area').':</strong> <br/>' . get_post_meta( $order->get_id(), '_billing_textarea', true ) . '</p>'; | |
echo '<p><strong>'.__('Date').':</strong> <br/>' . get_post_meta( $order->get_id(), '_billing_date', true ) . '</p>'; | |
echo '<p><strong>'.__('Drop Down').':</strong> <br/>' . get_post_meta( $order->get_id(), '_billing_dropdown', true ) . '</p>'; | |
$billing_checkbox = get_post_meta( $order->get_id(), 'billing_checkbox', true ); | |
if( $billing_checkbox == 1 ) | |
echo '<p><strong>Checkbox: </strong> <span style="color:red;">On</span></p>'; | |
$billing_checkbox2 = get_post_meta( $order->get_id(), 'billing_checkbox2', true ); | |
if( $billing_checkbox2 == 1 ) | |
echo '<p><strong>Checkbox 2: </strong> <span style="color:red;">Yes</span></p>'; | |
} | |
This comment has been minimized.
This comment has been minimized.
Hey Lisa @lisakoubou |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
very helpful - I am trying to add a dropdown. I got everything working but the display on the backend. It just shows the label and not the option