How to Add Delivery Date to the Checkout Page in Magento 2

221

Adding a delivery date option on the checkout page of Magento 2 can enhance customer experience greatly by providing them with more flexibility and transparency. Customers will be able to choose their own preferred delivery date, which would ultimately bring higher satisfaction and increased sales. So, how to add delivery date to the checkout page in Magento 2?

In this article, BSS Commerce presents steps for adding a delivery date selector into the payment process for Magento 2. This walkthrough is helpful for both developers as well as store owners who want to customize shopping for their customers more effectively.

Now, let’s get started!

Magento 2 Default Checkout Page: Limitation and Solution

Magento 2’s default checkout page, while functional, often falls short of providing a truly personalized shopping experience. One notable limitation is the absence of a built-in feature to allow customers to select their desired delivery date. This can lead to customer dissatisfaction and potential cart abandonment.

Furthermore, almost 83.5% of U.S. consumers will not purchase again after a negative delivery experience, with timing being the most frustrating issue (CSR). For example, shipments may happen to come on an unforeseen date. Hence it becomes necessary for each merchant to utilize the Magento 2 Order Delivery Date extension so that this gap can be filled and general customers’ experiences improved.

Through this extension, customers can select which dates they would like their items delivered on easily hence improving order completion accuracy as well as customer satisfaction levels.

INSTALL NOW

The BSS Commerce Order Delivery Date for Magento 2 extension adds more details and clarity to the shipping information of all orders placed on your Magento 2 websites. Customers can select specific dates or times for their order deliveries when using the delivery date functionality in Magento 2, which guarantees that they get their goods when they want them.

For Customers:

• Pick an expected delivery date and time during check-out.
• Leave messages to businesses in the delivery comment field.

For Magento Store Administrator:

• Exclude specific days or hours from the delivery schedule according to availability.
• Update and include order dates, invoices and emails with a new delivery date.
• Enable API order attributes.

Below are the complete guides on how to install and add delivery date to the checkout page in Magento 2:

Add Delivery Date to the Checkout Page in Magento 2 with 3 Easy Steps

Here’s how to add delivery date to the checkout page in Magento 2:

Step 1: Install Order Delivery Date Magento 2 Extension

After finishing the purchasing process, you will promptly receive an email with a link to download the extension (Please Disable Merge-JS prior to installing the module. Only Enable Merge-JS once the installation is complete)

Step 1: Extract the contents of the ZIP file.

Step 2: Then, generate a brand new directory called app/code/Bss/OrderDeliveryDate/. The module’s identifier is OrderDeliveryDate, which can be found in the downloaded extension ZIP file, inside the “composer.json” file under “psr-4” property. This directory name must be utilized and the extracted components of the extension ZIP file will have to be inserted in it thereafter.

Step 3. Next, copy app/code/Bss/OrderDeliveryDate/ over to the root folder of your Magento installation. A root folder contains directories like “app”, “bin” and “lib” among others. Ensure that all these directories comply with already existing directory structure.

Step 4. Now go to the root folder of Magento 2. Then run this command: php bin/magento setup:upgrade.

Step 5. Run this command: php bin/magento setup:static-content:deploy.

Step 6: Clear all caches.

>>> In this blog, we compiled the 3 ways to install a Magento extension, let’s explore: Install Extension Magento 2 Clearly: A Step-by-Step Guide

Step 2. Set up the delivery date

The Magento 2 Order Delivery Date attribute allows store owners to easily set up and manage complicated delivery periods for customer orders. To reach this feature, visit the Admin Panel and proceed as follows: Stores ⇒ Configuration ⇒ BSS Commerce ⇒ Order Delivery Date.

• Enable: Select Yes or No in order to turn this extension’s function on or off.
• Display At: In this section, one can decide where customers should fill in their delivery date information, specifically under Shipping Method or Shipping Address.

*Note: With third-party payment methods, clients are able to adjust the delivery date or add comments in the Review Order tab.

