Help with phone number formatting

[ChrisB]

Hey,

I hope you had a nice weekend!

I was previously using the snippet I shared in this topic to provide a better experience of how UK mobile numbers are displayed.

However, since the telephone library was updated, I’ve struggled to get the phone numbers to appear on the front-end as I’d like.

For clarify, my HivePress phone attribute settings are set to UK as the default and only country.

‘+44’ is the international dialing code for UK numbers.
When using the international code, we drop the leading ‘0’ from our numbers.

e.g. 07778983544 becomes +447778983544

When completing a user’s profile or adding listing details, no matter if I enter the 10 or 11 digit number, the resulting number that’s being displayed on the front-end of listing is missing the leading ‘0’. There’s also a space added to the middle of the number.

e.g. I enter 07778983544 and on the actual listing I see ‘7778 983544’

Whether or not I add the space in the backend doesn’t seem to matter, it gets trimmed during validation.

I’ve tried using various AI bots to try and provide a working solution, but sadly, none of them are working as intended.

The part that irritates me the most and what I’m trying to fix is the loss of the leading ‘0’ in the resulting number that’s shown on the front-end. Even if the +44 part showed instead of the missing ‘0’, that would be better.

In any case, when I click on the number to dial it, the ‘0’ is included in the “tel:” link and what’s displayed on my phone.

I’ve tried clearing my site cache and using an incognito browser window in case caching was the issue, but this doesn’t seem to help.

When I am trialing new code snippets, I occasionally briefly see one version before the page fully loads and the formatted version missing the leading ‘0’ takes its place.

If it makes any difference I have the listing/vendor attribute synced, and I’'m using the attribute slug name ‘phone_number’.

Cheers,
Chris

[kseniia]

Hi Chris,

If I understand your request correctly, you have only the UK selected in the Countries field. If so, this is actually the default behavior defined in the code. This is a common UI practice for services that operate regionally, when a specific country is pre-selected, users typically only need to enter their phone number without the country code or additional digits (like the leading 0).

If you want to keep the country code visible, you can consider leaving the Countries field empty. In that case, the +44 code will appear in the input field along with the number.

Regarding the spacing, I believe this is how phone numbers are formatted within the international telephone input library that HivePress uses for this field.

Additionally, could you help me understand why the leading 0 is important in this case? You mentioned that the phone functionality works correctly, so I want to make sure I fully understand the issue.

P.S. Hope you had a great weekend too.

[ChrisB]

Hey @kseniia,

Ahhh! Thank you so much for clarifying the default behaviour and pointing me in the right direction. I didn’t realise that by restricting the country options it would effect the output on the front-end and hide the Country code.

Like you suggested, I tried removing the Countries restriction (but, kept the default country as the UK) - This restored the ‘+44’ part to the front-end of listings.

I then tried reactivating my snippet to swap ‘+44’ to ‘0’ and it appears to be working as expected now!

The spacing part was less of an issue, I just wasn’t sure if it was effecting the display. However, while the phone numbers were missing the ‘+44’ and/or leading ‘0’ they didn’t appear how users would expect. (As mentioned, we always display numbers with the leading ‘0’ or ‘+44’, so having them begin with the ‘7’ isn’t standard and looks odd. That’s all!

This has been bugging me for a while, so I’m delighted to have resolved the issue now. (I was trying to tackle other bigger issues first.)

Thanks again for your help, and I hope you have a great week ahead!

Cheers,
Chris