How to set up event booking with WordPress in 6 steps

Have you ever wanted to create an online store or event booking calendar in WordPress but didn’t know where to start? Do you want to know the best way to manage online events and an eCommerce website? If so, this guide is for you. You’ll learn step by step how to use The Events Calendar Pro and Event Tickets for online scheduling and event booking with WordPress. In addition, I’ll show you how to set up WooCommerce with Event Tickets Plus for selling tickets and, as a bonus, related products.

The best part? It’s fast and easy — no coding required.

Related: 15 free WooCommerce extensions and plugins for new eCommerce sites 

You’ll also learn how to style your calendar to fit your website’s colours without knowing a lick of code. We’ll do this via the budget-friendly and timesaving plugin YellowPencil. With it, you’ll be able to transform the default calendar from this …

… to this:

As you can see, going from bland to on-brand will make your booking calendar more attractive and user-friendly. YellowPencil allows you to see the changes you make in real time, so you can try different stylings, right before your eyes. If you decide you don’t like something, just undo it or exit without saving.

Related: Everything you need to know about creating a brand style guide 

Ready to set up event bookings with WordPress?

Here’s what you’ll need to get started:

1. A staging site to to test these new WordPress plugins and their functions

Why? Things can break on sites, especially when coding or updating. It’s a good thing that staging sites are included with most of GoDaddy’s Managed WordPress hosting plans.

2. A duplicate page (if you don’t have a staging site)

Don’t have staging? Duplicate the page you want to work on. Never work on a “viewable” page.

3. A backup

Whether you choose option 1 or 2, always back up your site first. That way, you can restore it immediately, should anything break.

4. The web page

If you haven’t built a web page yet, I suggest using Beaver Builder, a drag-and-drop page editor. I used their Pro version on all of these examples. That said, you can upload a free version to any WordPress site. In fact, GoDaddy’s Managed WordPress Hosting includes Beaver Builder Lite in their plans.

Then install your plugins:

1. YellowPencil

If you’re not a lightning-fast coder, YellowPencil Pro’s one-time price of $29 (at the time of this writing) is a steal. It pays for itself with all the time you’ll save using it. There’s also a free version available in the WordPress.org plugin directory.

2. The Events Calendar and Event Tickets

Next, install The Events Calendar and Event Tickets plugins (both free). The Event Tickets plugin allows for RSVP booking, but not online payments. You’ll need Event Tickets Plus for that. More on that later.

3. The Events Calendar Pro

Optional: For more functions, I recommend adding The Events Calendar Pro ($89, at the time of this writing). This allows for recurring events, which is a big time saver. It also allows you to show your calendar as a pretty photo grid like the photo above. What’s more, it lets you add the calendars, grids or lists to any page rather than just the “events” page. By comparison, the free version does not offer you all of those styling options.

Note: Regardless of which version of The Events Calendar you choose, please follow these instructions for the calendar plugin and these for the event tickets plugin before we resume. Their settings can be found in the WordPress Dashboard under “Events” and will look like this:

The basic settings include choosing whether you want the tickets to be viewed as posts or pages, location/venue, capacity and attendee information.

It’s actually self-explanatory, but I made a quick video below to guide you.

If you’d like to collect online payments for your events, classes or bookings, you’ll need Event Tickets Plus and WooCommerce. They integrate so seamlessly, there’s not much for you to do, except choose your settings. I provide a how-to video on that later in this guide.

6 steps to setting up event bookings with WordPress

You can start setting up bookings and selling tickets with WordPress in no time. Just follow the six steps below:

1. Create your events with The Events Calendar Pro.

2. Sell tickets with Event Tickets Plus & WooCommerce/

3. Insert your calendar.

4. Make visual tweaks with the Customizer.

5. Choose other views to show first.

6. Style the calendar with YellowPencil.

Bonus step: Create an eCommerce store with WooCommerce.

Let’s get you booked!

Step 1: Create your events with The Events Calendar Pro

As mentioned earlier, The Events Calendar Pro allows you to show your events on any page as a monthly or weekly calendar, in a photo grid, or as a vertical list with photos.

In addition, Pro allows you to set the events as recurring. This means you’ll only have to create an event once, rather than adding a photo, text and all the settings to several duplicate events.

 

Here’s a quick run-through of The Events Calendar Pro settings:

How to create recurring events as RSVPs (non-saleable tickets):

Note: If you’re using the free version of The Events Calendar, you can still follow the video tutorial below, but you will not see the option to “add more events.”

