Support

Home Forums Event Espresso Premium Adjusting Printed Ticket Displays

Adjusting Printed Ticket Displays

Posted: August 19, 2016 at 10:36 am


Skye

August 19, 2016 at 10:36 am

Hello,

We currently use Event Espresso to sell tickets to a number of events, but we have noticed that when guests select the option to print their tickets, there is a lot of information that ends up taking up two pages, including the full-sized image used on our WordPress site/Event Espresso ticketing page, etc. I have not been able to locate anywhere I can go in and adjust the size and content of printable tickets. Help in doing so would be much appreciated.

Thank you!


Lorenzo Orlando Caum

  • Support Staff

August 19, 2016 at 10:55 am

Hello,

The information can be changed through Event Espresso –> Messaging –> Ticket.

The notification that handles delivering access to that ticket is the Ticket Notice message type.


Lorenzo


Skye

August 19, 2016 at 11:10 am

Thanks for pointing me in that direction. When I go to messages and select default message templates I am able to view an option for editing. However, I am having difficulty making the adjustments. I would like to reduce the size of our logo and the font size of the ticket, but cannot find anywhere to do so. Additionally, is it possible to eliminate altogether any of the tables included in the default ticket?

Thanks again for your help.


Lorenzo Orlando Caum

  • Support Staff

August 19, 2016 at 11:50 am

Hello,

