Skip to content
Fluid Checkout
  • Features
  • Demo
  • Pricing PRO
  • Docs
  • Support
  • My account
0,00 € 0 items
Home / Docs / International phone numbers — formatting and validation for phone numbers based on country rules

How can we help?

Getting started

  • Do I need to uninstall the free version, or is Fluid Checkout Lite required?
  • How to translate Fluid Checkout plugins into your language

Account & Purchases

  • Can I get a refund for my purchase?
  • Finding my invoice, adding billing details and VAT number

Customizations

  • Configure cart quantity fields for decimal quantities
  • Move the “Phone” field to the first step (contact step)
  • How to change the icon or icon color for the cart button on mobile
  • Customizing checkout fields and adding custom checkout fields
  • How to customize WooCommerce or Fluid Checkout template files
  • How to add a new house number field and make it required
  • How to safely add code snippets to your WooCommerce website

Licenses

  • New versions updates are not appearing on my website

Features

  • Local Pickup — Hide shipping address when local pickup is selected
  • Trust symbols — add security badges, trust seals and other trust symbols to strategic places on the checkout, cart and order received pages
  • International phone numbers — formatting and validation for phone numbers based on country rules
  • Edit cart at checkout — change quantity or remove items from the cart directly at the checkout page
  • Express checkout — quick payment buttons for Google Pay, Apple Pay and other payment methods

Development

  • Troubleshoot – Trust symbols widgets randomly moving to other areas when switching themes
  • Changelog format and semantic version numbers
  • Changelog – Fluid Checkout PRO & Lite

International phone numbers — formatting and validation for phone numbers based on country rules

Table of Contents
  • Enable International Phone Number features
  • Adding custom phone number fields with International Phone Number validation and formatting
    • Using a checkout field editor plugin
    • Using custom code

Whether you sell to customers abroad or not, the international phone number formatted fields will help your customers avoid mistakes, and ensure you collect the right phone numbers in a format that cannot be misinterpreted.

Fluid Checkout PRO will validate the phone number based on the rules for each country and region and by add a drop-down field for the country code and flag to each phone number on the checkout page, including custom fields.

Enable International Phone Number features #

  1. Go to the plugin settings at WP Admin > WooCommerce > Settings > Fluid Checkout.
  2. Locate the section “PRO features > International phone numbers”.
  3. Check the option “Enable international phone number format and validation for phone fields”.
  4. Check the option “Enable phone number validation based on country rules”.
  5. Check the option “Show country code beside the flag” if you also want to display the country code. Otherwise, only the country flag will be displayed.
  6. Select one option for how placeholder text on the phone fields should be displayed. With the default option “Do not change placeholders”, the text inside the fields will not be changed when the field does not have a value yet, preserving the placeholder text that was already defined for that field. The other two options will display the phone field placeholder with an example of a valid phone number for the selected country.
  7. Choose the option “Save changes” at the bottom of the settings page.

Adding custom phone number fields with International Phone Number validation and formatting #

When adding custom phone number fields to your checkout form, make sure that:

  • The field is defined with type tel;
  • The class js-phone-field is added to the field, so that the feature can detect and optimize it;
  • The validation type is set to phone or tel, depending on the method or plugin used to add the custom field.

Using a checkout field editor plugin #

Fluid Checkout works with many checkout field customization plugins. We recommend using this method to add custom fields as it is the easiest way to manage your checkout form fields.

On this section, we’ll walk you through setting up a custom phone field using the plugin Checkout Field Editor by Themehigh, although, other plugins might also be used.

  1. Make sure you have the plugin Checkout Field Editor by Themehigh installed and activated.
  2. Go to WP Admin > WooCommerce > Checkout Form.
  3. Select the tab related to the checkout section you want to add the custom field to, this would be usually “Billing fields”, “Shipping fields” or “Additional fields”.
  4. Choose the option “Add field”.
  5. On the New Field popup, choose the field type as “Phone”.
  6. Set the name of the field used for identifying the field. This is not the label for the field, which is the next attribute.
  7. Set the display label for the field. This is the name for the field that will be displayed on the checkout page.
  8. In the Class attribute, add the class js-phone-field, separating it with commas (,) from other classes.
  9. Set the validation attribute as Phone.
  10. Check the option Required to make the field required on the checkout page, or uncheck that option to make the field optional.
  11. Optionally, you can set other attributes for your new custom phone field.
  12. Choose the option “Save & Close” to save the field and close the popup.
  13. Move the new field to the desired position on the fields list, then choose the option “Save changes” on the bottom right of the fields list section.

For more details on how to add and manage custom fields, see our documentation Customizing checkout fields and adding custom checkout fields.

Using custom code #

Although we recommend adding custom fields using a checkout field editor plugin, you can also add your new phone field via custom PHP code. Below is a code snippet with an example of the field attributes you need to pass to register your custom phone number fields with:

/**
 * Adds custom phone fields to the checkout form.
 * 
 * @param  array  $field_groups  The checkout field groups.
 */
function fluidcheckout_add_custom_phone_fields( $field_groups ) {
    $field_args = array(
        'label'        => __( 'Secondary phone number', 'your-text-domain' ),
        'description'  => __( 'Used in case we cannot contact you on your main phone.', 'your-text-domain' ),
        'class'        => array( 'form-row-first', 'js-phone-field' ), // Class `js-phone-field` is needed to detect which fields to optimize.
        'priority'     => 25,
        'clear'        => true,
        'required'     => true, // To make the field optional, set this value to `false`.
        'validate'     => array( 'phone' ), // Define validation type, required for validating the field as a phone number.
        'autocomplete' => 'tel',
        'type'         => 'tel', // Tell the browser to display numeric keyboard on mobile devices when typing on this field.
    );

    // Add field to the shipping section
    $field_groups[ 'shipping' ][ 'shipping_secondary_phone' ] = $field_args;

    // Add field to the billing section
    $field_groups[ 'billing' ][ 'billing_secondary_phone' ] = $field_args;

    return $field_groups;
}
add_filter( 'woocommerce_checkout_fields', 'fluidcheckout_add_custom_phone_fields', 10 );

If you are unsure about how to add the code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website

What are your Feelings
Still stuck? How can we help?

How can we help?

Updated on March 26, 2023
Trust symbols — add security badges, trust seals and other trust symbols to strategic places on the checkout, cart and order received pagesEdit cart at checkout — change quantity or remove items from the cart directly at the checkout page
Table of Contents
  • Enable International Phone Number features
  • Adding custom phone number fields with International Phone Number validation and formatting
    • Using a checkout field editor plugin
    • Using custom code
Fluid Checkout

Frictionless Multi-step Checkout for WooCommerce

© 2021-2023 Fluidweb OÜ

Terms | Refunds | Privacy Policy | Cookies | Affiliates

Products
  • All products
  • Fluid Checkout PRO
  • Fluid Checkout Lite
  • Google Address Autocomplete for WooCommerce
Company
  • Support
  • My account
  • About
  • Home
  • Home
  • Features
  • Pricing PRO
  • Demo
  • Docs
  • Support
  • My account