Customizing the Accent Color

Smart Phone Field lets you choose a custom accent color so the phone field feels native to your store’s design rather than standing out as a third-party element. This article explains what the accent color affects and how to change it.

What the Accent Color Controls#

The accent color is applied to three specific parts of the phone field UI:

Selected country row — When a customer opens the dropdown and hovers over or selects a country, the highlighted row uses the accent color as its background. This makes it clear which country is active.

Field focus border — When a customer clicks into the phone number input, the field border changes to your accent color. This matches the focus behavior of other fields on your checkout page that use your theme’s brand color.

Dropdown scrollbar — The scrollbar inside the country dropdown uses the accent color so it blends with the rest of the field rather than showing a default browser scrollbar style.

How to Change the Accent Color#

1. Go to WooCommerce > Smart Phone Field > Settings in your WordPress admin
2. Click the color swatch next to the Accent Color field
3. Use the color picker to select a color, or type a hex code directly into the hex input field
4. Click Save Settings
5. Visit your checkout page to preview the result — you may need to clear your browser cache to see the change

Choosing the Right Color#

The best accent color is usually your theme’s primary interactive color — the same color used for buttons, links, and focus states on the rest of your checkout page.

A few tips:

Match your buttons — If your checkout page uses a blue Add to Cart button and blue link colors, use that same blue. The phone field will feel seamlessly integrated.

Avoid very light colors — Light colors like pale yellow or white do not provide enough contrast for the selected country row background. The country name text may become hard to read. Stick to a color with enough depth to contrast against white text or dark text depending on your setup.

Avoid very dark colors — Very dark colors work fine for the focus border but can make the selected country row feel heavy. Test on your actual checkout page before committing.

Test on mobile — The field focus state is especially visible on mobile where users tap into fields. Make sure the accent color looks good on a small screen too.

Using a Hex Code#

If your brand color is specified as a hex code, you can type it directly into the color picker’s hex input field. Type the code without the # symbol, for example 1D4ED8 for a blue, and the picker will update to that color automatically.

Previewing the Color#

After saving, visit your checkout page in a private or incognito browser window to see the color applied without any cache interference. Click into the phone number field to see the focus border, and open the country dropdown to see the selected row color.

Resetting the Color#

To reset to the default accent color, open the color picker and enter the default hex code 6D28D9 (a purple tone matching the intl-tel-input default), then save. Alternatively set it to whatever color fits your theme best — there is no one-click reset.

Theme Conflicts#

In some cases a theme or another plugin may have CSS that overrides the phone field styles. If your accent color does not appear on the checkout page after saving and clearing your cache, inspect the phone field in your browser developer tools to check whether another stylesheet is applying a conflicting color.