WooCommerce - Let customers choose the delivery date and time slot

This working method of the WooCommerce by AntsRoute plugin enables your customers to choose a delivery date and time slot before proceeding to payment with prior checking of availability and automated sending of orders to AntsRoute.

Here are the steps to follow to set up the plugin:

• Step 1 - Install the AntsRoute plugin on WordPress
• Step 2 - Manage the capacities of your vehicles on AntsRoute
• Step 3 - Get an API key from AntsRoute
• Step 4 - Set up the WooCommerce by AntsRoute plugin on WordPress
• Step 5 - Send the status of AntsRoute deliveries to WooCommerce using webhooks
• Step 6 - Customise the display of the WooCommerce by AntsRoute plugin
• Step 7 - Manage the custom fields on AntsRoute

Step 1 - Install the AntsRoute plugin on WordPress

First, you must install the "WooCommerce Local Delivery Date Picker & Time Slots by AntsRoute" plugin on your WordPress website. To do this, you need to follow the steps below:

1. Get the “WooCommerce Local Delivery Date Picker & Time Slots by AntsRoute” integration file by contacting us by email or directly from the WooCommerce marketplace.
2. Login to your WordPress account.
3. Go to "Extensions" > "Add new".
4. Click on the "Upload plugin" button.
   

   

5. Click on the "Choose a file" button and select the file to be installed.
6. Once the file name is displayed, click on the "Install Now" button.
   

   

7. Click on the "Activate plugin" button.

Step 2 - Manage the capacities of your vehicles on AntsRoute

The "Number" and "Weight" capacities must be created in your AntsRoute account. These capacities make it possible to manage the quantities (number of items and weight) that each of your vehicles can carry during the route.

1. Create the "Number" and "Weight" capacities

First, you need to create these two capacities from the settings by following these few steps:

1. Go to the "Settings" module.
2. Click on the "Capacities" tab.
3. Click on the "Add" button.
   

   

4. Create the first capacity "Number":
   • Number (Name) ;
   • Unit (Unit) ;
   • Optional (Validation mode).
5. Click on the "Save" button.

   

6. Click the "Add" button again to create the second capacity.
7. Create the second capacity "Weight":
   
   • Weight (Name) ;
   • Kg (Unit) ;
   • Optional (Validation mode).
8. Click on the "Save" button.

   

💡 Respect the use of upper and lower case for Number and Weight to make it possible to synchronize data between AntsRoute and WooCommerce.

2. Determine the capacities of your vehicles

Once you have created the capacities, you must indicate the quantities that can be carried by each of your vehicles.

1. Go to the "Resources" module.
2. Click on the "Vehicles" tab.
3. For the first vehicle, click on "..." and "Edit".
   

   

4. Determine the "Number" quantity that can be carried by the vehicle.
5. Determine the "Weight" quantity that can be carried by the vehicle.
6. Click on the "Save" button.
   

   

7. Click on the "Confirm" button.
   

   

8. Repeat these steps for each vehicle.

Step 3 - Get an API key from AntsRoute

From your AntsRoute account, you need to retrieve an API key that you will be asked for later when setting up the WooCommerce by AntsRoute plugin. To do this, you need to follow these steps:

1. Click on the blue circle at the top right.
2. Click on the "Integrations" tab.

   

3. Click on "API Keys".
4. Click on the "+" button.
   

   

5. Enter the "Name" of this key.
6. Select the warehouse for which to generate an API key.
7. Click on the "Create" button.
   

   

8. Click on the "Copy" button.
9. Click on the "Continue" button.
   

   

💡 In the next step, you will be asked to enter this API key. Meanwhile, you can paste it in a text file.

Step 4 - Set up the WooCommerce by AntsRoute plugin on WordPress

During this step, you can decide to check availability when the customer chooses the delivery time slot or to send the order directly to AntsRoute without checking availability.

Method No. 1 - Check availability in AntsRoute

By choosing this first option, you agree that your customers can directly search for availability for the delivery of their order in your planning. The availabilities displayed to customers will be valid for a limited time.

This validity time can be configured from your AntsRoute account > Settings > Settings > Optimization settings.

Once an availability is validated, i.e. as soon as the customer confirms the date and the selected time slot, all other availabilities that were displayed are released. 

1. Go to the "WooCommerce" > "AntsRoute".
2. Click on "Settings".
3. Choose the option "Let customers choose the date and time slot".
4. Choose a "Shipping zone and method" that you have defined in the WooCommerce settings.
5. Enter the "AntsRoute site API key" that you retrieved in the previous step.
6. Choose the "AntsRoute order deletion trigger". For example, if you choose the "Refunded" option, as soon as the order changes to the "Refunded" status on WooCommerce, the delivery is cancelled on AntsRoute.

   

7. Activate "Check availability in AntsRoute" by selecting the "Yes" option.
8. Determine up to four "Delivery time slots" to be displayed to your customers at the time of scheduling the delivery.
9. Select the "Delivery days" to be displayed to your customers.
10. Enter the "Minimum open calendar date", i.e. the date from which the delivery can be scheduled. For example, "0" makes it possible to schedule a delivery for the same day; "1" makes it possible to schedule a delivery for the next day; "2" makes it possible to schedule a delivery on D+2; etc.
    

    

11. If you have chosen a minimum open calendar date of "0" or "1", you can set a "Delivery cut-off hour", i.e. the time after which your customers can no longer schedule a delivery. For example, if you choose a delivery cut-off hour of 18:00, your customers can schedule a delivery for the same day (or the next day) until 6pm.
12. If you have chosen a minimum open calendar date of "0", you can set a "Minimum duration before delivery time slot", i.e. a duration in minutes before the time slot from which it is no longer possible to schedule delivery for the same day. For example, if you set 30 minutes and your customer chooses the delivery time slot 10:00 - 12:00, the customer can schedule the delivery for the same day until 9:30.
13. Determine the "Maximum selectable date", i.e. the date up to which your customers can schedule a delivery at checkout. For example, if you set a maximum date of 10 days and your customer places their order on April 10, 2022, they can schedule their delivery until April 20, 2022.
14. Set the default "Delivery duration", i.e. the time required in minutes for your delivery driver to get the goods out of the vehicle and hand them to the customer.
15. If necessary, enter the "Holidays and days off" in the format yyyy-mm-dd. For example, 2022-11-11.
16. Click on the "Save" button.

    

Method No. 2 - Do not check availability in AntsRoute

By choosing this second option, you do not check availability when your customers schedule deliveries. Instead, you can choose the module to which the deliveries are sent: "Organise" or "Delivery basket".

1. Go to "WooCommerce" > "AntsRoute".
2. Click on "Settings".
3. Choose the option "Let customers choose the date and time slot".
4. Choose a "Shipping zone and method" that you have defined in the WooCommerce settings.
5. Enter the "AntsRoute site API key" that you retrieved in the previous step.
6. Choose the "AntsRoute order deletion trigger". For example, if you choose the "Refunded" option, as soon as the order changes to the "Refunded" status on WooCommerce, the delivery is cancelled on AntsRoute.
   

   

7. Disable "Check availability in AntsRoute" by selecting the "No" option.
8. Select the module where to "Add order to".
9. Determine the "Delivery time slots" to be displayed to your customers at the time of scheduling the delivery.
10. Select the "Delivery days" to be displayed to your customers.

    

11. Enter the "Minimum open calendar date", i.e. the date from which the delivery can be scheduled. For example, "0" makes it possible to schedule a delivery for the same day; "1" makes it possible to schedule a delivery for the next day; "2" makes it possible to schedule a delivery on D+2; etc.
12. If you have chosen a minimum open calendar date of "0" or "1", you can set a "Delivery cut-off hour", i.e. the time after which your customers can no longer schedule a delivery. For example, if you choose a delivery cut-off hour of 18:00, your customers can schedule a delivery for the same day (or the next day) until 6pm.
13. If you have chosen a minimum open calendar date of "0", you can set a "Minimum duration before delivery time slot", i.e. a duration in minutes before the time slot from which it is no longer possible to schedule delivery for the same day. For example, if you set 30 minutes and your customer chooses the delivery time slot 10:00 - 12:00, the customer can schedule the delivery for the same day until 9:30.
14. Determine the "Maximum selectable date", i.e. the date up to which your customers can schedule a delivery at checkout. For example, if you set a maximum date of 10 days and your customer places their order on April 10, 2022, they can schedule their delivery until April 20, 2022.
15. Set the default "Delivery duration", i.e. the time required in minutes for your delivery driver to get the goods out of the vehicle and hand them to the customer.
16. If necessary, enter the "Holidays and days off" in the format yyyy-mm-dd. For example, 2022-11-11.
17. Click on the "Save" button.

    

