Do you have a hair salon and want to set up your booking system online? Do you want to list there all the services that you provide (hair cutting, coloring, highlighting, styling etc.) and let your users choose the date and time?
Do you also want to give them the opportunity to choose among your staff members who may have different expertise (and prices) and time schedules?
That’s possible and easy with our YITH Booking and Appointment plugin. Let’s set up this specific use case together.
First of all, we have to clarify that:
- staff members (the stylers) are Resources and
- each service provided has to be a different bookable product.
Let’s start with the Resources configuration first, so make sure the Resources module has been enabled from YITH > Booking > Add-ons > Modules.
Resources
Let’s go to YITH > Booking > Configuration > Resources where we will create one resource for each of our hair stylists.
Let’s click on Add new resource.
Then, in the first step, let’s add the stylist’s name, picture, and set the availability quantity to 1.
Now, in Set default availability, we can configure Thomas’ shifts:
| Monday | 9:00 – 14:00 |
| Tuesday | 9:00 – 14:00 |
| Wednesday | OFF |
| Thursday | 9:00 – 14:00 |
| Friday | 9:00 – 14:00 |
| Saturday | 8:00 – 15:00 |
| Sunday | all day (same hours as the salon) |
So, we will create a first rule for all days bookable from 9:00 to 14:00 and we override these settings with one rule for every day that is different, so Wednesday, Saturday and Sunday.
Let’s save this resource and let’s add all other staff members.
Dory is available from every day 8:00 – 15:00, except for Mondays and Saturdays.
Kelly is available every day with the same opening hours as the salon, except for Monday and Saturday.
We can now move on to bookable products.
Products
We can now create one bookable product for each service that we offer in our hair salon. Products may have different duration and all of them will share the same resources (hair stylists), so, their availability will automatically be synced.
We offer, for example:
- Hair color: 2 hours
- Haircut: 1 hour
- Hair color + hair cut: 3 hours.
Let’s see the product settings and start with the Hair color product.
Step 1 — settings
in the Booking settings tab, we will set fixed units of 2 hours and make sure that the customer will automatically see the first available option of the following day selected.
Additionally, let’s scroll down a bit to the Booking terms section.
We want customers to be able to book this service based on how many hairdressers are available. As we’ve already set availability 1 in each hairdresser, we can set it to 0 (=unlimited) here, so the plugin will automatically consider only the resource availability. Setting it to 0 will make the plugin faster on the front end.
On the other hand, if we only have 2 seats in our salon available for this service and we need to restrict this to a maximum of 2 bookings at the same time, we can set the Max bookings per unit to 2. With this setting, even if there are 3 hairdressers who can offer this service, a maximum of 2 can be booked.
step 2 — costs
In the Costs section, we can set the price of $50.
step 3 — Availability
In the Availability section, we can set the time when this service is available, which basically corresponds to the salon’s opening times: every day 8:00 to 13:00 and 15:00 to 20:00 except for Mondays and Sundays.
This availability will automatically be merged with our resources’ availability, so the customer will only see time slots when at least one of the stylists is available.
Step 4 — Resources
From the Resources tab, we can enable the resources and set the Resource assignment to Customer can select one resource. This way, customers will be able to choose the hairdresser first and then will see the availability.
Additionally, in the label we will set the name that we want to show on the frontend before the resource dropdown.
And the Required option is enabled because in this way at least one of the stylists’ availability will be blocked.
Availability sync
Similarly, I can set the other products, but make sure I change the time slot duration, which is different for each service. For example, the Hair color + hair cut has a 3-hour duration.
In this way, if I book a Hair color + cut with Kelly at 9:00, she will be busy for 3 hours, so until 12:00.
After booking this service, her availability will be updated in all the products where she’s been added as a resource.
Let’s consider that the salon closes at 13:00 and opens again at 15:00. So, even if she’s available from 8:00 to 9:00 and from 12:00 to 13:00, these time slots are not enough to book both a hair color and cut (3 hours). Therefore, her first available time slot for this product will be at 15:00.
Yet, she will appear as available at 8:00 and at 12:00 in the Hair Cut product, which lasts 1 hour.
