Mapping Seats for Concert Reservations in WordPress [MyTicket Events Plugin]

This article is for those who want to create their Concert Hall, Stadium, or another Venue-related layout in WordPress that supports Seat Reservation and ticket selling capabilities.

Before you continue, please make sure you have:

If you do not have a WordPress environment yet, you can use free Kenzap Cloud for test purposes with demo hall layout already loaded in the product or refer to live hall demo preview.

You can also contact Kenzap support team for professional paid assistance.

1. Create Zones

To start creating your first seat reservation layout, you first need to assign logical zones and link them with your layout image. For this purpose, you can use our online image mapping software. Go to your cloud account then Other Services > MyTicket.

The image above shows MyTicket Dashboard. Click on Create New Layout button and provide the layout title. After you create the layout, a new row will appear. Click Option > Edit to continue. In the new window, drag and drop your image into the “Drag an image of your layout below” container then, Upload This Layout.

Now you can start drawing zones on top of your image layout. With your left mouse button, click on the place you wish to start drawing (usually a corner of a sector) and navigate the mouse cursor to the upcoming location, where you want to fix the position of the line. Continue till you reach your starting point by clicking exactly on the same square dot.

In this way, you can create custom-shaped zones like Rectangular or Polygon that repeats certain elements of your layout image.

To cancel the zone drawing, click on the ESC keyboard button. Note that this will not affect previous zones.

There is a tabbed navigation bar above the drawing area that supports the following functionality:

  • draw – turns on zone drawing mode as just explained above.
  • edit – zone customization mode (reshape, relocate, rotate).
  • seats – mode to assign seats to the zone.
  • save – permanently stores changes stored under your account.
  • reset – remove exiting layout and start from the beginning.
  • export – export layout to your website.

During edit mode, you can modify created zones. For example, click on the zone’s dot to relocate adjacent lines or click on the zone area itself to move it all to another location. Note, you can use mouse or keyboard arrow keys during this operation.

To remove the zone click DEL keyboard button while it is selected.

When all zones are attached to the image, you can create a seat map, that is available for individual ticket reservations.

2. Allocate Seat Map

To initiate seat allocation, from the navigation tab above you need to switch to seats mode and select the zone that you want to edit. The modal window will show up. Before you click continue, fill in the following information:

  • Number of tickets without seat reservation
  • Number of tickets with seat reservation

Now drag and drop seats one by one into the zone. Make sure to adjust seat size with the help of a slider in the top left corner of the screen. By default, each seat has a number displayed in the middle of the circle.

Once the seats are allocated to the zone, you can enter custom seat and row numbers as this information will be used during the booking process and displayed upon checkout and PDF Ticket printout. After seats are attached to the zone, close the window by clicking on the red cross.

Do not forget to save changes by clicking on save button from navigation bar. This will keep your recent modifications even if you reload the page or close browser’s window.

Repeat seat attaching procedure untill all zones are finalized.

3. Publish Hall Online

Now that all the zones are created and seats attached it is time to publish your interactive seat layout on your website. Click on the Export button from the navigation bar and copy the JSON code from the window provided. Then under your WordPress admin, go to Pages > Add New and find MyTicket Hall Gutenberg block.

Note that this step requires MyTicket Events plugin installed.

Once the block is added to the page it will automatically load the default hall placeholder. This is for representation purposes only and will have a different preview on your website frontend. Make sure that the block is in focus so that it loads additional settings pane on the right.

Under this pane find Layout > Seat Code and paste the JSON code that you copied earlier.

Under the right pane you may find other various settings related to widths, paddings, colors etc.

For imports of layout with 5000 seats or more it is recommended to use alternative layout saving option. Please refer to Importing Layouts with 5000+ Seats guide.

4. Link WooCommerce with Reservations

Now your website has a working and interactive hall layout integrated. It responds to hover events and seat selection but it is not yet linked with WooCommerce and not ready to sell tickets online.

In order to solve this go to products section from your WordPress admin, create new product, populate MyTicket Extra Details box:

  • Event begins
  • Event ends
  • Location Title
  • Location Address

Now find the product ID number from the URL of your browser. Some browsers may hide it before you click the URL window. Based on the example from the image below the product ID is 2577.

This product ID should be copied to MyTicket Hall > General > Product ID settings under the pane on the right, see the image below.

Assigning product ID to MyTicket Hall

This should be enough to start selling your first tickets with seat reservation using custom hall/stadium layouts.

5. Keyboard Shortcuts

While working with large hall layouts such as stadiums, assigning every seat manually might be extremely challenging and time-consuming. With the MyTicket Events cloud dashboard, you can rely on additional tools that can dramatically save your time and help you skip manual drag and dropping techniques.

Duplicate or Rotate Zone

During Edit mode you can copy paste the zone by clicking Ctrl + C on your keyboard. This operation will make an exact replica of the zone and all of its seats.

Use Ctrl + U to rotate selected zone clockwise or Ctrl + J to rotate the zone counterclockwise.

Auto Allocate New Row – Key D

When you open the zone, you can see that all of the seats are placed in the top left corner of the screen. You can start auto aligning seat row by row by clicking on the D button on your keyboard. Here is how it works:

  1. Click on the D button on your keyboard
  2. Type the number of seats to allocate, for example, 12.
  3. Click on the zone area with your left mouse button to set the first seat of the row.
  4. Click a second time on the left mouse button on the zone area to set the last seat of the row.
  5. All other seats between the first and last seats will be allocated automatically.

Auto Realign Existing Row – Key A

When you assign a seat to the zone manually, you probably have noticed that most of the seats are not accurately aligned. To bypass this limitation, you can hold A letter on your keyboard and hit on the first seat in the row, and then without delay on the last seat from the same row while still holding A letter pressed.

Auto Assign Seat Numbering – Key Q

To assign a custom price, seat number, and row number to multiple seats at once, use Q command. Hit on the Q button on your keyboard and slowly directly through each seat within the desired seat. Each next seat will take the same price and row number from the previous seat while incrementing the seat number by 1.

Move seat – Key Arrows

Use arrow keys both to relocate the zone or individual seats inside the zone. With every arrow keyboard click the zone or a seat is moved by one pixel only. This makes it very convenient to perform small adjustments in the layout.

Revert Changes – Key Z

When you made a mistake while aligning the seats you can easily revert changes back by pressing Ctrl + Z on the keyboard.

Get The Service

Video Guide

Related Articles

What is MyTicket Events Plugin and How to List Your First Event?

How to Use MyTicket Scanner App to Validate Tickets?

How to Customize PDF Ticket with MyTicket Events Plugin?

Understanding MyTicket Events JSON Booking Structure

Overriding hall order summary table in MyTicket Events plugin

How to Change Status Logics of MyTicket Scanner App?

Was this article helpful?