How to modify the WooCommerce Checkout page.
The following tutorial has been added onto multiple times.
I am showing various basic modifications to the checkout page. I am also showing how to add custom fields to the backend Order Details screen and to various e-mails that are sent to the admin and the customer. By default the checkbox field gives a result of 1. I am also showing how this can be modified to instead show text. I also showing to to pre-check / pre select a checkbox. At the bottom I am showing a much longer code.
Renaming the “Place Order” button. Located bottom right.
// Checkout: Rename "Place Order" button text: https://businessbloomer.com/woocommerce-rename-place-order-button-checkout/
add_filter( 'woocommerce_order_button_text', 'bbloomer_rename_place_order_button' );
function bbloomer_rename_place_order_button() {
return 'Continue →';
}
Adding information to the left of the “Place Order” button.
/* Additional information below checkout button. https://businessbloomer.com/woocommerce-add-content-under-place-order-button-checkout/ */
add_action( 'woocommerce_review_order_after_submit', 'bbloomer_privacy_message_below_checkout_button' );
function bbloomer_privacy_message_below_checkout_button() {
echo '<p><small>Information to the left of the checkout button</small></p>';
}
Here is a screenshot of the original checkout page fields.
Remove (unset) specific fields.
/* -------- WooCommerce - checkout fields ---------- */
/* From Helga the Viking - Kathy. Comment out // the fields you want to keep. */
function kia_modify_default_address_fields( $fields ){
if( isset( $fields['company'] ) ) unset( $fields['company'] );
if( isset( $fields['country'] ) ) unset( $fields['country'] );
//if( isset( $fields['address_1'] ) ) unset( $fields['address_1'] );
if( isset( $fields['address_2'] ) ) unset( $fields['address_2'] );
//if( isset( $fields['city'] ) ) unset( $fields['city'] );
if( isset( $fields['state'] ) ) unset( $fields['state'] );
if( isset( $fields['postcode'] ) ) unset( $fields['postcode'] );
return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'kia_modify_default_address_fields' );
// The following fields are in the billing group.
function kia_remove_billing_phone_fields( $fields ){
if( isset( $fields['billing_phone'] ) ) unset( $fields['billing_phone'] );
// if( isset( $fields['billing_email'] ) ) $fields['billing_email']['class'] = array( 'form-row-wide' );
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'kia_remove_billing_phone_fields' );Remove the order notes field.
// https://businessbloomer.com/woocommerce-remove-order-notes-checkout-page/ // Removes the The order notes box. add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
Change the heading “Billing details” to “Fill in the below billing information.”
// Change the text above the billing fields
// https://stackoverflow.com/questions/44419189/woocommerce-3-0-change-billing-details-to-say-shipping-details-on-checkout
function wc_billing_field_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Billing details' :
$translated_text = __( 'Fill in the below billing information.', 'woocommerce' );
break;
}
return $translated_text;
}
add_filter( 'gettext', 'wc_billing_field_strings', 20, 3 );Result:
Required or not required
How to edit checkout fields to make them required or not required. An example is to make the company field required and the first_name not required.
// https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters
function sv_require_wc_company_field( $fields ) {
$fields['company']['required'] = true;
$fields['first_name']['required'] = false;
return $fields;
}
add_filter( 'woocommerce_default_address_fields',
Changing the placeholder text and labels.
// https://www.templatemonster.com/help/woocommerce-edit-placeholder-text-checkout-page.html
// https://gist.github.com/cryptexvinci/acfffd317ea6593d85f87191f92528c6
add_filter('woocommerce_default_address_fields', 'override_placeholder_fields');
function override_placeholder_fields( $fields ) {
$fields['first_name']['placeholder'] = 'First name placeholder';
$fields['last_name']['placeholder'] = 'Last name placeholder';
$fields['company']['placeholder'] = 'Company placeholder';
$fields['company']['label'] = 'Company label';
return $fields;
}
Change the order of the checkout fields
/**
* @snippet Move / Reorder Fields @ Checkout Page, WooCommerce version 3.0+
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode https://businessbloomer.com/?p=19571
* @author Rodolfo Melogli
* @compatible Woo 3.5.3
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_default_address_fields', 'bbloomer_reorder_checkout_fields' );
function bbloomer_reorder_checkout_fields( $fields ) {
// default priorities:
// 'first_name' - 10
// 'last_name' - 20
// 'company' - 30
// 'country' - 40
// 'address_1' - 50
// 'address_2' - 60
// 'city' - 70
// 'state' - 80
// 'postcode' - 90
// e.g. move 'company' above 'first_name':
// just assign priority less than 10. Moves company in billing and shipping area.
$fields['company']['priority'] = 8;
return $fields;
}
// For phone and e-mail it needs to be done the following way.
add_filter( 'woocommerce_billing_fields', 'bbloomer_move_checkout_email_field', 10, 1 );
function bbloomer_move_checkout_email_field( $address_fields ) {
$address_fields['billing_email']['priority'] = 5;
return $address_fields;
}
Result of moving company to (priority 10) and e-mail to (priority 5):
Example of moving the email field from billing to the order area below the shipping section.
// https://rudrastyh.com/woocommerce/reorder-checkout-fields.html
add_filter( 'woocommerce_checkout_fields', 'misha_billing_email_another_group' );
function misha_billing_email_another_group( $checkout_fields ){
// 1. We assign a field array to another group here
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Remove a field from a previous location
unset( $checkout_fields['billing']['billing_email'] );
return $checkout_fields;
}
Email field moved from billing to order section.
Add custom field.
Below the Phone and E-mail address fields I added a custom field. With a title of Another Field and a checkbox.
Custom field types in WooCommerce:
country, state, text, textarea, select (dropdown), radio, checkbox, password, datetime, datetime-local, date, month, time, week, number, email, url and tel.
Options one can add inside the array.
$args = array(
'type' => 'text',
'label' => '',
'description' => '',
'placeholder' => '',
'maxlength' => false,
'required' => false,
'autocomplete' => false,
'id' => $key,
'class' => array(),
'label_class' => array(),
'input_class' => array(),
'return' => false,
'options' => array(),
'custom_attributes' => array(),
'validate' => array(),
'default' => '',
'autofocus' => '',
'priority' => '',
);
https://pluginrepublic.com/add-custom-fields-woocommerce-product/
https://iconicwp.com/blog/the-ultimate-guide-to-adding-custom-woocommerce-user-account-fields/
Below the Phone and E-mail address fields I added a custom field. With a title of Another Field and a checkbox.
// https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
// https://rudrastyh.com/woocommerce/checkout-fields.html
add_action( 'woocommerce_after_checkout_billing_form', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h3>' . __('Another field') . '</h3>';
woocommerce_form_field( 'my_field_name', array(
'type' => 'checkbox', // text, textarea, select, radio, checkbox, password.
'required' => 'true',
'class' => array('my-field-class form-row-wide'),
'label' => __('Additional field'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}
We then need to validate the field. If someone does not fill out the field they will get an error message.
(This is only if you want to change the default error message.)
/**
* 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['my_field_name'] )
wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}
To save the field to the order details add the following code.
/**
* 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>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
}
Here is an example of adding multiple custom fields and changing the order notes label.
/* Change order notes placeholder field - https://gist.github.com/mikejolley/1800395 */
add_filter('woocommerce_checkout_fields', 'custom_woocommerce_checkout_fields');
function custom_woocommerce_checkout_fields( $fields ) {
$fields['order']['order_comments']['label'] = 'Delivery dates? Any other information we should know? ';
return $fields;
}
/* 1. Adds a custom field. NB. I am using some Norwegian words in the below text.
* 2. Then adds a validate error message if person does not fill out the field.
* 3. Then adds the custom field to the order page. */
add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h3>' . __('') . '</h3>';
woocommerce_form_field( 'billing_year', array(
'type' => 'checkbox',
'required' => 'true',
'class' => array('year-class form-row-wide'),
'label' => __('I am over 18.'),
'placeholder' => __(''),
), $checkout->get_value( 'year' ));
echo '</div>';
woocommerce_form_field( 'forening', array(
'type' => 'text',
'required' => 'true',
'class' => array('forening-class form-row-wide'),
'label' => __('Which sportsclub/organization or class do you belong to?'),
), $checkout->get_value( 'forening' ));
woocommerce_form_field( 'antall_personer', array(
'type' => 'text',
'required' => 'true',
'class' => array('antall-personer-class form-row-wide'),
'label' => __('How many will sell these products?'),
'priority' => 28,
), $checkout->get_value( 'antall_personer' ));
woocommerce_form_field( 'kontaktperson', array(
'type' => 'select',
'required' => 'true',
'class' => array('kontaktperson-class form-row-wide'),
'label' => __('Contact from our company'),
'options' => array( // options for <select> or <input type="radio" />
'' => 'Please select', // empty values means that field is not selected
'ingen_kontakt_person' => 'No contact person', // 'value'=>'Name'
'Regine' => 'Employee 1',
'mei_mei' => 'Employee 2'
)
), $checkout->get_value( 'kontaktperson' ));
}
/**
* 2. Process the checkout - We then need to validate the field. If someone does not fill out the field they will get an error message.
*/
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['year'] )
wc_add_notice( __( 'Fyll ut: Bekreft alder' ), 'error' );
if ( ! $_POST['forening'] )
wc_add_notice( __( 'Fyll ut: Hvilken idrettslag/ forening/ klasse?' ), 'error' );
if ( ! $_POST['antall_personer'] )
wc_add_notice( __( 'Fyll ut: Antall personer som skal selge?' ), 'error' );
}
/**
* 3. 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>'.__('Over 18').':</strong> ' . get_post_meta( $order->id, 'Over 18', true ) . '</p>';
echo '<p><strong>'.__('Foreningen').':</strong> ' . get_post_meta( $order->id, 'Foreningen', true ) . '</p>';
echo '<p><strong>'.__('Antall personer').':</strong> ' . get_post_meta( $order->id, 'Antall personer', true ) . '</p>';
}
Another version of adding multiple custom fields.
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.
I have also added a Github Gist with the code.
(It is probably better to copy the code directly from the Gist.)
Checkout page result:
Order details screen result:
Admin and customer e-mail result:
Instead of placing the very long code inside the child theme functions file I added a line of code inside the f
unctions.php file calling for another file. Like so:
require_once( get_stylesheet_directory() . '/inc/woocommerce-code.php' );
The woocommerce-code.php file inside the folder inc will be read by the functions file. Making all the code inside of it available.
/* --------- 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.
*/
// 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, //NB! 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>';
}
Additional Resources:
https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
https://www.cloudways.com/blog/woocommerce-shortcodes-comprehensive-guide/
https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
https://jeroensormani.com/ultimate-guide-to-woocommerce-checkout-fields/
(Resources I need to check out closer.)
https://rudrastyh.com/woocommerce/custom-checkout-validation.html
very useful info, thank you for sharing with us!
Very nice post, No doubt you have mentioned very helpful references, But I am following this source: https://codup.co/woocommerce-shortcodes-guide/ If you think it is helpful you can add this in your resource section.
Thanks For Awsome Article
that was very helpful thanks a lot