In this article I will explain to you a simple way how to add a Time Picker in your WooCommerce Product Page using the Flexible Product Fields plugin. Therefore, read this article carefully and find out how to do it just in a few steps.
Table of contents
- Step 1: Download the Flexible Product Fields plugin
- Step 2: Add Time Picker to your product page
- Step 3: Customize your Time Picker field
- Step 4: Save and Update
The Time Picker Field might have numerous uses on your WooCommerce Product Page. Most importantly, you can use it to establish the exact pick up or delivery time of a product or service, like for example food delivery. For instance, let's imagine you owe a catering company and you want your customers to have the option to choose the exact delivery time of their meals. Not your case? Maybe you owe a Wellness Center and you want to provide your customers the option to make an appointment choosing the exact time of the day? Or you are a florist and you want to make it easier for your clients providing this option for them. In conclusion, all this can help customers visually see the dates available for booking. Useful, right? With this field type it is possible and incredibly easy to implement.
Step 1: Download the Flexible Product Fields plugin
*The time picker field is available in the free version of the plugin. However, some extra features, like pricing or conditional logic, are available in the pro version of the plugin.
Firstly, watch this video and find out what you can get in the free version of the plugin:
Then, download, install and activate it.
The Flexible Product Field plugin will be visible in the Products tab:
Secondly, click it and start customizing your WooCommerce product page.
Step 2: Add Time Picker to your product page
Here you will see all field types available in the Flexible Product Fields plugin. To add the time picker, click the Time field, which is located within the picker fields:
Step 3: Customize your Time Picker field
This is an example of how you can modify the time picker field on your WooCommerce product page:
*If you have any doubts of what each of these fields represent and what are they used for, please check our Documentation where you can find all the information about these issues.
This is where you should give all the basic information concerning this field. Now let’s check the Advanced tab. For example, in my configuation, I have used the 12-hour clock:
Here you can choose whether you need your Time Picker field to be in the 24- or 12-hour format. Additionally, choose any minute interval (from 1 to 60) in which you want to display your field. As a result, you can easily adapt the time format to the one people use in the country, where you sell your items or services.
Moreover, you can go to the Pricing Tab if you want to establish a price for your time field:
Consequently, you can choose from Fixed or Percent price type.
Last, but not least! In addition, you can also configure the Conditional Logic for this field type, which will be set in accordance with another field type used by you while modifying your WooCommerce product page:
*Read the Documentation to find more about how Conditional Logic works.
Step 4: Save and Update
Most importantly, once you have added and personalized this field for your product page, don’t forget to click the Update button on the right top side of the page:
In conclusion, this will be your final result of how your Time Picker looks on your WooCommerce Product Page:
Did you find it useful? Please feel free to comment this article once you have any doubts, because we will be more than happy to guide you further ☺️