💡 If your drivers make several returns to the warehouse during their routes in order to reload their vehicles, you must activate the "Pick-up & Delivery" option. When activating this option, other fields must be filled in: Warehouse name; Warehouse address; Loading time; Loading time slots.

Step 5 - Send the status of AntsRoute deliveries to WooCommerce using webhooks

We also have webhooks on AntsRoute to send delivery status to WooCommerce. Here are some steps to follow to set up webhooks:

1. Go to WordPress > WooCommerce > AntsRoute.
2. Click on the "Webhooks" tab.
3. Copy the URL.

   

4. Go to your AntsRoute account.
5. Click on the blue circle at the top right.
6. Click on the "Integrations" tab.

   

7. Click on the "Webhooks" tab.
8. Click on the "+" button.

   

9. Enter the "Name" of this webhook.
10. Paste the "URL address" you retrieved earlier.
11. Choose the "Authentication mode" "None".
12. Select the "Events to send":
    • Delivery done;
    • Delivery canceled ;
    • Delivery deleted ;
    • Delivery locked.
13. Select the "Concerned warehouse".
14. Click on the "Save" button.

    

Once this is done, you can go to WordPress > WooCommerce > Orders to view the status of each delivery.

Step 6 - Customise the display of the WooCommerce by AntsRoute plugin

The display of the WooCommerce by AntsRoute plugin can be customised to suit your branding. In order to customise the calendar display which allows your customers to select the delivery date and time slot, you need to go to WordPress > WooCommerce > AntsRoute > Customization.

Here are the elements that can be customised:

• Field header;
• Field position - i.e. where the date and time slot selection fields should be displayed;
• Field priority - i.e. the priority of the WooCommerce by AntsRoute plugin compared to other plugins;
• Date field label - e.g. "preferred delivery date";
• Date field description;
• The week starts on - i.e. the day of the week to be displayed first in the calendar;
• Date format - yy-mm-dd or yy/mm/dd;
• Time slot field label - e.g.: "requested delivery time slot";
• Time slot field description;
• Time slot field format - g:i a (e.g.: 3pm- 5pm) or H:i (e.g.: 15:00 - 17:00).

Step 7 - Manage the custom fields on AntsRoute

The creation of custom fields makes it possible to send information from WooCommerce to AntsRoute. For example, the description and price of the items, the payment method, etc.

💡 The use of this custom fields is optional. If you use the custom fields make sure to enter exactly the same name.

1. Create a new category

The creation of a category is useful to group custom fields together to make the information easier to read. For example, "Custom Fields" or "WooCommerce Fields".

1. Go to the "Settings" module.
2. Click on the "Custom fields" tab.
3. Click on the "Delivery" tab.
4. Click on the "Create a category" button.

   

5. Enter a "Name" for this category.
6. Click on the "Save" button.
   

   

💡 When adding the custom fields below, you will need to sort them into the category you have just created.

2. Add the custom field "Price"

1. Click on the "Create a field" button.

   

2. Enter the name "Price".
3. For the field type, choose the "Text type" option.
4. Click on the "Save" button.

   

3. Add the custom field "Description"

1. Click on the "Create a field" button.
2. Enter the name "Description".
3. For the field type, choose the "Text type" option.
4. Click on the "Save" button.
   

   

4. Add the custom field "Payment method"

💡 This custom field is not working if you use the "Method No. 1 - Check availability in AntsRoute".

1. Click on the "Create a field" button.
2. Enter the name "Payment method".
3. For the field type, choose the "Text type" option.
4. Click on the "Save" button.
   

   

5. Add the custom field "Currency"

1. Click on the "Create a field" button.
2. Enter the name "Currency".
3. For the field type, choose the "Text type" option.
4. Click on the "Save" button.

   

6. Add the custom field "Paid"

💡 This custom field is not working if you use the "Method No. 1 - Check availability in AntsRoute".

1. Click on the "Create a field" button.
2. Enter the name "Paid".
3. For the field type, choose the "List type" option.
4. Add the options "true" and "false".
5. Click on the button "Save".