Customizing PDF Tickets and Badges
With the help of the MyTicket Events WordPress plugin, you can generate beautiful PDF printouts suitable for:
- conference badges
- meetup events
- concert attendees
- party organizers
- other event types
Each ticket includes a QR code that can be validated using a free mobile application available on the Play Market, called MyTicket Scanner App. Feel free to download it to test your tickets.
It is also recommended that you have some basic experience with HTML and PHP, as you may need to dig into the code a little. At the same time, you have the freedom to customize your tickets in any way you like.
Below is an example of the default ticket that is generated upon checkout and can be emailed directly to your clients.
The system supports two types of tickets:
- General Ticket – This ticket includes all records of the purchase and can be validated at once using the MyTicket Scanner App.
- Individual Tickets – Ideal when one person buys tickets for multiple attendees. Tickets are split into separate PDF files upon checkout and can be emailed individually to each ticket holder. You can enable this ticket type from your WordPress admin panel under Appearance > Customizer > MyTicket.
This option is perfect for conference badges, where the attendee’s name is printed on the badge along with the QR code. Each ticket can be validated individually without affecting the status of other ticket holders from the same purchase.
To start customizing your first ticket, you need to copy the templates folder from the MyTicket Events plugin into your theme’s root directory.
Now copy the templates folder to the root directory of your theme, but make sure to rename it to myticket-events. See the image below.
Now you are ready to customize your first ticket. For example, navigate to the ticket-individual folder and open the index.php
file. This file is connected to the mPDF library and the WooCommerce plugin. You can modify the HTML structure, add custom PHP code, or call WooCommerce methods to retrieve additional order data and display it on the PDF ticket.
Ticket Background Image
While this may be too specific, we’ll demonstrate a simpler example. Let’s change the background image of the ticket so that it is displayed without any offset and rendered behind the main HTML content.
For this purpose, you can use the following methods, where https://kenzap.cloud/static/myticket/conference_badge.jpg
is the path to a publicly accessible image:
$mpdf->SetDefaultBodyCSS('background', "url('https://kenzap.com/static/myticket-events/conference_badge.jpg')"); $mpdf->SetDefaultBodyCSS('background-image-resize', 6);
You can paste this code at the beginning of the index.php
file, but after the mPDF library is first declared. See the image below:
As a result, you can have a beautiful ticket preview as shown below. Note that all the data, except for the ticket holder's name and the QR code, is taken from the image itself (../conference_badge.jpg
). You can also define your ticket structure using HTML and CSS, but we recommend using a pre-designed image, as it will simplify the development process of your printout.
Checkout Information
There may be cases when you need to provide additional information in the PDF ticket and save it under the WooCommerce order. The MyTicket Events plugin supports various ways of defining custom fields that can be passed to the checkout or cart. Custom fields can also serve as additional input tools during checkout, for example, to collect the ticket holder's name or email. Here are the three most common ways of defining and using custom fields:
- Defining custom static fields as hardcoded text for informational purposes.
- Defining custom dynamic fields as additional input fields to collect data from the user, such as the ticket holder’s name, email, or physical address.
- Defining custom extension fields to extend existing zone or seat information directly on the MyTicket Dashboard.
Custom Static Fields
As you can see in the image above, the custom "Info" labeled text is displayed. To define a custom static field like that, which will be shown on the WooCommerce cart, checkout, and even in PDF tickets, go to Appearance > Customizer > MyTicket > Checkout > Checkout Fields. Then, click the "Add New Field" button and provide the information as shown in the image below.
Make sure to select the field type as "Note" and provide an appropriate field key value. The field key value is not visually displayed, but it is used internally to reference this value in other parts of your website, such as in the PDF ticket.
Refer to the image below for more details.
You can also define date and time custom fields, which are taken from the MyTicket Event Extra fields defined under the WooCommerce product settings.
For this purpose, you need to define the field key as "date" and another field key as "times." Refer to the image below.
Custom Dynamic Fields
Custom dynamic fields are defined in a similar way to custom static fields described in the previous section. Unlike static fields, dynamic fields can collect additional information from the user, such as their email address, physical mailing address, etc.
Make sure to select the appropriate field type, such as Text, Textarea, Email, or Checkbox. Once the delivery address is defined, it will appear as shown below in the checkout.
The delivery address can then be retrieved in the PDF ticket in a manner similar to the info text example described in the previous section.
Custom Extension Fields
Custom extension fields extend the default structure of the layout object defined under https://myticket.kenzap.cloud/. To define a custom field via the MyTicket Cloud dashboard, first switch to assign mode, and then click on the zone.
As shown in the image below, there is an "Add Custom Field" link. Click on it to add a new custom field. To change the label of the newly created custom field to your desired name, simply click on the text and type over it.
Changes will be saved automatically once the "Continue" button is clicked.
Please note that once a custom field is defined for one zone, it will automatically show up for all other zones. This means that when a custom field is defined, it is applied globally to all other zones as well.
Custom extension fields are assigned key values in the following format: cf1, cf2, cf3, etc. This allows you to retrieve custom field information during checkout and in the PDF ticket.
To define this, go to Appearance > Customizer > MyTicket > Checkout > Checkout Fields, and add a field of type "Note" with the corresponding field key value, such as cf1, cf2, etc.
Eventually you can retrieve the field under the PDF ticket by calling wc_get_order_item_meta function as shown in the image below.