Are you referring to the event image shortcode [EVENT_IMAGE] (https://cl.ly/1U3D0X1t2m10)?

That uses the image that you upload through the event editor. If you are finding that a large image is pushing the ticket onto two pages, then I would try resizing the featured image and then re-uploading a smaller one.

Alternatively, it could be removed and replaced with another image that you upload. If you make this change, then please remember that this image will be used for all events instead of a specific image being retrieved and displayed for each event.

The ticket template is built using a table formatting. Before you start removing content, I would try adjusting the image size to see if that helps.

It would also be helpful to see a link to a ticket that spans across two pages so we can share more feedback.

Thanks


Lorenzo


Skye

August 19, 2016 at 12:51 pm

I think it could be good to resize the image and will try that if you don’t have other suggestions after viewing the link. However, the logo alone isn’t all that’s pushing receipts onto two pages–as I mentioned, the font size is particularly large, and some of the tables could probably be eliminated to save space.

Here is a link to a 2-page ticket: https://celticarts.org/?ee=msg_url_trigger&snd_msgr=html&gen_msgr=html&message_type=receipt&context=purchaser&token=1-cb8644fcd6501c32ed2da3957d5ba377&GRP_ID=1&id=7938

Thanks again.


Josh

  • Support Staff

August 19, 2016 at 5:03 pm

You can eliminate some of those tables to save space by editing the Receipt template in Event Espresso > Messages.


Skye

August 22, 2016 at 10:35 am

I have found the screen to edit the receipt template, but am having difficulty actually doing so. For instance, when I attempt to eliminate the table displaying the tax information, I can only eliminate the text, not the entire table itself. Trying to delete in the visual display and in the shortcode both don’t make the change of deleting the table altogether.

Additionally, I would also like to minimize the font size in an effort to reduce the ticket down to 1 page. Do you have suggestions on how we can do this? Printing the 2-page (or more) receipts like the one I provided the link to is an inconvenience for our guests and something we very much want to solve for them.

Thank you.


Tony

  • Support Staff

August 23, 2016 at 4:06 am

I have found the screen to edit the receipt template, but am having difficulty actually doing so. For instance, when I attempt to eliminate the table displaying the tax information, I can only eliminate the text, not the entire table itself. Trying to delete in the visual display and in the shortcode both don’t make the change of deleting the table altogether.

In visual mode you can just highlight the table and remove it – http://take.ms/WnOLt

Just hitting delete after highlighting the section should remove it – http://take.ms/x4qBn

If there are still elements remaining that you want to remove you will need to swith the editor to text mode and manually remove those.

Is that not what your trying to do?

Additionally, I would also like to minimize the font size in an effort to reduce the ticket down to 1 page. Do you have suggestions on how we can do this? Printing the 2-page (or more) receipts like the one I provided the link to is an inconvenience for our guests and something we very much want to solve for them.

That will not be not an easy task and will require much more than just reducing the font size. Remember that the length is also determined by the ticket and event selection made by the user, you can remove details to reduce the output down some but will struggle to keep all receipts within a single page.


Skye

August 23, 2016 at 9:53 am

Thanks for your help. I’ve managed to delete some tables, but the receipt is still spread onto 2 pages due to the excessive font size and spacing. Below is a link to an updated receipt. Would you please take a look at this and provide your recommendations for adjusting the receipt to a single page?

Thank you

https://celticarts.org/?ee=msg_url_trigger&snd_msgr=html&gen_msgr=html&message_type=receipt&context=purchaser&token=1-de5dd2915df6c7edcae566e0ab849bc8&GRP_ID=1&id=7997


Josh

  • Support Staff

August 23, 2016 at 12:03 pm

Hi there,

The more you remove from the template, the better your chance to get a single page. You can also make adjustments to font sizing/spacing by changing the HTML headings. For example, where you have an h3 tag, you can make the heading smaller and use less space by changing it to an h4, h5, or even h6 tag. So for example, this:

<h2 id="invoice-hdr">Order Confirmation</h2>

can be changed to this:

<h3 id="invoice-hdr">Order Confirmation</h3>

and this:

<h3 id="invoice-date">Date: <span class="plain-text">[PRIMARY_REGISTRANT_REGISTRATION_DATE]</span></h3>

can be changed to this:

<h5 id="invoice-date">Date: <span class="plain-text">[PRIMARY_REGISTRANT_REGISTRATION_DATE]</span></h5>

Also, where there are some specific blocks of text that you want to make them smaller, you can add the “small-text” class. For example, this:

<li>

can be changed to be this:

<li class="small-text">

A few more suggestions that will help conserve space is you can use a smaller logo image, and remove any extra line breaks from within the templates.


Skye

August 23, 2016 at 12:51 pm

Thanks for your reply–that’s helping us get closer. I was able to change the header size for a few sections looking for the h tag; there is a link below to the new receipt.

https://celticarts.org/?ee=msg_url_trigger&snd_msgr=html&gen_msgr=html&message_type=receipt&context=purchaser&token=1-53d7fdb8b43d3afbd320559b01392ed6&GRP_ID=1&id=8003

I have noticed, however, that the PDF version of the receipt does not print the way it prints. For instance, you’ll notice on the link that the Date/Time section and Venue section appear on the same line of text. When printed, the Date/Time has an extra, blank bullet underneath the information, and then drops down a few lines before displaying the venue information. If we could move those onto the same line the way the PDF displays, it would really help in terms of space.

There are additional blank bullets that appear on the printed version that do not appear on the PDF–one above the attendee information in the Registration Details section, one below the “How did you hear about this event?” question, one below the Date/Time for the workshop, and one above the attendee information again for the workshop’s Registration Details section. Eliminating these blank lines would really help us tighten up the spacing on the page and possibly move it into one page.

I also found that, when printed, the text for the Date/Time and Attendee was larger than the header size, although it appears as the same size on the PDF. Could you please highlight where in the code I can make these adjustments?

Another question I have is regarding minimizing the header size for the Event Name and Payments section. I was not able to find the h tag in the code for them. If you could point that out as well, it would be much appreciated.

Thanks again.


Skye

August 23, 2016 at 12:54 pm

Apologies, meant to write “does not print the way it looks in the PDF” at the beginning of paragraph 2.


Josh

  • Support Staff

August 23, 2016 at 2:13 pm

You’ll need to look through the template for h tags from start to finish, they’ll typically look like this:

<h1>Some Heading text</h1>
<h2>Some more Heading text</h2>


Skye

August 23, 2016 at 4:11 pm

Still encountering some of the same issues with the recommended changes. For reference, here is the new receipt: https://celticarts.org/?ee=msg_url_trigger&snd_msgr=html&gen_msgr=html&message_type=receipt&context=purchaser&token=1-af19a1cad243f519fef608ccdfeba476&GRP_ID=1&id=8005

I’ve gone through the document and still am encountering the detail text under the “Date/Time” headers appearing larger. I have searched for both the h tags and li tags. Would it be helpful to paste the code (with modifications) for your review?

Additionally, I’m still encountering the receipt printing differently than it appears as a PDF. The Date/Time and Venue appear on the same line as a PDF but (maybe since the date/time details font is larger printed than it appears on the PDF?) they appear vertically, not horizontally, next to each other on a printed receipt, eating up even more room.

I’m also having a problem with bullets without any text that don’t appear on the PDF but do appear on the receipt causing unnecessary spacing. There is one above the ticket detail information under the “Event Name” heading for both the concert and workshop portions, one after the Date/Time details for both the concert and workshop portions, one before and one after the Attendee information under the “Registration Details” heading.

Additionally, I cannot find a h tag in the payment section of code in order to reduce the header font.

Thanks for your help.


Josh

  • Support Staff

August 24, 2016 at 7:38 am

Hi Skye,

Anywhere that you want the text to be smaller, you can add the small-text class:

class="small-text"

and anywhere that you don’t want bullets, you add:

style="list-style-type: none;"

Some of the domPDF styles that are used when the PDFs are generated are slightly different than the screen styles, so that’s why you’re seeing differences between the two.


Skye

August 24, 2016 at 9:42 am

I tried that the code for eliminating the bullets. I still have all of the bullets as well as the code line appearing on the receipt. I am assuming I put it in the wrong place–what I did was just copy it between the items in the code where the bullet was appearing on the printed version of the document. Here is a copy of the new receipt: https://celticarts.org/?ee=msg_url_trigger&snd_msgr=html&gen_msgr=html&message_type=receipt&context=purchaser&token=1-766209cddf7a688bb3130fca43e0524c&GRP_ID=1&id=8010

Please let me know the exact placement I need to put that line of code for both the bullets and the small text in order for them to effectively change the code.

Additionally, you mentioned that some PDF styles appear differently than screen styles. If that is the case, I would appreciate a solution to the problem of the date and time and venue appearing on different lines on printed receipts but the same one on PDFs.


Josh

  • Support Staff

August 25, 2016 at 4:46 am

This is the result of you breaking the html code. You’re going to need to fix the mismatched html tags. For example, in your receipt’s DATETIME_LIST section, there’s this:

<li class="small-text">
	[DTT_NAME] <br />
	[DATETIME_START] - [DATETIME_END] ([DATETIME_TIMEZONE]) <br />
<p class="ticket-note">
<li class="small-text"></ul></div>

When you open elements with <li> without a closing </li> you’ll end up with broken code in the invoice, as you’ve seen. So to fix, you’ll need to correctly match those tags like this:

<li class="small-text">
	[DTT_NAME] <br />
	[DATETIME_START] - [DATETIME_END] ([DATETIME_TIMEZONE]) <br />
<p class="ticket-note"></p> <!-- close the p tag or just remove this line -->
</li></ul></div>

The support post ‘Adjusting Printed Ticket Displays’ 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