Magento 2How To GuideSeptember 27, 2023

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

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

Why Adding a Delivery Date to Checkout is Important?

Adding a delivery date to the Magento 2 checkout page offers several benefits. It enhances the overall customer experience and optimize operational efficiency.

Firstly, providing the option to select a delivery date offers flexibility and convenience. Customers can choose their preferred delivery date to ensure they are present when their order arrives.

The option of a delivery date reduces the cart abandonment rate. Uncertainty regarding delivery dates or unexpected delays often causes customers to abandon their shopping carts.

Additionally, offering a delivery date option reduces the volume of customer inquiries related to delivery times. Customers can easily access this information during the checkout process, reducing the need for them to contact customer support for clarifications.

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

There is no built in option in Magento 2 to add a delivery date to the checkout page. To do so, you will either need to develop a custom module or use third-party extensions like our Custom Checkout Fields extension. This extension allows you to add any type of field to any checkout step.

For the purpose of this article, we will add 'Delivery Date' and 'Delivery Comments' fields to the Shipping Methods step of the checkout page using the extension.

Let's see how to use the extension to add these fields.

After installing the extension, login to your Magento 2 admin panel and navigate to FME Extensions > Manage Fields > Add New Attribute.

Under the Attribute Properties section, configure the following options.

Attribute Properties
  • Default Label: Enter a label for the custom field to show on the frontend
  • Catalog Input Type: Select the type of field
  • Values Required: Make the field mandatory or optional

Under the Advanced Attribute Properties section, you have the following options.

Advanced Attribute Properties
  • Attribute Code: Enter an attribute code for internal purposes.
  • Default Value: Select a date that will show by default.
  • Input Validation: Choose if you want to validate the input data i.e. decimal number, integer, email, ULR, letters, etc.
  • Show in Email and PDF: Select 'Yes' to show the field data in invoice email and PDF.

Below you have the options to limit the field to specific store view and customer groups.

Limit to Store Views and Customer Groups  

Now click on the Storefront Properties tab where you have the following options.

Storefront Properties
  • Enabled on Checkout: Select 'Yes' to enable the field on the checkout page.
  • Checkout Step: Select the checkout step to show the custom field.
  • Position: Give a number to sort the field.
  • Tooltip: Provide additional information about the field that will appear on mouse hover.

Now if you go to the checkout page, you will see Delivery Date and Delivery Comments fields in the shipping methods step as shown below.

Add Delivery Date to Checkout in Magento 2 If you want to customize your checkout page to collect additional data from your customers, custom checkout fields extension is the way forward.