1. Home
  2. Order Delivery Date Pro For WooCommerce
  3. Appearance
  4. Calendar Appearance

Calendar Appearance

In this post, we will discuss how you can change Delivery Date calendar on the Checkout Page in Order Delivery Date Pro for WooCommerce plugin. You can change the calendar language, date format, time format and much more options. All the options are explained in this post.

You can setup this under Order Delivery Date -> General Settings -> Appearance -> Calendar Appearance.

Change Delivery Date calendar in WooCommerce - General Settings
General Settings

Calendar Language: Admin Setting

The plugin provides 64 different languages from which you can set the language as per your store’s language. The default language selected for the calendar is English UK.

Sometimes, the customers want that the language of the delivery date calendar on the checkout page should match the language of the website. For example, you deliver your products in France and French is the language which is majorly used in France. So you want that the calendar should appear in the french language. You can select the french language in the Calendar Language dropdown.

Change Delivery Date calendar in WooCommerce - Calendar Language
Calendar Language

Calendar Language: Checkout page

This is how the delivery date calendar will appear on the checkout page with the French language.

Change Delivery Date calendar in WooCommerce - Calendar Language Checkout Page
Calendar Language – Checkout Page

Date Format: Admin Setting

Different countries around the world use different date formats. For example, France country uses dd-mm-yyyy, Germany uses dd.mm.yyyy format. Some of the countries also use date formats with the month names like d MM, yy. Here d refers to the date, m refers to the month and y refers to the year.

The default date format from the plugin is d MM, yy which will be like 12 October, 2016. And you can set the necessary date format as per your country.

Change Delivery Date calendar in WooCommerce - Date Format
Date Format

Date Format: Checkout page

The selected date from the calendar will appear in the format set. So, in the above example, the selected date format is 12.10.16. And this is how the date will appear on the checkout page.

Change Delivery Date calendar in WooCommerce - Date Format Checkout Page
Date Format – Checkout Page

Time Format: Admin Setting

Same as the Date Format, different countries uses different Time format to display the selected time. There are two time formats, 12 Hour and 24 Hour and you can use them as per the country in which your store locates. The default time format set from the plugin is 24 Hours.

12 Hour format will display the time in the AM/PM format with 1 to 12 in sequential order, whereas the 24 Hour format uses the full 24 hours.

The time format option will work both on the Time sliders with the preferred range as well as on the time slots set.

Change Delivery Date calendar in WooCommerce - Time Format
Time Format

Time Format: Checkout page

12 Hour format will appear as below on the checkout page with the time range. This will work same for the Time slots.

Change Delivery Date calendar in WooCommerce - Time format Checkout Page
Time format – Checkout Page

24 Hour format will appear as below for the time slot on the checkout page. Same will work with the Time range too.

Change Delivery Date calendar in WooCommerce - Time Format Checkout Page
Time Format – Checkout Page

First Day Of Week: Admin Setting

First Day of Week means the weekday on which you want the Delivery Date calendar to start with. For example, you want that the calendar should start on Sunday on the checkout page, then you can select Sunday as the First Day of Week, if you want to start the calendar from Monday then you can select Monday as the First Day of Week.

Change Delivery Date calendar in WooCommerce - First Day of Week
First Day of Week

First Day Of Week: Checkout Page

If you select Sunday as the first day of the week so your calendar will start on Sunday.

Change Delivery Date calendar in WooCommerce - First Day of Week Checkout Page
First Day of Week – Checkout Page

Number of Months

By default, only one month is shown in the Delivery Date calendar on the checkout page. But, some of the customers want to display the available dates for delivery for next 2 months, so their customers can check if the delivery date on which they want delivery is available or not at a glance. So you can set the Number of Months to 2 in the option.

Change Delivery Date calendar in WooCommerce - Number of Months
Number of Months

Number of months: Checkout Page

This is how the Delivery Date calendar appears on the checkout page with 2 months.

Change Delivery Date calendar in WooCommerce - Number of Months Checkout Page
Number of Months – Checkout Page

Calendar Themes

Sometimes, the customers ask if there are any themes provided for the Delivery Date calendar which can match the theme they are using on your website. The plugin provides 24 different themes, from which you can choose the theme which matches your store theme. In most of the cases, you will find one the theme which will match.

Change Delivery Date calendar in WooCommerce - Themes
Themes

Calendar Themes: Checkout Page

The selected calendar theme will appear like this on the checkout page.

Change Delivery Date calendar in WooCommerce - Calendar Themes Checkout page
Calendar Themes – Checkout page

Conclusion

Setting up the appearance of the Delivery Date calendar on the checkout page will take only 15 minutes of your time. This will help you to make your delivery date calendar more presentable on the checkout page.

You can change the field appearance for the delivery date field. We will be discussing that in our future posts.

Was this article helpful to you? Yes 1 No

How can we help?