Earlier, our Resources feature wasn’t available for Variable product type. But now, our Booking & Appointment Plugin for WooCommerce offers this feature for all the Booking Types. Let’s have a look at how to configure this feature for one of the booking types.

Booking Type: Dates and Fixed Time 

For example, Let’s say that you offer Guitar lessons. You have added this service to your WooCommerce store as a Variable product. You have used the variations for the Guitar lessons as “Beginner, Intermediate and Advanced” learners. This means that you are offering 3 different types of variations of the same product, i.e, Guitar lessons. We will next go to its product page & enable the Resource setting in the booking meta box. We will select the Booking type as Dates and Fixed Time as shown below: 

Booking metabox

From the Availability tab, we’ll set our booking days as Fridays, Saturdays, and Sundays & time slots as one-hour time slots from 9 am to 2 pm. After that we shall go to the Resources tab and add in our resources as follows:

Adding booking Resources

Here, we can see that we have added Resource A “Priyanka” whose price is $35 & Resource B “Kinjal” whose price is $30. Now let’s say that Resource A Priyanka is unavailable for specific time slots that you offer, i.e, on Fridays from 9 am to 12 pm. Then you can click on the option shown below:

How to configure booking resources details

Once you click on it, you will be redirected to the resource’s page where you can add details. Here, under Range Type we shall select Time Ranges > Friday and under the time settings we will add 9 am to 12 pm. We will make this time range unbookable & click on ‘Save’ option. Here’s how the page will appear once we have added the details:

Resource details page

This would mean that on the frontend, when the customer chooses Resource A Priyanka, on Fridays, they will get to see the timeslots 12 pm to 2 pm because we have made the 9 am to 12 pm timeslots as unbookable.

After making these changes, we will go back to our product page settings & click on Save Changes and then ‘Publish/Update’. Our product (Guitar lessons) will be published/ updated accordingly.

Frontend Display

Under the Guitar lesson type, we will choose Intermediate. For our resource person, we will choose Priyanka. Since we have enabled the option of select multiple dates, under Start Dates, we will have to choose 2 Dates for Booking.

As we know that on the backend we have made this service available only for Fridays, Saturdays & Sundays, then on the frontend, we will see only those days on our Booking Calendar.

We will then select one date which falls on a Friday. So let’s go with 18th June 2021.

Since we have selected our Resource person as Priyanka, we will get to view only two slots which are from 12 pm to 1 pm & 1 pm to 2 pm. We will choose the 12 pm to 1 pm time slot.

Thus, here’s how our settings will appear on the frontend for our variable product:

Product Page

We’ll add another booking in a similar manner, with the same resource person, except this time we will choose Saturday as our booking day. Here’s how our second booking will appear:

 

Product Page

We’ve selected 19th which is a Saturday, thus we will get all the timeslots from 9 am to 2 pm. We’ll go with the 9 am slot and add the booking to our order. Our booking summary will appear like this and we’ll click on Book now:

Booking Summary

Here’s how our booking order will appear on the cart page:

Cart Page

Here’s how it will appear on the Order Page:

Order Page

In a similar manner, you can configure the resources for different booking types with the Variable Product type.