This article explains the steps to add a Time Picker in WooCommerce Checkout page by correctly configuring WooCommerce Checkout Field Editor plugin. Time picker is a dropdown list with time slots listed at a defined interval. This input field helps users to choose time for delivery, appointment etc. Once WooCommerce Checkout Field Editor is installed and activated, you can access plugin settings page via WooCommerce > Checkout Form.
After making changes in plugin setting, always click on the ‘Save Changes’ button to save those changes.
Add New Time Picker Field
To add a new Time Picker field, first go to one of the section(billing, shipping, additional or your custom section) where you want to add the field.
Then, click the ‘Add Field’ button.
It will open a popup form where you need to select Time Picker from the Field Type select box. Fill the name for the field and other properties in the form and click on ‘Add New Field’ button. Finally click on the ‘Save Changes’ button so that the new changes take effect.
Time Picker Field Properties
- Name: The name property specifies the unique name of the field, which is used as the meta key to save value internally in database. This will NOT be displayed on checkout page. Name must be unique. eg ‘lead_source’
- Type: This is the property that allows you to choose the type of the field that need to be added. Select Time picker. It will add a text field with a JavaScript time picker attached to the Checkout form.
- Label: Label is the display name for the input field which will be shown on the checkout page. This will also be displayed on the Email, Thank You Page, Order Details Page etc.
- Description: The description property is a short hint that describes about the field.
- Default Value: You can assign a default value for the field by providing the value here. This value will be shown as the default value when the checkout form is loaded.
- Placeholder: The placeholder property is a short hint (a sample value or a short description of the expected format) that describes the expected value of an input field.
- CSS Class: In case you want the input field to be styled differently, you can add a css class for the field. You may need to define the styles for this class in your stylesheet.
- Label Class: Similarly, in case you need the Label to be styled separately you may define the CSS class name here.
- Validations: Choose validation rules that should be applied to the input field. You can define your own validation rules in the Advanced Settings section. Any validation rule defined in Advanced Settings section will appear in the select box.
- Price: In case you need to increase or decrease the cart total based on the user input in the checkout page you can do so using this field. Provide a negative value if you want to give discount.
- Price Type: You can set the price type as ‘Normal’ which means the set price just get added to the total or ‘Percentage’ where in the specified percentage of the cart total gets added to the total.
- Taxable: By using this property you can set whether the field is taxable or not.
- Tax Class: In this property you can set a particular tax class.
- Required: If you select this option the field will be shown as a required field in checkout page. If a value is not entered or selected for this field a warning will be displayed.
- Clear Row: This property is useful to align fields left and right on the same row. Selecting ‘Clear Row’ stops a field being shown on the same row as the previous field. Field will be forced to display on the next row.
- Enabled: By default this property will be selected and field will be enabled. If you want to disable the field you need to deselect this. A disabled field will not be displayed on the checkout page. It will kept in the field list on the admin side in case you need to enable it again in the future. Use remove button if you want to remove a field permanently.
- Display in Admin Emails: If this property is selected, the field and its value will be displayed in New Customer Order email (Admin copy).
- Display in Customer Emails: If this property is selected, the field and its value will be displayed in Order Confirmation email (customer copy).
- Display in Order Detail Pages: This property can be used to display your custom field and its value in Order Details page (Admin page).
- Display in Thank You Page: This property can be used to display your custom field and its value in Order Confirmation page (Thank You page).
- Order Meta Data: This property can be used to save your custom field and its value as part of order data (saved in order meta table), so that this field value will be specific to each order.
- User Meta Data: This property can be used to save your custom field and its value as part of user data (saved in user meta table), so that the custom field will available in user profile page and user can edit the value from there.
- Min. Time: The beginning time in the dropdown list. ex: 12:00 AM.
- Max. Time: The end time available in the dropdown list. ex: 7:00pm.
- Start Time: Start Time is the minimum time needed to choose the next time slot. For an example, if you require minimum 2 hour and 30 minutes to prepare, pack & deliver the order placed by your customers, then you can set the Start Time as 2h 30m so the customer will only be able to select a time which is after 2h 30m from now.
- Time Step: The interval which splits the time between the starting and ending time. In minutes, ex: 30.
- Time Format: Choose between 12 hour or 24 hours format.
Once you configure the Time Picker field you will see the field in WooCommerce checkout page as shown below,