1. Go to TIME & DATE.
2. After filling in the first date, click on the tab called Schedule Multiple Events.
3. Next to the Event Series, click Add more events.
4. A drop-down menu will open; select your recurring event to be either daily, weekly, monthly, etc.
5. Give the series an end date.
6. Select the venue and organizer.
7. Go to the Tickets section; select Create RSVP.
8. Type in the type of ticket for reference purposes.
9. Then choose the capacity amount and hit Save.
10. Set a featured image.
11. Select a category and add searchable tags.
12. Select Sticky in Month View to see your event on hover in the calendar.
13. Hit the Preview button at the top right-hand side of your WordPress Events Page to view it before publishing.
14. If it looks good, click Publish before leaving the page.

Step 2: Sell tickets with Event Tickets Plus and WooCommerce

If you’d like customers to actually buy your tickets online, Event Tickets Plus is the way to go. Here’s the BIG PLUS: You can collect online payments for the tickets using the free WooCommerce plugin.

 

Why? Because chances are, when people pay in advance, they’ll attend the event. By contrast, if they wait to pay at the door, it’s easier for them to cancel. It’s similar to how getting a gym membership helps motivate you to work out. After all, you’ve already invested in it, so you want to get your money’s worth!

As promised, the video below shows you how to easily separate your recurring tickets in Event Tickets Plus. This is so that your inventory on each subsequent event is not linked to the previous event. If the event is not separated, then a sell-out on one night means they’ll be no tickets on the following night. No bueno!

Separate your recurring events via “set capacity for this ticket only”

While I did hear through the grapevine that Modern Tribe is working on a way for the tickets to be separated more easily, you might need a solution pronto. So, here’s the work-around that I use.

Enable the Add to Cart button in Events Tickets Plus

Online customers like seeing a clearly visible Add to Cart button. To make this show up on your events, you must choose the start date of the ticket sales, as well as when the ticket sales cease.

1. Go to Tickets.
2. Click Add New Ticket.
3. Enter the ticket type/name that will appear on the emailed tickets.
4. Enter the Ticket Price.
5. Choose Set capacity for this ticket only.
6. Expand the Advanced section.
7. Add a Description that will show on the ticket.
8. Add your Start sale and End sale dates.
9. Add a SKU identifier for each ticket.
10. Optional: Add Attendee Information, if you’d like.

Don’t forget to click Save ticket before previewing and publishing the ticket!

Pro tip: If you forget to add the Start sale date of the ticket sales, you/your customer won’t see your Add to Cart buttons. Ditto if the start sale date is in the future. In this case, the button is hidden until that date arrives.

Therefore, if you notice that your Add to Cart buttons are missing, and you want to see them, make your start sale date the same as your current time/date. Then voila, they will appear.

Add a ticket header photo in Event Tickets Plus

For your tickets to have a photo, be sure you click the little pencil icon next to the tickets. When you do, the edit function will open so that you can add a Ticket Header photo.

Customizing transactional emails in WooCommerce

Did you know that WooCommerce sends auto-emails to customers after they purchase a ticket or pay for a booking? Here’s a default email from WooCommerce after someone buys a ticket:

As you can see, using your brand colours will make your WooCommerce emails attractive. Usually, a clean, easy-to-read email is all your customer wants at this stage.

By now you might be wondering: Why is email integration so important?

Emails keep customers aware of the purchasing process, which in turn, gives them confidence that “all is well.”

But who has time to set this up individually? No one. That’s why WooCommerce’s auto-setup is your friend.

Related: Effective strategies to boost abandoned cart email conversion rates

Here’s a quick video showing you how WooCommerce makes short work out of collecting payment and setting up those emails.

Because the free WooCommerce does not allow email modifications “right out of the box,” you have three options:

1. Use plugins that do the coding for you.
2. Do some PHP coding via WooCommerce tutorials and docs.
3. Hire a web developer. (I suggest visiting the Facebook group for Beaver Builder or the WooCommerce website.)

Your ideal choice depends on your comfort and skill level. For plugins:

• WooCommerce Follow Up is an email customizer plugin packed with features, including personalization features and Tweetable follow ups. Cost (at the time of this writing): $99.
• The Recover Abandoned Cart costs less than half of that, but has limited features.
• A free option is Abandoned Cart Lite.

Note: I haven’t used any of those plugins yet. So if you’re nervous, the WooCommerce plugin is probably your safest bet.

If you’re feeling brave and want to customize your email with PHP, follow this WooCommerce video tutorial. But remember to back up your site first and only try this on a staging site.

But for now, let’s continue with the basic setup so you can wrap your head around the settings and functions at your disposal.

View your WooCommerce customer info

