Customize Addresses Fields on Woocommerce My Account and Checkout

  • Home
  • Languages
  • PHP
  • Customize Addresses Fields on Woocommerce My Account and Checkout

Customize addresses fields on WooCommerce My account and Checkout

The hook woocommerce_checkout_fields only allow customizations on checkout page and will not affect the My account "Addresses" section fields.

The following will affect both My account "Addresses" section fields and checkout fields, allowing to make billing and shipping fields customized also on the related my account section.

1) For addresses fields (both billing and shipping) on My account and checkout:

In some cases you need to use this filter for addresses fields and it's applied to all billing and shipping default fields:

// Billing and Shipping fields on my account edit-addresses and checkout
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );
function custom_override_default_address_fields( $fields ) {
    $fields['first_name']['label'] = 'First name';
    $fields['last_name']['label'] = 'Last name';
    $fields['company']['label'] = 'Company name';
    $fields['address_1']['label'] = 'Street address';
    $fields['address_2']['label'] = 'Apartment, unit, etc.';
    $fields['city']['label'] = 'City';
    $fields['country']['label'] = 'Country';
    $fields['state']['label'] = 'County/State';
    $fields['postcode']['label'] = 'Postcode';

    return $fields;
}

You can use WooCommerce conditional tags is_account_page() and is_checkout() to target my account pages or checkout page…

2) For Billing fields on my account edit-addresses and checkout:

// Billing fields on my account edit-addresses and checkout
add_filter( 'woocommerce_billing_fields' , 'custom_billing_fields' );
function custom_billing_fields( $fields ) {

    // Billing Fields
    $fields['billing_first_name']['label'] = 'First name';
    $fields['billing_last_name']['label'] = 'Last name';
    $fields['billing_company']['label'] = 'Company name';
    $fields['billing_address_1']['label'] = 'Street address';
    $fields['billing_address_2']['label'] = 'Apartment, unit, etc.';
    $fields['billing_city']['label'] = 'City';
    $fields['billing_country']['label'] = 'Country';
    $fields['billing_state']['label'] = 'County/State';
    $fields['billing_postcode']['label'] = 'Postcode';
    $fields['billing_email']['label'] = 'Email';
    $fields['billing_phone']['label'] = 'Phone';

    return $fields;
}

3) For Shipping fields on my account edit-addresses and checkout

// Shipping fields on my account edit-addresses and checkout
add_filter( 'woocommerce_shipping_fields' , 'custom_shipping_fields' );
function custom_shipping_fields( $fields ) {

    // Shipping Fields
    $fields['shipping_first_name']['label'] = 'First name';
    $fields['shipping_last_name']['label'] = 'Last name';
    $fields['shipping_company']['label'] = 'Company name';
    $fields['shipping_address_1']['label'] = 'Street address';
    $fields['shipping_address_2']['label'] = 'Apartment, unit, etc.';
    $fields['shipping_city']['label'] = 'City';
    $fields['shipping_country']['label'] = 'Country';
    $fields['shipping_state']['label'] = 'County/State';
    $fields['shipping_postcode']['label'] = 'Postcode';
    $fields['shipping_email']['label'] = 'Email';
    $fields['shipping_phone']['label'] = 'Phone';

    return $fields;
}

4) All (other) fields only on checkout:

// All fields only on checkout
add_filter( 'woocommerce_checkout_fields' , 'other_custom_checkout_fields' );
function other_custom_checkout_fields( $fields ) {

    // Account Fields
    $fields['account']['account_username']['label'] = 'Username or email';
    $fields['account']['account_password']['label'] = 'Password';

    // Order Fields
    $fields['order']['order_comments']['label'] = 'Order notes';

    return $fields;
}

5) Also depending on the selected country, you should need to use the filters:

  • woocommerce_country_locale_field_selectors
  • woocommerce_get_country_locale_default

Those are located on WC_Country Class.

Code goes in functions.php file of your active child theme (or active theme).

Related official documentation: Customizing checkout fields using actions and filters

Customizing my-account addresses fields in Woocommerce 3

In My account > Adresses section, the below hooked functions will:

  • remove "Address 2" billing and shipping fields
  • reorder billing and shipping address fields
  • reorder billing Email and phone fields (after first and last names)
  • remove "Address 2" from display

You forgot the "country" field that you can reorder easily in the $sorted_fields array…

The code:

// Account Edit Adresses: Remove and reorder addresses fields
add_filter(  'woocommerce_default_address_fields', 'custom_default_address_fields', 20, 1 );
function custom_default_address_fields( $fields ) {
    // Only on account pages
    if( ! is_account_page() ) return $fields;

    ## ---- 1.  Remove 'address_2' field ---- ##

    unset($fields['address_2']);

    ## ---- 2.  Sort Address fields ---- ##

    // Set the order (sorting fields) in the array below
    $sorted_fields = array('first_name','last_name','company','address_1','country','postcode','city','state');

    $new_fields = array();
    $priority = 0;

    // Reordering billing and shipping fields
    foreach($sorted_fields as $key_field){
        $priority += 10;

        if( $key_field == 'company' )
            $priority += 20; // keep space for email and phone fields

        $new_fields[$key_field] = $fields[$key_field];
        $new_fields[$key_field]['priority'] = $priority;
    }
    return $new_fields;
}

