Phone Field for WooCommerce
Phone Input for WooCommerce checkout, Contact Form 7 and WPForms.
wp plugin install devix-phone-field --activate
Adds country search, flags, formatting as you type and libphonenumber-grade validation to phone fields on the WooCommerce checkout block and classic checkout, My Account addresses, Contact Form 7 and WPForms. The same rules run on the server, numbers are saved in one format, and your theme's input styling is kept.
What you get
Checkout block and classic
Billing and shipping phone on both WooCommerce checkouts and My Account, validated through the Store API.
Real validation, twice
libphonenumber data for 254 regions in the browser and on the server, with a reason for every rejection.
Contact Form 7 and WPForms
A [phone] tag with country, preferred, only and mobile options; any WPForms text field with one CSS class.
Keeps your theme
The country button sits over your existing input, so borders, colours and sizes stay as they are.
Nothing leaves your site
Scripts, flags and country data are bundled; country detection uses the device, not an IP service.
One saved format
+971 50 123 4567 or E.164, in orders, emails and entries — plus Call and WhatsApp links on orders.
Why this plugin?
A wrong phone number costs a delivery, a lead or a support call. WordPress sites usually get phone numbers in one of two ways, and neither works well:
- A plain text box, which accepts anything.
- A plugin that checks only length and digits, often loading country detection from a third-party service that sees every visitor's IP address.
Devix Phone Field uses Google's libphonenumber data for 254 regions, in the browser and again on the
server. It knows 050 123 4567 is a UAE mobile number and that 050 12 is too short. It saves every
valid number the same way, and it loads nothing from anyone else's servers.
Where it works
| Form | How |
|---|---|
| WooCommerce checkout block | Automatic — billing and shipping phone, validated through the Store API |
| WooCommerce classic checkout | Automatic |
| My Account → Addresses | Automatic |
| Contact Form 7 | [phone* your-phone country:ae mobile] |
| WPForms Lite | Single Line Text field with the CSS class devix-phone |
| Anything else | [devix_phone], or class="devix-phone" on any input |
What your customers see
- A country button with the flag and dial code, inside your theme's own input.
- Search by country name, code or dial code:
uae,+44,پاکستان. - Formatting as they type, and paste that just works:
+44 (0)7400 123456becomes+44 7400 123456. - A message saying what's wrong: too short, please enter a mobile number.
- A bottom sheet on phones, keyboard support, and right-to-left languages.
Demos
All demos →How it compares
Questions
Does it work with the WooCommerce checkout block?
Yes, and with the classic [woocommerce_checkout] shortcode. Both are covered by browser tests against WooCommerce 11.1.
Will it change my checkout's design?
No. It adds a country button inside your existing input and keeps the theme's styling. Colours and sizes can be adjusted with CSS variables.
Does it call external services?
No. Everything is bundled with the plugin and loaded from your own site, only on pages with a phone field.
Which WPForms field do I use?
A Single Line Text field with the CSS class devix-phone. WPForms Lite doesn't include its own Phone field.
Is it free?
Yes, MIT licensed.