Add Phone number to Checkout

[Moncho_Gey (Moncho)]

Hi Everyone!

I’d like to add phone number in the checkout…Is it Possible?

Thanks

[matthewpmunger]

Hey @Moncho_Gey

Custom fields are not currently possible on the checkout form. Definitely go over to the Wishlist and add your vote for ecommerce custom fields on checkout. It helps us to prioritize new features.

https://wishlist.webflow.com/ideas/WEBFLOW-I-1864

[JakeMorrison]

This is mucho needed. Think of the opportunities…

[Ruston26 (Gavin Davies)]

I agree we need this ASAP as I have a client using an E-comms Website I built and spending lots of money thinking of leaving because this fundamental feature is not available another £3000 client gone due to Webflows Inactivity glad you got £76 Mil funding try spending it on development. As our businesses fail, due to simple Features not been delivered. @PixelGeek

[foxy (Foxy.io)]

Hi all.
Josh from Foxy here. Custom checkout fields (and more) are possible with Foxy + Webflow. More info about our seamless Webflow integration can be found here: Webflow | Foxy.io

We offer an unlimited free trial and free one-on-on onboarding. Please don’t hesitate to reach out if we can help you get started. We can even show you how to easily transition from Webflow Ecommerce to Foxy, saving you money, while providing powerful ecommerce features.

Thanks,
Josh

[maciejjasinski (Maciej Jasiński)]

Hi @Ruston26!

You can currently add an Additional Info block to the Checkout page and use it to gather additional information from the store customers. Even though the fields within this block have presets (phone number being one of them), you can customize them to your liking.

Add element from the add panel:

Then you can customize the element:

You can then add a similar Additional Info block to the Order Confirmation page, so that store customers may preview what they’ve submitted:

Please let me know if that will work for your project and if there other enhancement we could add to this functionality

Maciej

[Ruston26 (Gavin Davies)]

Thanks Very much this is perfect and Comments box too just perfect Thanks very much

[jhiggins (John Higgins)]

The shipping has two input boxes. You can duplicate the label, change it to “phone number”, and just use the second box for phone number.

[nina.martinez (Nina)]

To add to this, you can manually add phone number format validation by adding these two attributes to the new “Phone” field:

pattern="^(?:(\d{3})|\d{3})[- ]?\d{3}[- ]?\d{4}$"
title="Please enter a valid Phone Number"

[jhiggins (John Higgins)]

Um, where has this been all my life. Nina, you’re a wizard.

[michael_phillips]

AGREED! A phone number and notes is required for checkout. I was falling in love with WebFlow but will look for a new solution when it’s time to rebuild… which will be sooner than later.

[malik]

Hi @nina.martinez Webflow support responded to me with below when I told them about your solution. I am not very technical, do you agree with their warning?

the address fields are used when calculating taxes based on shipping addresses, so the phone number in an address field could potentially cause an issue.

If you are able to try testing a little with custom code, you could possibly try a little jQuery using .attr to set required on the additional info field instead, by targeting the id of the contact phone additional info field (perhaps when it does not get the w-condition-invisible class added) and then add required to the input field after the checkout page loads. You may need to include a timeout function to await for the invisible class to be added, if you are targeting.

[Simon_Lessing]

@maciejjasinski this is great, but I can’t find this information in the backend when I’m looking at the placed order? And there doesn’t seem to be any data field tokens I can add either?
Thank you