AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Forms
  5. How to add Street Address 2 field in Checkout Form

How to add Street Address 2 field in Checkout Form

By default WooCommerce Native Checkout pages offers 2 lines of addresses but in AeroCheckout provides optimized and less distraction of fields to complete the checkout as simple as fast.

But in some cases you may need the 2nd line of Street Address field in Shipping Address or Billing Address. This optional fields is available in checkout form but you need to enable as per your requirement.

Find the field here

Edit the checkout form from “Form” tab > Click on Shipping / Billing Field > Enable the toggle of Street Address 2 field > Update the popup > Save the form

After enable the field Street Address 2, you will get this layout of your Checkout Form >

Re-structure of Checkout Form after enable Street Address 2

You may need to correct the layout of the checkout form after enable the Street Address 2 field into your checkout.

Follow these easy steps to make to modify the column layout using some CSS Ready Classes .

Open this location by following this path –

Design Tab > Click on Customize button of your selected template > Checkout Form > Classes

 

Inside the classes panel you will notice there are many fields which contains your checkout form. On each field there is already classes applied.

For example have a look at these 2 fields

Street address – wfacp-col-left-half

Apartment, suite, unit etc. – wfacp-col-right-half

 

This class clearly distributes the fields into TWO COLUMNS using “Half” (50% width) of the form width & the location “left” or “right” defines the position of the fields.

Note – Street Address is left and Apartment field is right side on the form

Now you have to arrange the other fields like Town / City, Postcode, Country, State to make them similar to Street Addresses fields.

Follow this pattern given below to arrange distribute them into left & right side.

wfacp-col-left-half               &                 wfacp-col-right-half

Final Output

How can we help?