Support

Home Forums Event Espresso Premium Can you help restyle my checkout page

Can you help restyle my checkout page

Posted: September 10, 2015 at 1:17 pm


BG

September 10, 2015 at 1:17 pm

Hello I am looking to restyle the checkout page on our event espresso website, but I don’t know where to start/look to change the code.

View a picture with instructions on how I want the page to display – http://theukweddingevent.co.uk/wp-content/uploads/2015/09/checkouttwo.jpg

The link below shows how it currently looks:

http://theukweddingevent.co.uk/registration-checkout/

If anyone could offer some guidance on how to achieve the finish I am after, I would be most grateful.


Josh

  • Support Staff

September 11, 2015 at 9:57 am

Hi BG,

I can give you some general guidance on how to style the elements with CSS. You can hide the steps section with:

#spco-steps-display-dv,
#spco-steps-big-hdr {
display: none;
}

You can re-style the promo code input field with something like this:

#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options .ee-promo-combo-submit {
background-color: #fff !important;
color: #EA5B74 !important;
padding-left: 20px;
padding-right: 20px;
margin-top: 45px;
margin-right: 18px;
}

#ee-promotion-code-input-lbl h4{
display: none;
}

#ee-spco-payment_options-reg-step-form-payment-options-before-payment-options .ee-promo-combo-input {
float: right;
position: relative;
}

In order to display the PayPal button, you’ll need to remove its div (shown below in bold) from your styles where you’re setting it to display none:

#ee-single-page-checkout-dv .spco-steps-big-hdr, #ee-single-page-checkout-dv #spco-steps-display-dv, #spco-available-methods-of-payment-dv #method-of-payment-hdr, #spco-available-methods-of-payment-dv #ee-available-payment-method-inputs {
display: none !important;
}

The support post ‘Can you help restyle my checkout page’ 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.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Josh 4 years, 2 months ago ago

Topic Tags

Notifications

This topic is: not resolved
Do NOT follow this link or you will be banned from the site!
[for="input_96_5_3"]
[for="input_96_5_3"]
[gravityform id=96 title=false description=false]
  • This field is for validation purposes and should be left unchanged.
[i]
[i]
[gravityform id=69 title=false description=false]
  • This field is for validation purposes and should be left unchanged.