WordPress 20th Birthday!

Up to 40% discount



Celebrate with up to

Happy Holidays!
Upto 70% off

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

Add Delivery Date on Checkout using CoDesigner

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 the customers on their convenient date, your website checkout must have a delivery date field. In this post, you will know 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.


Share with your friends

Related posts based on your interest

One Response

  1. Pingback: 10 tips to increase your sales by optimizing the checkout process - Codexpert - Helping Boost Your Business​

Leave a Reply

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

Subscribe to
Our Newsletter

No spam. Unsubscribe anytime.