This tutorial describes the process of adding a WooCommerce custom select box to your WooCommerce site, as well as how to ensure that the data is properly stored in the database. I will also explain how to add the information from the select box on the order details page and order emails.
In this tutorial, I will use the case of a client as example. For this client, I’ve added a select box to the checkout page of his WooCommerce web shop. With this select box, the customer can select a specific part of a day for order deliveries. Making some small changes, you may use this solution for other purposes as well.
Add the custom select field to the WooCommerce checkout
First, we create a custom field by adding the snippet below to your themes functions.php. The most important settings in this function are the type (this is set to the value ‘select’) and the options array. In the option array you find four options, that will be displayed as options in the select box. The first option (blank) is used as a placeholder. You may change the text of the placeholder as long as you leave the value ‘blank’ in place.
Information about the various settings and options can be found in the WooCommerce Docs.
Process the checkout and set error message
Subsequently, add the snippet below to your functions.php. This function will check if the input field has another value then the first option of the options array, the placeholder. If the customer didn’t select anything, an error message is be displayed.
Update the order meta with the field value
Next, you need to use the following function to save your field. Add this snippet to your functions.php as well.
Display field value on the WooCommerce order edition page and emails
Finally, add the following snippet to your functions.php. This snippet adds the selected value on theWooCommerce order page. The function will also add the selected value to the WooCommerce e-mail message.
See the screenshot for an example of what it looks like on the order details page.
That’s all: you’ve just added a custom select box to your WooCommerce checkout page. The day part selector is just an example. With some tweaks, you can easily create your own selection. Making some small changes in the code allows you to change the select field to an input field or to radio buttons, if you prefer.
I hope you find this tutorial helpful. If so, consider sharing it with your audience!
Hi, Frank.. nice tutorial. do you know how to make field with select filter like this? http://img02.imgland.net/R4tGZnd.jpg now we only have simple selection field. thanks
Hi, This could be a great start: http://jqueryui.com/autocomplete/#combobox
Thank you for tutorial.
Tell me how to display field value as «In the afternoon» but not «afternoon».
This part of code not work good?
‘options’ => array(
‘blank’ => __( ‘Select a day part’, ‘wps’ ),
‘morning’ => __( ‘In the morning’, ‘wps’ ),
‘afternoon’ => __( ‘In the afternoon’, ‘wps’ ),
‘evening’ => __( ‘In the evening’, ‘wps’ )
)
P.S. I`m not a programmer and i can`t understand how to make it.
The code in the example already shows the field value with ‘in the afternoon’ and should work fine. Only in the backend you see under the delivery option afternoon.
Hi Frank, thanks for tutorial. How to know user choice delivery in the admin panel if admin must approve? *sorry my bad english
The delivery choice of the customer will be visible on the order details page under the billing details.
Great! Saves me a lot of time! 😀 Thank you Frank!
This is great, thank you. Is there a way of getting the selected option to show up in the WooCommerce reports so we can view orders by what they have selected?
Probably, but this is outside the scope of this tutorial.
great tutorial ..i just have this problem after pasing the order neither the client nor the admin can see the delivery time chosen ……in the local site it works but on my online website it doesn;t work …can you sugest any solution ? thank you
If it works on your local site and not on your production environment you should first ask yourself what the differences are? Second I should activate wp_debug on your production environment.
great tutorial everythig works i just have the issue the delivery time doesn’t appear after passing the order neither for the admin nor for the client …will you give me any advice ……..and i’ll bethankful
hi, thx for your tutorial.
Can you say me how to match my custom select field to the country field of billing ? They do not appear in the same way
There’s some way to add cost per product on this select?
Probably, but that question is outside the scope of this tutorial.
super clear the explanation … but how can I create a 2nd field according to the option chosen in this select?
Hey Rosa,
I think you should use something like show/hide based on a select option with jQuery.
Frank
Thanks for your tutorial bro. Very useful.
Hello Frank,
Thanks a lot, man, it is great. People are selling these codes as plugins for 100$.
Q: what if I wanted to add a date selection instead?
Hello Mohsen,
Thanks!
I think this can be a good starting point for you: https://jqueryui.com/datepicker/