This screenshot shows what your customer info looks like in your dashboard. The order notes give you some insight into their process:

This shows the orders and attendees for every ticket you create:

Finally, here’s what an event page looks like after you’ve added all images and settings I’ve shown you in the backend of your WordPress site:

Pretty sweet setup for no coding, right?

Step 3: Insert your calendar

Let’s say you’ve made a handful of events as demonstrated above. To learn how to insert your calendar into a page, watch the video below.

I used the shortcode for showing the calendar as a Month View. This means that when the page loads, this is the first option shown to the site visitor (as opposed to a list or photo grid view).

In addition, a toggle bar above the calendar allows the visitor to select any of the other options. Later, I’ll show you how to make those other options a “first view,” too.

For now, let’s continue working on the Month View. This screenshot shows the WordPress customizer:

And this is where Step 4 begins…

Step 4: Make visual tweaks with the Customizer

Before you code anything with YellowPencil, make as many aesthetic changes as you can within the Customizer’s basic settings.

Just go to: Appearance > Customize > The Events Calendar

From there, you can make changes in text colour, highlighted colour, background, etc. Whatever page you’re on, you can see colour changes in real time via these dashboard settings.

Step 5: Choose other views to show first

To show your event photos as a lovely photo grid layout as shown above, you’ll need The Events Calendar Pro version. From there, just add your desired shortcode into an HTML module in Beaver Builder, like I showed in the video above.

But what if you’d like to have a Calendar View on one page and the Photo Grid View on another? It’s all easy with The Events Calendar Pro. Just use the HTML module on your chosen page and use the shortcodes below for whatever view you desire.

Shortcodes for different Events Calendar views

• Month View: [tribe_events view=”month”]
• List View: [tribe_events view=”list”]
• Day View: [tribe_events view=”day”]
• Photo View: [tribe_events view=”photo”]
• Week View: [tribe_events view=”week”]
• Map View: [tribe_events view=”map”]

Since many people appreciate seeing calendar dates and event info at a glance, be sure to set the image to Sticky in the Calendar View. That makes an info box appear whenever your mouse hovers over an event title.

Step 6: Styling the calendar with YellowPencil

YellowPencil is like an automatic coder. Even if you know how to code, it’s the fastest way to see changes in real time. If you’re a beginner at website building, it’s also nice to not have to look up what codes to use all the time.

Want to see YellowPencil in action? Here’s a quick video of a colour change on a mini-calendar widget.

Here’s another video showing more customizations using YellowPencil Pro on a full calendar with Events Calendar Pro:

Bonus Step: Creating an eCommerce store with WooCommerce

With all of your cool events, why not sell related products on your site, too? Here’s how to add related product pages in WooCommerce. If you keep it simple, it can look quite good.

From the WordPress dashboard:

1. Go to Appearance > Customize > Content to see the settings shown below.
2. Likewise, also open Customize > WooCommerce for other settings.

Once you’ve done that, you can start making some pages. Here’s a video showing how to do that in less than three minutes.

Creating a simple WooCommerce product

Here are the steps:

1. From the WordPress Dashboard, go to WooCommerce > Products > Add Product.
2. Enter a product Title and Description.
3. Go to the Product Data panel and select downloadable (digital) or virtual (service).

Note: Virtual products don’t require shipping. Therefore, an order with virtual products won’t calculate shipping costs.

Related: How to create a compelling eCommerce product page

Add product data

The Product Data meta box is where important product data is kept, such as:

• Stock Keep Unit (SKU): This tracks products, therefore each SKU should be unique and should include a letter with a number (e.g., WedEv01. That could stand for Wedding Event 01.
• Regular Price: An item’s normal/regular price.
• Sale Price: An item’s discounted price that can then be scheduled for certain date ranges.

Whether you’re a coder or not, you deserve a HUGE congrats for coming this far. After all, you’ve just set up your online Booking Calendar and WooCommerce shop. That’s a big undertaking!

As you can see, adding ecommerce to your website is possible with no coding skills. For more customizations, you can always hire a web developer to refine your online store. But until then, this is a great way to start earning some online sales, while learning how your store actually works.

If you ever get scared about learning something techy, remember that you have a safety net.

When you buy any pro plugins, the plugin developers will help you with technical problems. Ditto for GoDaddy’s Managed WordPress — the GoDaddy team is there to help you with your hosting. So backup, dive in, and enjoy the process.

This concludes my WordPress DIY Guide on how to set up event booking with WordPress. I hope you gained the confidence to build your own online shop or calendar booking site!

The post How to set up event booking with WordPress in 6 steps appeared first on Garage.