// Account Edit Adresses: Reorder billing email and phone fields
add_filter(  'woocommerce_billing_fields', 'custom_billing_fields', 20, 1 );
function custom_billing_fields( $fields ) {
    // Only on account pages
    if( ! is_account_page() ) return $fields;

    ## ---- 2.  Sort billing email and phone fields ---- ##

    $fields['billing_email']['priority'] = 30;
    $fields['billing_email']['class'] = array('form-row-first');
    $fields['billing_phone']['priority'] = 40;
    $fields['billing_phone']['class'] = array('form-row-last');

    return $fields;
}

// Account Displayed Addresses : Remove 'address_2'
add_filter( 'woocommerce_my_account_my_address_formatted_address' , 'my_account_address_formatted_addresses', 20, 3 );
function my_account_address_formatted_addresses( $address, $customer_id, $address_type ) {
    unset($address['address_2']); // remove Address 2

    return $address;
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

If you want to make that effective in checkout page too, you will have to remove this lines:

// Only on account pages
if( ! is_account_page() ) return $fields;

In each function (2 times)…

Sample Image

Hide custom checkout fields from appearing in WooCommerce my account edit address

To hide custom fields from my account > Edit billing address, you will use the following:

add_filter( 'woocommerce_billing_fields', 'ga_remove_account_custom_fields', 1000 );
function ga_remove_account_custom_fields( $fields ) {
    // Only on My account > Edit address section
    if ( is_wc_endpoint_url('edit-address') ) {
        // Here define the custom field Ids to hide in the array
        $field_ids = array('billing_gst_number', 'billing_br_tax_id');

        foreach ( $field_ids as $field_id ) {
            if( isset($fields[$field_id]) ) {
                unset($fields[$field_id]);
            }
        }
    }
    return $fields;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Note: For shipping fields you will use the hook woocommerce_shipping_fields instead.

Related:

  • Customize addresses fields on WooCommerce My account and Checkout
  • WooCommerce Checkout fields settings and customization hooks

Make fields optional in WooCommerce My account edit addresses

To make all My account > addresses fields optional use the following:

// Make all My account addresses fields optional
add_filter( 'woocommerce_default_address_fields' , 'filter_my_account_addresses_fields', 999 );
add_filter( 'woocommerce_billing_fields', 'filter_my_account_addresses_fields', 999 );
function filter_my_account_addresses_fields( $fields ) {
    // Only on My account edit addresses
    if ( is_wc_endpoint_url( 'edit-address' ) ) {
        // Loop through existing fields
        foreach( $fields as $field_key => $field_data ) {
            // if they are required
            if( $fields[$field_key]['required'] ) {
                // Make them optional
                $fields[$field_key]['required'] = false;
            }
        }
    }

    return $fields;
}

// Optionaly remove ("optional)" text from My account addresses fields
add_filter( 'woocommerce_form_field' , 'remove_account_addresses_optional_fields_label', 10, 4 );
function remove_account_addresses_optional_fields_label( $field, $key, $args, $value ) {
    // Only on My account edit addresses
    if ( is_wc_endpoint_url( 'edit-address' ) ) {
        $optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    }
    return $field;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

wordpress woocommerce - show and modify account fields on checkout page

I've found the answer to this, so if anyone has the same problem, this is the best solution. Instead of trying to make the accounts fields visible, in my case it's more efficient to manually output the fields I need since I won't be needing most of the default fields anyway.

What I did was override the form-billing.php template. I removed the loop for the fields which is this part:

<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>

    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

And replaced it with this to individually add them to the page:

<?php
    woocommerce_form_field( 'billing_first_name', $checkout->checkout_fields['billing']['billing_first_name'], $checkout->get_value( 'billing_first_name') );
    woocommerce_form_field( 'billing_email', $checkout->checkout_fields['billing']['billing_email'], $checkout->get_value( 'billing_email') );
    woocommerce_form_field( 'account_username', $checkout->checkout_fields['account']['account_username'], $checkout->get_value( 'account_username') );
    woocommerce_form_field( 'account_password', $checkout->checkout_fields['account']['account_password'], $checkout->get_value( 'account_password') );
    woocommerce_form_field( 'account_password-2', $checkout->checkout_fields['account']['account_password-2'], $checkout->get_value( 'account_password-2') );
    //...other fields that I need
?>

From there, the modifications for the label, placeholder, etc. works just fine. Hope it works for other people with the same issues too. Cheers! :)

WooCommerce editable custom checkout field and displayed in formatted address

You need to make some changes in your code… The following code will display the shipping phone field in:

  • Checkout
  • My Account > Address > Edit shipping address
  • Admin order edit pages

The code will also add the shipping phone to formatted displayed shipping address on emails shipping address section.

// display shipping phone in checkout and my account edit shipping address
add_filter( 'woocommerce_shipping_fields', 'add_shipping_phone_field' );
function add_shipping_phone_field( $fields ) {
   $fields['shipping_phone'] = array(
      'label' => __('Phone (Shipping)'),
      'required' => true,
      'class' => array( 'form-row-wide' ),
      'priority' => 25,
   );
   return $fields;
}

// Editable field on admin order edit pages inside edit shipping section
add_filter( 'woocommerce_admin_shipping_fields' , 'add_order_admin_edit_shipping_phone' );
function add_order_admin_edit_shipping_phone( $fields ) {
    // Include shipping phone as editable field
    $fields['phone'] = array( 'label' => __("Shipping phone"), 'show' => '0' );

    return $fields;
}

// Adding custom placeholder to woocommerce formatted address only on Backend
add_filter( 'woocommerce_localisation_address_formats', 'admin_localisation_address_formats', 50, 1 );
function admin_localisation_address_formats( $address_formats ){
    // Only in backend (Admin)
    if( is_admin() || ! is_wc_endpoint_url() ) {
        foreach( $address_formats as $country_code => $address_format ) {
            $address_formats[$country_code] .= "\n{phone}";
        }
    }
    return $address_formats;
}

// Custom placeholder replacement to woocommerce formatted address
add_filter( 'woocommerce_formatted_address_replacements', 'custom_formatted_address_replacements', 10, 2 );
function custom_formatted_address_replacements( $replacements, $args  ) {
    $replacements['{phone}'] = ! empty($args['phone']) ? $args['phone'] : '';

    return $replacements;
}

// Add the shipping phone value to be displayed on email notifications under shipping address
add_filter( 'woocommerce_order_formatted_shipping_address', 'add_shipping_phone_to_formatted_shipping_address', 100, 2 );
function add_shipping_phone_to_formatted_shipping_address( $shipping_address, $order ) {
    global $pagenow, $post_type;

    // Not on admin order edit pages (as it's already displayed).
    if( ! ( $pagenow === 'post.php' && $post_type === 'shop_order' && isset($_GET['action']) && $_GET['action'] === 'edit' ) ) {
        // Include shipping phone on formatted shipping address
        $shipping_address['phone'] = $order->get_meta('_shipping_phone');
    }
    return $shipping_address;
}

// Remove double billing phone from email notifications (and admin) under billing address
add_filter( 'woocommerce_order_formatted_billing_address', 'remove_billing_phone_from_formatted_billing_address', 100, 2 );
function remove_billing_phone_from_formatted_billing_address( $billing_address, $order ) {
    unset($billing_address['phone']);
  
    return $billing_address;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

For billing custom fields, you will replace the hooks:

  • woocommerce_shipping_fields by woocommerce_billing_fields
  • woocommerce_admin_shipping_fields by woocommerce_admin_billing_fields
  • woocommerce_order_formatted_shipping_address by woocommerce_order_formatted_billing_address
  • (don't use the last function).

For the front endpoints:

On order received (thank you), order-pay, and myaccount / order-view, you will have to override via your active theme the template order/order-details-customer.php.

You will add inside the html tag <address> after line 52 the following:

        <?php if ( $shipping_phone = $order->get_meta('_shipping_phone') ) : ?>
            <p class="woocommerce-customer-details--phone"><?php echo esc_html( $shipping_phone ); ?></p>
        <?php endif; ?>

On admin side, the shipping phone is displayed and editable:

Sample Image

On order-view, order-received and email notifications, the shipping phone is displayed at the end of the shipping address section:

Sample Image


Related Topics

Best Way to Periodically Execute a PHP Script

Google Calendar API Service Account Error

Add a Quantity Field to Ajax Add to Cart Button on Woocommerce Shop Page

PHP .Htaccess -> Pretty Url (In Reverse)

PHP Day of Week Numeric to Day of Week Text

Forcing Access to _Php_Incomplete_Class Object Properties

Codeigniter: 404 Page Not Found on Live Server

PHP - Most Lightweight Psr-0 Compliant Autoloader

Prevent Direct Access to a PHP Page

Pdo Exception Questions - How to Catch Them

How to Setup a Cron Job in Magento Module

Remotely Connecting to a MySQL Database

Replacing Variables in a String

How to Send Email with Smtp in PHP

How to Wrap Long Lines Without Spaces in HTML

How to Give Container as Argument to Services

How to Send Notification to Android from PHP

Any Way to Keep Curl's Cookies in Memory and Not on Disk


Leave a reply



Submit