How the Phone Field Works

Smart Phone Field replaces the default WooCommerce phone input with a smart international phone field. This article explains what the field does, how it behaves during checkout, and what gets saved to each order.

What the Customer Sees#

When a customer reaches your checkout page, the phone field looks different from the standard WooCommerce input. Instead of a plain text box, they see:

• A country flag and dial code button on the left side of the field
• A phone number input on the right where they type their number
• Their country pre-selected based on their WooCommerce billing country

The customer does not need to type their country code manually. The dial code is added automatically based on whichever country is selected in the dropdown.

Selecting a Country#

Clicking the flag button opens a dropdown with all supported countries. At the top of the dropdown, any preferred countries you have configured in settings appear pinned. Below those, all remaining countries are listed alphabetically.

There is a search box at the top of the dropdown. Customers can type a country name to filter the list instantly rather than scrolling.

Once a customer selects a country, the flag and dial code update immediately and the phone input clears so they can enter the number in the correct format for that country.

Format Validation#

As the customer types their phone number, Smart Phone Field validates the format in real time using the intl-tel-input library. The field checks whether the number matches the expected format for the selected country.

If the number is valid, a subtle success indicator appears. If the number is incomplete or incorrectly formatted, the field indicates this before the customer tries to submit the form.

This client-side validation happens instantly without any page reload. It guides the customer to enter a correctly formatted number before they attempt to place their order.

Server-side Validation#

When the customer submits the checkout form, Smart Phone Field performs a second round of validation on the server. This is a deliberate security and data integrity measure — client-side checks can be bypassed, so we validate again on the server before the order is created.

If the phone number fails server-side validation, the order is not placed and the customer sees an error message asking them to correct their phone number.

This two-layer approach ensures that invalid phone numbers never reach your order data regardless of how the form is submitted.

What Gets Saved to the Order#

This is the most important difference between Smart Phone Field and the default WooCommerce phone field.

The default WooCommerce phone field saves whatever the customer types. If a US customer types 2015550123, that is exactly what gets stored — no country code, no context.

Smart Phone Field saves the full international number including the country dial code. The same customer’s number would be saved as +1 201-555-0123.

This matters because:

• SMS platforms like Twilio require E.164 format which includes the country code
• CRMs and marketing tools expect a full international number to route correctly
• You can identify where the customer is calling from without checking their billing address separately
• The number is immediately usable without any cleanup or reformatting

The full international number is stored in the standard WooCommerce billing phone field so it is visible in your order details, accessible via the REST API, and compatible with any tool that reads WooCommerce order data.

The My Account Page#

Smart Phone Field also applies to the billing and shipping phone fields on the My Account > Addresses page. Customers editing their saved addresses will see the same smart field experience so their stored phone numbers stay in the correct international format.

Compatibility#

Smart Phone Field works with the WooCommerce classic shortcode checkout. This includes all page builders that use the [woocommerce_checkout] shortcode such as Bricks Builder, Elementor, Breakdance, Divi, and Oxygen.

The plugin does not currently support the WooCommerce block checkout (Gutenberg). Support for the block checkout is planned for a future release.