Skip to content

Instantly share code, notes, and snippets.

@paaljoachim
Last active May 29, 2022 00:49
Show Gist options
  • Save paaljoachim/6270bd2c85123190d16e23c1ab73a83e to your computer and use it in GitHub Desktop.
Save paaljoachim/6270bd2c85123190d16e23c1ab73a83e to your computer and use it in GitHub Desktop.
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>';
}
@lisakoubou
Copy link

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

@paaljoachim
Copy link
Author

Hey Lisa @lisakoubou
I would basically search on the web for other similar tutorials. Then on how to add a drop down.
Good luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment