AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Customizer
  5. How to change the Aero Checkout field’s column structure using CSS ready classes?

How to change the Aero Checkout field’s column structure using CSS ready classes?

1) Customization

Each pre-built template has different column structure for checkout fields. You can modify the columns using Aero Checkouts CSS Ready Classes provided in the customize Classes section of Checkout Form.

Open the customizer of your selected checkout template > Checkout form> Classes and then edit the ready classes as showing below

2) Single / Multi Columns Classes

You can update the classes using this pre-built column classes to get 1 / 2 / 3 Columns for fields.

wfacp-col-full – To create full width field

wfacp-col-left-half – To create two columns structure and set field left side

wfacp-col-right-half – To create two columns structure and set field right side

wfacp-col-left-third – To create three columns structure and set field left side

wfacp-col-middle-third – To create three columns structure and set field middle

wfacp-col-right-third – To create three columns structure and set field right side

wfacp-col-two-third – To create two third columns structure

wfacp-col-clearfix – To create field from new line use clearfix

3) Preview

See the preview below when you apply these classes

How can we help?