Skip to content

Setting Up A Multi-Service Booking System With Woocommerce

We recently had the pleasure of working with the good folks over at pitchedperfect.ie

They wanted a booking form for their Pamper Palour at festivals, where festival-goers can come to get glammed up to the nines with the option to book various treatments with either a make-up artist or a hair dresser.

So they needed a booking form that could accept bookings for the two different service providers (make-up & hair) and then select specific treatments.

Tools

Steps

1. Set Up Your Plugins

Nothing super complicated here. We're going to set up Woocommerce Bookings in the same way we would any plugin. We're only going to need Woocommerce Product Add-Ons if our main services (or service providers in our case) have sub-categories or "sub-services" (add-ons!). With Pitched Perfect in our Make-up service provider offers Full Face Festival Make-Up or Eyes & Jewels as options. The Hair Dresser service provider offers blow drying, plaits, blowdry with curls, etc.

2. Add a 'Resource'

Your 'resources' are the service providers you have. In the case of Pitched Perfect these were Make-Up and Hair Dresser. Hover over Bookings on the dashboard and click Resources

  1. Add a name for your service provider
  2. Add the available quantity (in our case this represent the amount of make-up artists working)
  3. Add a bookable date range for the resource (in our case it's going to be the specific dates of the festival

Set up any other top level service providers. In our case the other service provider is the Hair Dresser.

3. Set Up A Product

Set up a product like you would any other. But set the product type to "Bookable Product". Then you'll be given options specific to bookable products.

Set your booking duration. This is what it sounds like - how long each booked block lasts. In out case 30 minutes.

In order to add your resources (service providers) - tick the "has resources" box and go to the Resources tab below.

Add each resource and enter a label to tell customers to pick an option.

4. Set Up Your Specific Services (Add-ons)

This is where the Woocommerce Product Add-Ons plugin will come in. It's going to allow us to set up multiple services (technically as add-ons)

Click on the Add-Ons tab and click the add field button.

We want it to be checkboxes and a required field.

Then set up all of your options and prices (for all/both service providers). You'll notice below that we've set up options that correspond to the service providers. These are optional. In our case we used some css to style these as headers.

5. Use jQuery To Hide Services That Don't Apply To The Service Provider Chosen

At this point if you click into the product/booking form you'll notice that all the add-ons/services show up, even for the service provider that the add on doesn't apply to. This will be confusing for customers, so we want to hide non-applicable services based on what service provider is selected in the dropdown above. This is because Woocommerce Product Add-Ons and
Woocommerce Bookings aren't set up to natively integrate like this (yet? Maybe it could be suggested here)

In the meantime, we don't want this to be confusing for customers, so we want to hide non-applicable services based on what service provider is selected in the dropdown above.

To do this we're going to set up some custom jQuery. It's going to target the resource dropdown ( #wc_bookings_field_resource ) and look for the word 'make' as in make-up and if that's selected we'll hide all the options that don't apply to it. Use inspect element in your browser to determine the class of the items you want to hide

Here's the jQuery we used. You'll obviously need to adjust it to match your use case, service names, etc.

// Pamper Service Switcher
jQuery( "#wc_bookings_field_resource" ).ready(function() {
var selected = jQuery('#wc_bookings_field_resource option:selected').text();
var pattern = /Make/;

//returns true or false...
var exists = pattern.test(selected);

if(exists){
jQuery('.make-up, .full-face-festival-make-up, .eyes-jewels').css("display","block");
jQuery('.hair-dresser, .straight-blow-dry, .curly-blow-dry, .blow-dry-hair-with-extensions, .plaits, .curls-plaits').css("display","none");
}else{
jQuery('.hair-dresser, .straight-blow-dry, .curly-blow-dry, .blow-dry-hair-with-extensions, .plaits, .curls-plaits').css("display","block");
jQuery('.make-up, .full-face-festival-make-up, .eyes-jewels').css("display","none");
}
});

jQuery( "#wc_bookings_field_resource" ).change(function() {
var selected = jQuery('#wc_bookings_field_resource option:selected').text();
var pattern = /Make/;

//returns true or false...
var exists = pattern.test(selected);

if(exists){
jQuery('.make-up, .full-face-festival-make-up, .eyes-jewels').css("display","block");
jQuery('.hair-dresser, .straight-blow-dry, .curly-blow-dry, .blow-dry-hair-with-extensions, .plaits, .curls-plaits').css("display","none");
jQuery('input[value="hair-dresser"], input[value="straight-blow-dry"], input[value="curly-blow-dry"], input[value="blow-dry-hair-with-extensions"], input[value="plaits"], input[value="curls-plaits"]').prop('checked', false);
}else{
jQuery('.hair-dresser, .straight-blow-dry, .curly-blow-dry, .blow-dry-hair-with-extensions, .plaits, .curls-plaits').css("display","block");
jQuery('.make-up, .full-face-festival-make-up, .eyes-jewels').css("display","none");
jQuery('input[value="make-up"], input[value="full-face-festival-make-up"], input[value="eyes-jewels"]').prop('checked', false);
}
});

 

 

Now when your customers book an appointment on the 25th with your Hair Dresser, there won't be any confusion about which services they provide.

There you go, you've jut set up a multi-service booking system for woocommerce!