1. Home
  2. Order Delivery Date Pro for WooCommerce
  3. Appearance
  4. How do I change the labels for delivery date and time fields?

How do I change the labels for delivery date and time fields?

With the Order Delivery Date Pro for WooCommerce plugin, you can easily change how different fields appear on the Checkout Page

You can change the calendar language, date format, time format, and much more options.

You can set up this up under Order Delivery Date > Settings > Appearance.

Calendar Appearance

You will find two sections here:

1. Display Settings

2. Field Appearance

1. Display Settings

Let’s have a look at different settings in this section:

1) Show time slots in a list view

When this setting is enabled, it will allow you to view the time slots as a list.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Once enabled, your customers will be able to choose their time slots by just selecting any of the time slot buttons displayed either on the Cart Page and/or the Checkout Page. The customers will be easily able to see the start time as well as the end time on these buttons. Here’s how it will look on the frontend:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Cart Page

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Checkout Page

2) Show delivery dates in a dropdown

Instead of showing a delivery calendar, you can choose to display your delivery dates in a dropdown list. Enable ‘Show Delivery Dates in dropdown’ as shown below:

‘Show Delivery Dates in dropdown’ setting

 

Here’s how it will appear on the Cart and Checkout Page:

Delivery Date dropdown on the Cart Page

3) Calendar Display Mode

Instead of having to click on the text input field to make the calendar visible on the Cart and Checkout Page you can simply keep it visible at all times by configuring the ‘Calendar Display Mode’ setting. While using this setting, you can choose to display the calendar in three different ways from the dropdown:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

When you go with ‘Open calendar on click of input field,’ the Calendar will open when the customer clicks the Delivery date field. This is how the Calendar Display mode will appear on the frontend:

Open Calendar on click

When you choose the ‘Show calendar on page load until a delivery date is selected’ setting, the calendar will be displayed till the customer selects a date. Once a delivery date is picked by the customers, the calendar will be hidden.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Before choosing the delivery date the calendar is displayed

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

After choosing delivery date, the calendar disappears 

When you choose ‘Show calendar always open’ setting, the inline calendar will be displayed to the customer all the time. This is how the Calendar Display mode will appear on the frontend:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Please note: If you have set Delivery Date as a dropdown, then you will not get the option to enable the Inline delivery calendar a.k.a ‘Show Calendar always open’ setting. This means that the inline calendar does not work with Delivery Date as a dropdown.

2. Field Appearance 

Let’s have a look at the settings under this section:

1) Field Placeholder Text

The placeholder specifies a short hint that describes the expected value of an input field. It will disappear when a user start selecting the date in the field.

To set placeholder text for the delivery date field on the checkout page, you need to add your text message in the “Field Placeholder Text” textbox. For instance, you can set the placeholders like Select the Date or Choose your Pickup Date. The default placeholder text is Choose a Date.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Your placeholder text will display like this in the delivery date field on the checkout page.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

2) Field Note Text

Field Note Text option allows you to give additional information or a note for the deliveries.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

The default Field Note Text is We will try our best to deliver your order on the specified date.

For example, if you require a minimum of 48 hours to prepare for delivery, you can mention: Earliest delivery possible for the order is after 48 Hours. Please select the delivery date available in the calendar.

Other examples of Field Note Text are:

  1. For earliest delivery, please refer to our delivery policy.
  2. Orders set for pickup will be available after 2:00 PM on the scheduled day.

The field note text added will be displayed below the delivery date field on the checkout page.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Additionally, you can use HTML tags to style your texts. For instance, if you want the text to appear in red with the h3 heading size, then enter the HTML tags as shown below:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Once it is saved, the customer will see the following on the front:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

3) Estimated delivery date text

If you select ‘Text Block’ under the Delivery Checkout option in Order Delivery Date > Settings > Delivery Schedule > Date settings, then on the checkout page you will find a text displayed with the estimated delivery date.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

After enabling this setting, you can configure or change the text block note by going to Order Delivery Date > Settings > Appearance > Field Appearance > Estimated Delivery Date Text.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Here’s how the estimated delivery date text will appear on the Cart and Checkout Pages:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Cart Page

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Checkout Page

Feel free to use HTML tags to style your texts. For instance, if you want the text to appear a little bigger, then you can add the HTML tags for font size and define how big you require the font to be as shown here:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

The customer will get to view the bigger font size on the front like this:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

4) Fields placement on the Checkout page

This setting will let you choose where the Delivery Date fields will be displayed on the Checkout Page.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

For instance, let’s say that you’ve selected ‘Between Your Order & Payment Section’ as shown below:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

On the Checkout Page, it will appear between the Order and the Payment section as shown here:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

Please Note: WooCommerce automatically hides the Shipping Section fields for Virtual products. If field placement on Checkout Page is chosen as ‘In Shipping Section’, then it will not be displayed. 

5) Delivery Date field on Cart page

When this setting is enabled, your delivery date field will be available on the Cart Page along with the Checkout Page for your users to choose.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

This setting will be enabled by default. Once enabled, here’s how the Cart Page will appear:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

6) Preselect first available delivery date

If this setting is enabled, then the first available delivery date will be already selected for the user when the checkout page loads. This might be helpful for a quicker checkout process for the users.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

This setting will be enabled by default. The preselected first available delivery date will appear like this on the Checkout Page:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

7) Preselect first available time slot

Similar to the above setting, when this is enabled, the very first available time slot will be selected for the user by default.

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

This setting will be enabled by default. Here’s how the time slot will be preselected once the delivery date has been chosen by the user:

How do I change the labels for delivery date and time fields? - Tyche Softwares Documentation

To conclude, with these simple field appearance settings, make your Checkout Pages more presentable!

Was this article helpful to you? Yes No 1

How can we help?