• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

21 August - 2019 By Paal Joachim 8 Comments
Last updated on: November 8, 2019

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.

Original-WooCommerce-Check-Out-Page  

 

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:  

WooCommerce-Check-Out-Page-removed-fields  

 

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',

  WooCommerce-Check-Out-Page-changed-required-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;
}

 

 

WooCommerce-Check-Out-Page-changed-placeholder-label-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):

 

WooCommerce-Checkout-Page-reorder-fields

 

 

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;

}

 

WooCommerce-Checkout-Page-reorder-fields-move-email-order

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>';

}

 

WooCommerce-Check-Out-Page-add-custom-fields

 

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.

 

WooCommerce-Check-Out-Page-custom-fields-example

 

/* 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:

WooCommerce-Checkout-multiple-custom-fields-priority 

Order details screen result:

WooCommerce-Order-Details-screen

Admin and customer e-mail result:

WooCommerce-order-emails


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/

https://stackoverflow.com/questions/45905237/add-a-custom-checkbox-in-woocommerce-checkout-which-value-shows-in-admin-edit-or

https://wordpress.stackexchange.com/questions/108553/woocommerce-checkout-page-custom-checkbox-ticked/140161#140161

(Resources I need to check out closer.)
https://rudrastyh.com/woocommerce/custom-checkout-validation.html

Share this:

  • Email

Categories: WooCommerce, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. Daniel says

    24 September - 2020

    Hi Paal, this is gold, thank you so much for sharing! I was wondering, do you know if it’s still working? I’m running WordPress 5.5.1 and plugin version 3.1.0.
    I was trying to use your code but there are no changes (I just need to change the value when a checkbox is selected, from “1” to “Si”, but I couldn’t make it work). Thank you very much for any feedback on this regard.

    Reply
    • Paal Joachim says

      4 October - 2020

      Hey Daniel. I finally approved your comment.
      I have not tested the code in a while, so I will let someone else who drops by answer you.
      I assume you have by now figured it out. Do let us know how it went.

      Have a great day!

      Reply
  2. website design Washington dc says

    9 September - 2020

    php template is used to create product pages, while cart.php builds out the shopping cart page. By editing these template files or creating new ones, you can …

    Reply
  3. explosiongame says

    16 June - 2020

    yes..very good

    Reply
  4. hole io says

    6 May - 2020

    very useful info, thank you for sharing with us!

    Reply
  5. Zubairkhan says

    23 April - 2020

    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.

    Reply
  6. emdadkhodrokaraj says

    28 October - 2019

    Thanks For Awsome Article

    Reply
  7. mehrdad says

    8 September - 2019

    that was very helpful thanks a lot

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.