This article is intended for those who want to create their own Concert Hall, Stadium or other Venue related layout in WordPress that supports Seat Reservation and ticket selling capabilities.
Before you continue you may need these things set up first:
- WordPress environment setup
- MyTicket Events plugin installed
- WooCommerce plugin installed
- Image of your layout as shown above
1. Create Zones
In order 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 layout title. Once the layout is added the 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 if 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 mouse cursor to the next place 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 such a way you can create custom shaped zones like Rectangular or Polygon that repeats certain elements of your layout image.
To cancel zone drawing before it is finalized click on ESC keyboard button. This won’t affect previous zones.
Note that there is tabbed navigation bar above the drawing area that supports the following functionality:
- draw – turns on zone drawing mode as just explained above.
- edit – mode where created zones can be removed or modified.
- seats – mode where seats can be assigned to the zone.
- save – permanently store changes stored under your account.
- reset – start everything from the beginning.
- export – export layout to your website.
During edit mode you can modify created zones. For example, click on zone’s dot to relocate adjacent lines or click on the zone area itself to relocate it all to another location. Note, you can use mouse or keyboard arrow keys during this operation
To remove the zone click Delete keyboard button while it is selected.
Once all the zone are attached to the image you can can create seat map that is available for individual ticket reservation.
2. Allocate Seat Map
In order to start allocating seats you first need to switch to seats mode from the navigation tab above then select zone. 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
Simply drag and drop seat one by one into the zone. Make sure to adjust seat size with the help of 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 placed into the zone it is recommended to enter its custom seat and row number as this information will be used during 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 to your website. Click on Export button from navigation bar and copy the JSON code from the window provided. Then 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 default hall placeholder. This is for representation purpose only and will have 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.
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. This should be enough to start selling your first tickets with seat reservation using custom hall/stadium layouts.