Support

Home Forums Event Espresso Premium Checkout Fields format..

Checkout Fields format..

Posted: July 11, 2016 at 9:35 pm

Viewing 5 reply threads


Moysh

July 11, 2016 at 9:35 pm

My client is asking of we can change the format and some of the fields on the checkout as follows..:

1. First and last name should be on same line
2. City state and zip needs to be on same line.
3. Expiration month year and cvv should be on the same line.

you can see the site here:
http://chaicenter-org.securec79.ezhostingserver.com/events/

is this possible?


Tony

  • Support Staff

July 12, 2016 at 3:06 am

Hi there,

Yes its possible, you will need to apply your own CSS to force the elements to display how you prefer. For example:

.ee-reg-qstn-fname-input-dv, 
.ee-reg-qstn-lname-input-dv {
    width: 49%;
    float: left;
}
.ee-reg-qstn-fname-input-dv {
    padding-right: 2%;
}

Will force the first and last name to be side by side.

.ee-billing-form .ee-billing-qstn-city-input-dv, 
.ee-billing-form .ee-billing-qstn-state-input-dv, 
.ee-billing-form .ee-billing-qstn-zip-input-dv {
    width: 31%;
    display: inline-block;
}

.ee-billing-form .ee-billing-qstn-city-input-dv, 
.ee-billing-form .ee-billing-qstn-state-input-dv {
    padding-right: 3%;
}

.ee-billing-form > br {
    display: none;
}

.ee-billing-form .ee-form-add-new-state-lnk {
    display: none;
}

Forces the city, state and zip onto one line (hides the add state link but you can add additional styles if you need it)

#aim-form-exp-month-input-dv, 
#aim-form-exp-year-input-dv, 
#aim-form-cvv-input-dv {
    display: inline-block;
}

Will display the aim month, year and cvv on a single line.

You’ll likely need to change the styling to suit better and if you add additional payment methods the above styles will not apply so again you’ll need to add your own, but it should give you a starting point.

  • This reply was modified 8 years, 2 months ago by Tony. Reason: Use inline-block


Moysh

July 12, 2016 at 8:55 am

Thankyou! for the most part it worked..I was even able to apply the same to make the billing Fname and lname also on one line..

only thing i couldn’t figure out..
b) the label “card number” shift all the way to the right..(on firefox.. chrome it is ok!)


Tony

  • Support Staff

July 12, 2016 at 9:53 am

I’ve edited the code used above to use inline-block for the city, state and zip fields.

Try using that code and see if that fixes it.


Moysh

July 12, 2016 at 10:29 am

perfect! TY!


Tony

  • Support Staff

July 12, 2016 at 10:44 am

You’re most welcome.

Viewing 5 reply threads

The support post ‘Checkout Fields format..’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso