In this tutorial, we’ll guide you through the process of enabling online appointment bookings on your WordPress site built with the Gutenix multipurpose theme.
This is going to be useful for those of you who run service-based businesses, e.g. beauty salons, barbershops, clinics, schools, and want to start accepting online bookings.
As a multipurpose theme for WordPress, Gutenix offers a few dedicated starter sites for this purpose, including:
Docsays and Robinson for doctor appointments
Bestplumber for home-service companies
Fitnession for fitness club appointments
Craftix for hourly boat rentals
and more!
But since an appointment booking type of site usually features services, employees, and portfolios, you might really find almost any Gutenix template capable of handling this sort of content.
The customization process is a breeze thanks to the block editor, Elementor and Brizy builders Gutenix is packed with.
These beautiful templates, however, don’t have an automated appointment booking functionality by default.
To add a booking widget and enable online WordPress appointment reservations, you need a plugin.
To set you free from third-party plugin reliances, we’re going to use our own creation, the MotoPress Appointment Booking WordPress plugin for this purpose. You need this plugin to reproduce everything you’ll see in this guide on your site.
Let’s assume you have already installed the Gutenix theme on WordPress. If not, however, we have a quick Gutenix installation guide to help you get started smoother!
We’ll describe the process in broad strokes to allow you to assess the key features and benefits of the appointments plugin for WordPress.
Also discover appointment booking solutions based on WooCommerce.
In this guide, I’m using the Robinson healthcare and clinic template to show you can enable clinic appointment bookings.
The theme is based on the block editor so you’ll have access to the latest WordPress editing technologies.
Step 1. Install and activate the MotoPress Appointment Booking plugin
You need the MotoPress Appointment Booking plugin installed and activated on your WordPress site powered by Gutenix. It allows for hourly appointment booking or of any other duration.
The plugin will add a standard menu that lists bookings, employees, schedules, services, etc. So you’ll need to fill in this data after configuring general settings.
Step 2. Set currency, time slots, and more via General settings
Apply some basic settings first by going to the Settings > General menu. Some of the key settings you can apply here include:
- Default time step (a 10-minute one is usually fine – it’ll help you create appointment, break and other durations up to 10 minutes)
- Currency
- Confirmation mode (go through each one manually or confirm automatically)
By switching to the Emails tab in the same menu, you’ll see all types of email notifications you can customize. For example, you can automate new booking email templates to the client and website admins.
You can also add some brand identity by applying the needed colors, uploading a logo, etc. These emails are sent when you receive a booking.
Step 3. Add staff members via the Appointment WP plugin
Let’s add employees your clients will be able to book appointments with.
If I’m creating a site for a clinic, I can add unlimited doctors and optionally feature some bio, skills, title, schedules, and even social networks of them. The plugin allows you to do that for every person:
You can output any information about a doctor you want on the website. The styling can be adjusted via the Customizer settings:
We’ll talk a little bit later about how to show the information sourced from the WordPress Appointment Booking plugin on the site.
Step 4. Add locations where you operate
The WordPress appointment plugin enables you to add various locations and unlimited departments / shops / salons and assign different employees to different places.
Create locations based on your realities – those can be cities, clinic departments, classrooms, etc.
For example, I can add addresses of my clinic so that patients can choose the needed one when placing a booking:
Locations can be categorized and accompanied by images.
Step 5. Create employee schedules
Go to the Schedules menu to add regular and custom staff schedules.
Employee schedule settings
Choose an employee’s name and the primary location where they work. This can be later customized for specific days to allow your employees to move between locations within a regular schedule.
Timetable settings
For each employee, you can create a detailed schedule for weekdays and weekends.
Timetable settings
In this menu, you’ll be able to create a detailed schedule for each day of the week, including weekends.
There are three activity types that a working day can consist of:
- Working hours
- Lunchtime
- Break
Obviously, working hours are those slots that are open for bookings, lunchtime and break periods are closed.
To add some scheduling flexibility, apply extra parameters:
- days-off by choosing dates
- custom working days
Step 5. Add services
The MotoPress WordPress Appointment Booking plugin allows you to add and categorize any number of services – the key selling point of your site.
In addition to images and description, you can customize the following settings:
- Service price
- Service duration – it can be any depending on your primary time slot
- Buffer times before and after the appointment – the time an employee needs to get prepared for the next booking
- A time before booking globally for appointments
- Eligible employees who can provide this service
- Add service categories.
You can also customize some service settings for particular employees:
Step 6. Add the service booking wizard to the website
Since we’re using the Robison starter site by Gutenix, we’ll be adding shortcodes and widgets in the block editor.
The Appointment Booking plugin offers several menus where you can work with shortcodes.
In the Shortcodes menu, there is a specific shortcode generator that allows you to build different types of content associated with the plugin – a booking widget, a list of employees, a list of services, etc.
For example, let’s create an appointment form that we’ll add to the site.
The default fields include the service category, location and employee – a client will need to go through them before they can choose a booking date and time.
You can optionally remove or rename the fields, for example, ask clients to choose a service only:
You can also set the default values for the fields that will be prepopulated in the widget:
After you’ve set your preferences, save the changes and the shortcode will be automatically generated. Now you can copy it and paste into the Shortcode block in the block editor:
Here is the default view of the form on the site:
You can also add some styling and paste the form into any column, etc.
Once a client has chosen the needed fields, they need to choose the date:
After that a client needs to fill in their contact information:
As you see, it’s quite an easy and smooth process for clients! The booking widget also looks awesome on any screen since it’s optimized for mobile devices. You can paste it on any page or widget supported by your WordPress theme.
After the booking is submitted, you and your client automatically receive email notifications with all the details (you can customize those email templates).
Step 7. Optionally build pages of employees, services, etc.
If you want to feature your team, services or locations using content you added via the Appointment booking widget for WordPress, you can generate any other shortcodes in just the same way we did for the appointment form.
For example, you can create a list of staff members (doctors in my case) –
The shortcode generators also allow you to play with the layout (set a number of columns), showcase specific employees or locations by IDs, etc. The plugin is pretty flexible in this regard.
Step 8. Manage bookings via the WordPress Appointment Booking plugin
In the current plugin version (1.2.1 at the time of writing this) you can see all the received reservations, manually change their statuses (pending, canceled, confirmed) and customize the final service price and personal customer details.
Final word: Add a booking widget to your appointment booking website built with Gutenix
As you see, it doesn’t take much time to add a form for online bookings to your WordPress site built with Gutenix. The Appointment Booking WordPress plugin is quite flexible to allow you to smoothly customize all the inner management processes like the staff planning as well as easily deal with adding a booking form to your site.
The plugin will work with any starter site offered by the Gutenix multipurpose WordPress theme since it’s based on the cross-builder supported shortcodes; the visual styling might differ, though. All in all, it yields huge benefits to use the MotoPress appointment plugin with Gutenix because both solutions are by our team and we’re doing our best to help them work together. What’s more, for a free appointments WordPress theme, download Bro Barbershop.
So are you ready to start accepting automatic hourly bookings on your WordPress site?
