While browsing your store, customers might want the ability to reserve their delivery or collection slot before adding items to their cart.

With WooCommerce Delivery Slots, you can add a reservation table to any page in your store, allowing customers to select their time and date slot which is applied at checkout.

To get your reservation table up and running, do the following:

1. From your WordPress dashboard, go to WooCommerce > Delivery Slots and click the Reservation Table tab. 

Here you’ll find the reservation table settings as well as the shortcode to add it to your store.

How to add the reservation table to your store

Before we adjust the reservation table settings, let’s get it added to your store.

The Delivery Slots reservation table can be added to any of your store pages with the shortcode [iconic-wds-reservation-table]. 

Shortcodes help you add pre-built content to your store. In this case, it will add a reservation table. Shortcodes are displayed inside square brackets like this: [iconic-wds-reservation-table]

To add this shortcode to a page or a post within your store, do the following:

Note: This presumes you have the latest version of WordPress for your online store and you’re using the Gutenberg editor. If not, the shortcode can still be pasted into the classic editor.

How to adjust the settings for your reservation table

Now we have the reservation table live in your store, we can adjust the settings to help it blend in.

1. From your WordPress dashboard, go to WooCommerce > Delivery Slots and click the Reservation Table tab. Here you’ll see your reservation settings. We’ll go through each in turn:
2. Expiration – This sets the period of time people can reserve their slots for. For example, if the customer doesn’t complete their order within 30 minutes, they lose their reservation slot.
3. Remaining Label Threshold – If the remaining slots become less than the number you add here, then a label will be shown on the timeslots saying for example: “2 remaining”.

4. Hide Unavailable Dates? – This checkbox allows you to hide certain dates if they have no time slots available. 
5. Redirect URL – This allows you to redirect to another URL after a slot has been booked. Leave empty if you do not want to redirect.

6. Once happy, click the blue Save Changes button at the bottom of the page and your reservation table’s settings will be updated.

How to adjust the styles for your reservation table

To make sure your reservation table blends in with your store’s theme and style, you might want to change its colors. To update the look of your reservation table, do the following:

1. From your WordPress dashboard, go to WooCommerce > Delivery Slots and click the Reservation Table tab. 
2. Scroll down the page until you reach the Styling section.

3. Here you’ll be able to change the colors of your reservation table from the icon colors to the header colors and more. 
   1. To change a color, add a hex code of your choosing. 
   2. Or click the box with the existing hex code in, and a color wheel will appear, you can then pick the color you want from there.

4. Click the blue Save Changes button at the bottom of the page and your reservation table’s styles will be updated.

How to remove shipping address selection from the reservation calendar

If you only allow pickup or sell virtual products, you might want to remove the first 2 steps of the reservation calendar i.e. shipping address and shipping method selection. 

To do this, take the following steps:

1. Create an arbitrary shipping method from WooCommerce > Settings > Shipping. It can be a free shipping method or local pick-up based on your preference. 

After you create a shipping method, you can find its ID right below its title. Please copy it, we will use it in the next step. 

2. When you add the reservation table shortcode, add the shipping method ID we copied in the last step like this:  [iconic-wds-reservation-table shipping_method="free_shipping:2"]

Replace “free_shipping:2” with your shipping method ID. 

This will make the reservation table skip step 1 and 2 (shipping address and method selection) and directly show the date/time selection.