We are now at part 1: modifications of the current fields seen in the checkout page.
Next up is part 2: Add custom fields to the Checkout page
Here is the default cart page using the theme Twenty Twenty Two.
Rename the heading “Billing details” to “Fill in the below information.”
/* Rename the heading text "billing details".
/* 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 );Rename “PLACE ORDER” button text to “CONTINUE ->”.
/* Rename the "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 →';
}The button text changes into “CONTINUE ->” and uses the following CSS.
.woocommerce-page .woocommerce-checkout button#place_order, .woocommerce-page.woocommerce-order-pay button#place_order {
width: 100%;
text-transform: uppercase;
}Add additional text information below 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 below the checkout button</small></p>';
}Remove the order notes section.
/* Removes the The order notes field: https://businessbloomer.com/woocommerce-remove-order-notes-checkout-page/ */
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );Remove (unset) specific fields.
/* From Helga the Viking - Kathy. Comment out // the fields you want to keep. I am keeping: address 1, city and postcode. */
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 section. I am keeping both email and phone. */
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' );Required or not required.
/* Adds a not required to a lot of fields: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters */
function custom_override_default_fields( $fields ) {
$fields['first_name']['required'] = false;
$fields['address_1']['required'] = false;
$fields['city']['required'] = false;
$fields['postcode']['required'] = false;
return $fields;
}
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_fields' );Rename placeholder text.
/* Rename placeholders: 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['address_1']['placeholder'] = 'Street address placeholder';
$fields['city']['placeholder'] = 'City placeholder';
$fields['postcode']['placeholder'] = 'Post code placeholder';
return $fields;
}Rename labels.
Fields are split into billing, shipping and order sections. For some fields one can do the general approach to all sections, but for other fields such as postcode and email one needs to add a billing section to it.
/* Rename labels. */
add_filter('woocommerce_checkout_fields', 'override_label_fields');
add_filter('woocommerce_default_address_fields', 'override_label_fields');
function override_label_fields( $fields ) {
$fields['first_name']['label'] = 'Your First name';
$fields['last_name']['label'] = 'Your Last name';
$fields['address_1']['label'] = 'Your Street address';
$fields['city']['label'] = 'Your City';
return $fields;
}A mix of required, placeholder and labels.
The following are fields that are in the billing section.
add_filter('woocommerce_checkout_fields', 'override_billing_fields');
function override_billing_fields( $fields ) {
$fields['billing']['billing_postcode']['label'] = 'Your Post code';
$fields['billing']['billing_phone']['required'] = false;
$fields['billing']['billing_phone']['label'] = 'Your Phone number';
$fields['billing']['billing_phone']['placeholder'] = 'Phone number placeholder';
$fields['billing']['billing_email']['required'] = false;
$fields['billing']['billing_email']['label'] = 'Your Email';
$fields['billing']['billing_email']['placeholder'] = 'Email placeholder';
return $fields;
}Change the order of the checkout fields.
/* Moving fields around:
https://www.businessbloomer.com/woocommerce-move-reorder-fields-checkout-page/ */
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['postcode']['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_phone']['priority'] = 5;
$address_fields['billing_email']['priority'] = 7;
return $address_fields;
}The result of the various code adjustments:
Moving a field to another section/group.
The following example the email field will be moved from the billing section/group into the order group. To be added below the Order notes field.
// 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;
}Modify the Additional information section.
The default Order notes section looks like this:
Change the Order notes placeholder.
/* Placeholder changed to "Notes about your order..."
add_filter( 'woocommerce_checkout_fields' , 'change_order_notes_placeholder' );
function change_order_notes_placeholder( $fields ) {
$fields['order']['order_comments']['placeholder'] = _x('Notes about your order...', 'placeholder', 'woocommerce');
return $fields;
}Rename the titles: “Billing details”, “Additional information” and “Your order”.
Using translation code.
/* Changing Billing details, Additional information and Your order titles:
https://stackoverflow.com/questions/52689697/change-wording-on-woocommerce-checkout-page */
function th_wc_order_review_strings( $translated_text, $text, $domain ) {
if(is_checkout()){
switch ($translated_text) {
case 'Billing details' :
$translated_text = __( 'Billing', 'woocommerce' );
break;
case 'Additional information':
$translated_text = __('Add additional comments.', 'woocommerce');
break;
case 'Your order':
$translated_text = __('My Order', 'woocommerce');
break;
case 'Product':
$translated_text = __('Your Product', 'woocommerce');
break;
}
}
return $translated_text;
}
add_filter( 'gettext', 'th_wc_order_review_strings', 20, 3 );The result:
Add featured thumbnails to product list.
/* Add featured images to the product list.
https://www.businessbloomer.com/woocommerce-show-product-images-checkout-page/ */
add_filter( 'woocommerce_cart_item_name', 'bbloomer_product_image_review_order_checkout', 9999, 3 );
function bbloomer_product_image_review_order_checkout( $name, $cart_item, $cart_item_key ) {
if ( ! is_checkout() ) return $name;
$product = $cart_item['data'];
$thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) );
return $thumbnail . $name;
}
The result of adding featured images to the product list:
Modifying required – error notices.
If one does not fill in the required fields a message will show up above the fields similar to what we see here.
Instead of listing up the fields like the above we can instead have one message and red text above each field that is required but have not been filled in.
Removing the error messages and replacing with one message.
/* Validate fields:
https://njengah.com/woocommerce-change-checkout-error-messages/
https://quadlayers.com/change-woocommerce-checkout-error-messages/ */
add_action('woocommerce_after_checkout_validation','ShowOneError',999,2);
function ShowOneError( $fields, $errors ){
// In case any validation errors.
if( !empty( $errors->get_error_codes() ) ) {
// Remove all existing error messages.
foreach( $errors->get_error_codes() as $code ) {
$errors->remove( $code );
}
// Display custom single error message.
$errors->add('validation','Fill in the required fields *.');
}
}The CSS:
/* Checkout: error message box. */
.woocommerce .woocommerce-error[role=alert] {
margin: 0;
/* background: red; */
border: solid 1px #a00;
color: #a00;
}
/* Checkout required fields * symbol. */
.woocommerce form .form-row .required {
visibility: visible;
color: #a00;
}Adding red text above each field that is required but have not been filled in.
/* Add text above each required field that has not been filled in.
https://www.businessbloomer.com/woocommerce-display-required-field-errors-inline-checkout/ */
add_filter( 'woocommerce_form_field', 'bbloomer_checkout_fields_in_label_error', 10, 4 );
function bbloomer_checkout_fields_in_label_error( $field, $key, $args, $value ) {
if ( strpos( $field, '</label>' ) !== false && $args['required'] ) {
$error = '<span class="error" style="display:none">';
$error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );
$error .= '</span>';
$field = substr_replace( $field, $error, strpos( $field, '</label>' ), 0);
}
return $field;
}The CSS:
/* Required error messages above each field. */
.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #e2401c;
display: block !important;
font-weight: bold;
}The result:
Showing one error message above the fields and error messages above each field.
Various resources:
(Before the code I have also added links to resources I used.)
https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters
https://woocommerce.com/posts/customize-checkout-fields-woocommerce/
https://www.businessbloomer.com/woocommerce-rename-place-order-button-checkout/
https://rudrastyh.com/woocommerce/reorder-checkout-fields.html
https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
https://quadlayers.com/change-woocommerce-checkout-error-messages/
This tutorial was originally written 21 August 2019.
