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!