Reduce number of fields required in checkout page?

Design help Ecommerce
1

Hi Webflow community!

I was wondering if it were possible to reduce the number of fields required on the checkout page. Right now, the Webflow default requires A LOT of fields to be filled out, which our team thinks could be a deterrent to conversion.

Many other sites only require:

  1. Credit / debit card number
  2. Expiry date
  3. CVC
  4. Full name
  5. Zip code

But there are a lot of extra fields required by Webflow, such as:

  1. Street address (billing address)
  2. City (billing address)
  3. State (billing address)
  4. Country (billing address)
    and then repeat for shipping address, which is another 5 more fields.

That’s 9 extra fields our customers have to fill out that are completely unnecessary! Any way around this? We sell a digital product (no shipping address needed), and we’re using Stripe as our payments processor.

Thanks!

1 Like
2

WHat happens when you hide class the Shipping info, and test card input with Name Card Expy Date CV code?

3

Thanks for the reply @miekwave!

I tried checking out with Webflow’s “Billing Address” Block hidden (part of the Payment Info section, which contains the fields Full Name, Street Address, City, State, Zip, Country) and it didn’t work (so in this test, I only had exposed / filled out Email, Card Number, Expiry, and Security Code like you suggested). I also hid the Shipping Info class.

When I pressed the Place Order button, an error message didn’t even appear. I’m not sure what fields are absolutely required by Webflow since I can’t find documentation on it.

Previously, when we didn’t host our site on Webflow, I know Stripe only required: Name, Card Number, Expiry, CVC.

4

Hi Have to correct you.if you use Amex they Have address validation and the Fields are required

5

I have encounted a similar issue. I made Duplicate CMS items of PRODUCT just for FOXI.io authorize.net and/or stripe.

Then in Products have a custom Pill box if TRUE → Reference Item => Products CMS

Then put custom redurect rule in custom code

ECommerce Product create a new text field called “Redirect Path” and leave BLANK by default - BUT if path exist then redirect

`<meta http-equiv="refresh" content="0;url=/cms-product-path/cms-product-page" />`

This way you can use both Webflow E-Commerce native AND external payment gateway providers

1 Like
6

Hi,
May I bring this topic up again


I have the same task, to minimize the number of required fields in the checkout form for a local restaurant operating/delivering in a specific area of a city in Australia. In this case, some of the form fields are unnecessary.

I have two shipping methods set up: a flat rate shipping per order, and a free ‘pick-up at the Café’.

I was able to hide the ‘Billing address same as Shipping’ checkbox in the checkout form. I was also ‘allowed’ to hide the country dropdown. Placing the order turned out to be possible with both of these hidden.

Surprisingly, I was not ‘allowed’ to hide the ‘State/Province’ field – although it is not even marked with the asterisk as a ‘required’ field. When hidden completely, clicking the checkout button brings up an error message that ‘no shipping method is available for this address’. When revealed, it becomes a required field and placing the order is impossible without filling it.

Is this a bug in the form, perhaps? (Btw, there are countries which do not have any states/provinces; will the user be still required to enter something?)

And if not a bug and the field is really required, is it possible to have this field pre-filled by a specific default value, to spare the customers filling an extra field?

Thank you!

7

Estamos con la mis duda, alguien tiene alguna soluciĂłn?

8

This is needed, especially for single page rapid-purchase e-comm stores!!

9

I’ve a solution for this: What you do is the don’t use the webflow e-commerece have your products display normally eg: a card showing the product and when you click on buy have the button redirect the user to a stripe checkout link for the corresponding products. Note this is a single payment checkout with no option to add to the card. You could use smth like Zapier to then keep tracks of the orders etc. On my case we only have one product so it works perfectly. If you have many products I’ll highly consider using Shopify Instead or a custom website