End of Spring Flash SALE


Up to 50% OFF!

Grab Now

How to add a delivery date field in the Checkout page with CoDesigner

Mar 10, 2024

Share this content

Copy Link

Most online stores need custom fields on the checkout page and the top preferred one is delivery date. For example, if you run an online grocery or pastry shop that delivers goods to customers on their convenient date, your website checkout must have a delivery date field. In this post, you will learn how to add a delivery date field and create a customizable checkout page. Also, you will learn how to display the delivery date submission to your customers and on the order management page of WooCommerce.

The default WooCommerce doesn’t have any option to customize the checkout page and that’s where CoDesigner can help you out. CoDesigner lets you fully design and customize the checkout page without much hassle. It has 8 premium widgets to enhance the WooCommerce checkout page. These widgets include –

  1. Billing widget,
  2. Shipping widget,
  3. Order notes,
  4. Order Review,
  5. Order Pay,
  6. Payment methods,
  7. Checkout login and
  8. Thank you widget.

The billing, shipping, and order notes widgets have the option to add new fields that you always wanted to have on your store checkout. Also, you can edit the existing fields. While adding the new fields you will get the options to change –

New section components
  • input label,
  • class name,
  • input type (it can be textarea, checkbox, text, password, date, number, email, URL, telephone number, select, and radio options),
Input Type
  • field name,
  • placeholder,
  • autocomplete value,
  • show in the email (in order details, before order table, after order table, in order meta, in customer details),
Show in email
  • show in Thank You page (before Thank You, after/bottom of Thank You),
Show on Thank You page
  • show on order edit page (after order details, after billing address, after shipping address, order items header, after shipping totals, before order action, after order action)
Show on order edit page

Add a delivery date field on the checkout page

Now that you have a clear idea of the new billing field components, let’s start creating a checkout page using Codesigner and see the method to add a delivery date field along the way.

  • Before starting make sure you have the following plugins installed on your WordPress website –
  1. Elementor,
  2. WooCommerce,
  3. CoDesigner free version, and
  4. CoDesigner Pro.
  • Turn on the checkout pages from the CoDesigner dashboard and save the changes.
Activate the checkout widgets
  • Now, you need to create a new page for the checkout page and edit it with Elementor. You can also delete the WooCommerce shortcode from the old checkout page and start creating the checkout page directly into it.
Create a new checkout page
  • Add your preferred widgets on the Elementor editor. I’m going to add the billing, shipping, order notes, order review, and payment methods for demonstration.
Checkout page created using CoDesigner
  • As the billing, shipping, and order notes widgets have the option to add new fields, I’m going to add a new field for the delivery date on the Order Notes widget.
Add delivery date field on the Order Notes widget
  • Set the Input Label – Delivery Date.
  • Now, select Date in the Input Type.
Add Delivery Date in billing, shipping, or order notes widget
  • If you wish to show the delivery date submissions by the customers, choose the options in Show In Email, Show on Thankyou Page, and Show on Order Edit Page.

Here’s how the delivery date field looks like on the frontend –

Delivery date on checkout page

Your customers can easily select the date they want the delivery on the checkout page. Also, they will be notified through the Email and Thankyou Page if you have turned on the options. As an admin, you will be able to view the delivery date of any specific order directly on the Order Management page of WooCommerce.

If you want to learn more about the design and customization steps of the checkout page, don’t hesitate to check this post.

CoDesigner also lets you customize and design the cart page for free, check it out.

Subscribe to Our Newsletter

Get the latest WordPress tutorials, trends, and resources right in your inbox. No Spamming, Unsubscribe Anytime.

Please fill out the empty field.


Thank you for subscribing to our newsletter!

Nazmus Sadat

A WordPress enthusiast, content creator, and tech admirer. Loves to learn new things and help others.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top