1. Home
  2. Order Delivery Date Pro For WooCommerce
  3. Appearance
  4. Color Code Your Checkout Delivery Date Calendar

Color Code Your Checkout Delivery Date Calendar

The delivery calendar on the Checkout page displays availability for order deliveries as per the settings added in the backend. The new feature introduced in version 8.4 of Order Delivery Date Pro for WooCommerce plugin, allows color coding the delivery calendar on the Checkout page by assigning different colors to holidays, booked dates or the dates disabled after the cut-off time is over.

How this works?

Let us understand how color code is assigned to Holidays, Booked Dates and Dates disabled after cut-off time. Firstly, you need to go to Order Delivery Date -> General Settings -> Appearance link and add the color name in the Color Code Your Calendar settings as shown below:

Adding colors for color coding the delivery calendar

Now let us see how this setting affects the display of the delivery calendar of the Checkout page for all 3 options, separately.

Holidays

To show holidays on the delivery calendar on Checkout page, the color assigned in the setting is Red as shown in the above screenshot. This implies when a holiday is added in the backend, that date on the delivery calendar will show Red color.

For instance, say holiday for Independence Day is added on Holidays page in the backend for 15th August, 2018 as shown below:

Holiday added for Independence Day

Now let us go to the Checkout page and you will see 15th August displayed in Red color on the delivery calendar indicating its a holiday, as shown below:

Delivery calendar showing holidays in Red

Booked Dates

Booked Dates refer to those dates when the maximum orders for that day are met and no further order deliveries can take place.

For booked dates, firstly let us add settings in the backend where maximum of 2 order deliveries can be taken in a day. Go to Order Delivery Date -> General Settings -> Date Settings and add 2 as the Maximum Order Deliveries per day as shown below:

Adding maximum order deliveries that can take place in a day

This implies that when 2 order deliveries take place on a specific day, that date on the delivery calendar on Checkout page will be disabled for delivery and appear in a Blue color (as per settings on Appearance page).

Thus 28th July, 2018 is disabled for taking up any order deliveries and is displayed in Blue color as shown below:

Delivery calendar showing booked dates in Blue

Dates disabled after cut-off time

This option basically refers to cut-off time set for Same Day and Next Day Deliveries on the Time Settings page. To add settings in the backend, go to Order Delivery Date -> General Settings -> Time Settings link and set the cut-off time after which order deliveries will not take place on the Same Day:

Settings for cut-off time for same day delivery

Similarly set the cut-off time after which order deliveries will not take place on the Next Day:

Settings for cut-off time for next day delivery

So considering the current date as 28th June, 2018 and you add an order for delivery at 11am which is after the cut-off time set for same day which is 9am, the delivery calendar will show 28th June disabled and color coded to Green (as per settings on Appearance page) as shown below:

Delivery calendar showing date for same day cut-off time in Green

Similarly, for Next Day delivery, order placed after 9am will show green for 29th June, 2018 as shown below:

Delivery calendar showing date for next day cut-off time in Green

Conclusion

This new feature of showing color coded dates for different delivery options, brings ease in understanding the order delivery process of businesses. By just color coding the dates on delivery calendar of Checkout page, customers can be informed about specific dates when deliveries are disabled for delivery.

Was this article helpful to you? Yes No

How can we help?