View Product Page

How to book a hair salon service and choose the stylist

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 > 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.

New resource

Then, in the first step, let’s add the stylist’s name, picture, and set the availability quantity to 1.

Thomas settings 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.

Resource availability configuration

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.

Dory availability

Kelly is available every day with the same opening hours as the salon, except for Monday and Saturday.

Kelly availability
Staff members

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.

Hair dresser services

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.

Hair color settings

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 to 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.

Max booking per unit

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.

Hair color cost
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.

Hair color availability

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.

Resources settings

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.

Choose hairdresser
1. Choose hairdresser
Set product and hairdresser availability
2. Set product and hairdresser availability

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.

Hair color + cut 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.

Kelly's availability 1

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.