Support

Home Forums Event Espresso Premium Payment overview page messed up

Payment overview page messed up

Posted: January 24, 2015 at 11:00 am


Alessandro Iannelli

January 24, 2015 at 11:00 am

Hey,

The payment confirmation overview table is completely messed up.
http://www.homeopera.net/event-registration/?ee=2

where can I modify the table of dev-class=”event-data-display ui-widget-content ui-corner-bottom”? I tried in confirmation-display.php but nothing happens.

Thanks for our help


Lorenzo Orlando Caum

  • Support Staff

January 24, 2015 at 12:12 pm

Hi, could you capture a screenshot of the issue and then upload to WP media or a service like getcloudapp or tinygrab and link to it here?


Lorenzo


Alessandro Iannelli

January 27, 2015 at 6:53 am

Sure, here you go:
http://grab.by/EauG
http://grab.by/EauO


Alessandro Iannelli

January 27, 2015 at 6:57 am

I would like to:

– move the price option (here Full Price) to the next line so that the event name stays alone
– left align price option and guest name
– make sure the price and currency are on the same line as the price option
– add a space between last guest and Sub-total
– make the grey box around paypal and checkout payment options the same size
– reduce spacing between online payment options and offline


Tony

  • Support Staff

January 27, 2015 at 7:54 am

Hi,

As you are using Multi Event Registration some of those points will require modifying a core EE function to output as per your requirements, which is not something we recommend.

– move the price option (here Full Price) to the next line so that the event name stays alone
– add a space between last guest and Sub-total

This would require a modified payment overview table.

However some of those options can be fixed using CSS.

– left align price option and guest name

.espresso_payment_overview.event-display-boxes.ui-widget {
text-align: left;
}

– make sure the price and currency are on the same line as the price option

Sorry, I’m not sure I follow here?

– make the grey box around paypal and checkout payment options the same size

This depends on the image size used for both of those payment methods.

You can apply something like:

.payment-option-lnk {
height: 53px;
}

To explicitly state the height for all the payment options.

– reduce spacing between online payment options and offline

h3#off_line_payment {
margin: 0;
}

We recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.


Alessandro Iannelli

January 27, 2015 at 12:40 pm

it works brilliant for the payment options boxes. But unfortunately, even aligned on the left, the payment table looks bad. The only way to make this looks nicer is to modify the payment overview table?
http://grab.by/Ebsm


Lorenzo Orlando Caum

  • Support Staff

January 27, 2015 at 1:00 pm

Hi, those changes would require editing the payment overview table.


Lorenzo


Alessandro Iannelli

January 27, 2015 at 3:09 pm

Okay Lorenzo. Do you offer this service if a buy a token? How does that work?


Tony

  • Support Staff

January 28, 2015 at 5:21 am

Looking at this image – http://grab.by/Ebsm

The table still appears to be not left aligned.

I tried taking another look at your event but seems that link is no longer valid, do you have another event we can view this on?

We can offer this customisation using support tokens if you prefer, if you purchase a support token here:

https://eventespresso.com/product/premium-support-token/

Then within Your Account Page you will find a link to redeem your support token which takes you to a page you can use to provide the relevant login details and a description of what is needed.


Alessandro Iannelli

January 28, 2015 at 9:08 am

Hi Tony, the snippet of code you sent me to left align the text worked well, but the results wasn´t visually very satisfying…It´s very annoing that there is not other way than modifying the core template to make this look nicer.
YOu can check the here:
http://www.homeopera.net/germany-performances-test
If you click on “Sign up”, you will be directed to the cart.
Let me know please.


Tony

  • Support Staff

January 28, 2015 at 10:44 am

The multi event registration payment overview table is one of the few areas within the EE3 front end that can not be easily customised using a template file.

We have a ticket to make this easier in the next version of EE3, it will check if you have a custom template file before using the standard output. The function that HTML is within is pluggable meaning you can override it with a custom function of your own.

This means you can copy the full default function and alter the HTML table within your custom function which will be used in place of the original. If you are comfortable with PHP + HTML I can provide details on the function you need to copy, and to where if you prefer?


Alessandro Iannelli

January 28, 2015 at 11:07 am

Yes that would be helpful! I’m not comfortable with PHP and HTML but I can ask someone. Thanks for providing as many details as possible.


Tony

  • Support Staff

January 28, 2015 at 12:26 pm

It was better if I pulled out the function and placed it into a file ready to use.

You will still need to modify the output to suit your needs but you need to download this file:

https://gist.github.com/Pebblo/6d28d2e4450c8fd6c299/

Open the zip file and place the custom_functions.php file within wp-content/uploads/espresso/ (You will need FTP access to your site to do this)

Then you can edit that file between line 147 to 202 to modify the output of that table.

The modifications to the code depend on the customisations you would like to make to the table.

You may want to contact one of our recommended developers available here:

https://eventespresso.com/developers/event-espresso-pros/

The support post ‘Payment overview page messed up’ 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