Country Flag and Dial Code Dropdown

The country flag and dial code dropdown is the core UI element that makes Smart Phone Field work. This article explains how it behaves, what it displays, and how customers interact with it.

What It Looks Like#

The dropdown trigger sits on the left side of the phone field. It shows two things:

• The flag of the currently selected country
• The international dial code for that country, for example +1 for the United States or +44 for the United Kingdom

Clicking this button opens the full country list.

How the Default Country Is Set#

When a customer arrives at your checkout page, Smart Phone Field automatically pre-selects the country that matches their WooCommerce billing country. This means if a customer has already chosen United Kingdom as their billing country, the phone field will open with the UK flag and +44 pre-selected.

This eliminates the extra step of asking the customer to find and select their country in the phone field separately. In most cases the correct country is already set when they reach the phone field.

Opening the Dropdown#

Clicking the flag button opens a dropdown panel directly below the field. The dropdown contains:

• A search box at the very top
• Your preferred countries pinned at the top of the list (if configured)
• All remaining countries listed in alphabetical order below

The dropdown is keyboard accessible. Customers can navigate with arrow keys and select with Enter.

Searching for a Country#

The search box at the top of the dropdown lets customers type to filter the country list instantly. Typing “Aus” will narrow the list to Australia and Austria. The search works on country names in the language the customer is using.

This is particularly useful for customers in countries that appear lower in the alphabetical list. Instead of scrolling, they can type a few letters and select their country immediately.

Preferred Countries#

If you have configured preferred countries in your settings, they appear at the top of the dropdown above a subtle divider, separated from the main alphabetical list. This makes your most common customer countries immediately visible when the dropdown opens without any scrolling or searching.

Up to 4 preferred countries can be set. See the Configuring Your Settings guide for instructions on how to add them.

Selecting a Country#

When a customer clicks a country in the dropdown, three things happen immediately:

1. The flag updates to the selected country
2. The dial code updates to match
3. The phone number input clears so the customer can enter their number in the correct format

The dropdown closes automatically after a country is selected.

The Dial Code#

The dial code shown next to the flag is the international dialing prefix for the selected country. When the customer’s number is saved to the WooCommerce order, the dial code is included as part of the full international number.

For example if a customer selects Canada (+1) and types 4165550199, the number saved to the order will be +1 4165550199.

Some countries share a dial code. For example the United States and Canada both use +1. Smart Phone Field correctly handles these cases — the flag reflects the specific country selected even when the dial code is shared.

Country Coverage#

Smart Phone Field includes all countries and territories supported by the intl-tel-input library. This covers over 250 countries and territories worldwide.

Accessibility#

The dropdown is built to be accessible. It supports keyboard navigation, has appropriate ARIA labels, and works with screen readers. Customers using assistive technology can interact with the dropdown without needing a mouse.