It is required to modify the Delivery Date so that modifications are kept right before pushing the Place Order button.

• Processing Time: This relates to the number of days from when an order was placed on a website until delivery starts.

For example, if you define it as 1 day today, then tomorrow customer will get some choices about when he/she would like to receive his/her item after today.

• Cut-Off Time: This means any specific time point during a day; any orders made later than that will be thought about as necessary for the next day.

• Holidays/Exclude Days/Blackout Days: Magento store admin has indicated the days that are not available for delivery in the calendar. Such days will show up as gray or faded out on customers’ delivery calendars indicating that they cannot be selected.

In case there are any additional days that the Magento store admin wants not available in this calendar, they will have to add them through the “Add” button. In case the Magento store admin wants to remove them, they must select the trash can icon located below the “Action” column. Each of these days has specific reasons why it is excluded from happening first.

• Delivery Time Slots: Define the delivery time more specifically by the hour throughout the entire day. However, it is possible to add or delete time slots, along with including a remark for every slot, just like in Holidays, Exclude Days or Blackout Days.
• Enable Shipping Arrival Comment: When you want your customers to comment on shipment arrival, select Yes. Otherwise, select No if you prefer not to have this section.

• Disable Delivery Dates: You are able to identify days of the week that are not fit for selecting delivery dates.
• Date Fields: Delivery date can be selected as per your preferred format.
• Icon Calendar: It is upon you to select a calendar icon that pleases you.
• Exclude Holidays/Disable Day from Processing Day:

For example: If it is Monday, June 4th, 2018 when an order is put in and Sunday seems to be a disabled day but Wednesday, June 6th, 2018 has been marked out as a public holiday with a processing period lasting for ten days.

• Yes: Disabled days and holidays will NOT be included in the processing days for delivery time.
  Consequently, the earliest possible delivery date is June 16th, 2018, as the processing days are 04, 05, 07, 08, 09, 11, 12, 13, 14, and 15.
• No: Disabled days and holidays WILL be counted as processing days.

In this scenario, the earliest delivery date would be June 14th, 2018, since the processing days include 04, 05, 06, 07, 08, 09, 10, 11, 12, and 13.

Magento store admin can set the Date/Time Slots/Comment field as mandatory if desired.

So, the complete guide to adding delivery date to the checkout page in Magento 2 is totally completed.

Enhance your checkout experience today and improve user experience and gather valuable data effortlessly

>>> Magento 2 Add Custom Field in Checkout Page Programmatically

Key Important of Magento 2 Add Delivery Date to Checkout

Adding a delivery date feature to the Magento 2 checkout page presents numerous advantages, including:

• Customer Satisfaction: The introduction of this feature greatly enhances customer experience, giving customers more control over when they want to receive their products and hence allowing them to plan their schedules accordingly.
• Delivery Optimization: Shipping is an expensive affair for e-commerce businesses. By enabling customers to select a delivery date, store owners can combine other deliveries in close proximity on the same day increasing operational efficiency.
• Decrease in Cart Abandonment: Providing a delivery date option can lead to a decrease in cart abandonment rates. Many customers abandon their carts because they are not sure about the time frame for delivery or possible delays.
• Decrease in Customer Support Inquiries: Furthermore, incorporating such a feature reduces customer inquiries about delivery schedule questions significantly. This information is available during the checkout process so as not to require customers to contact support regarding clarifications thereby enabling them to focus on what really matters.
• Minimization of Failed Deliveries: In instances where a product is dispatched but the customer is unavailable to receive it, failed deliveries can adversely affect the store’s finances and diminish customer satisfaction, even if the situation is beyond the store’s control.

The Bottom Line

To sum up, users can add the delivery time within the delivery comments. Besides, this extension allows for the separate provision of delivery date and time field in Magento 2. Should you wish to enhance your checkout page to gather more information from your customers, the custom checkout fields extension by BSS Commerce is an ideal solution. Please reach out to us if you encounter any difficulties with the installation, usage, or customization of this extension. Thanks for reading!