woocommerce-thumbLet’s say you have a certain product that you need to capture additional information for at checkout. Using WooCommerce we can add fields to the checkout based on nearly any conditional matches.

For this tutorial we will be using the premise of a book seller. Let’s say that the store owner wants to add an option at checkout for the user to choose whether they would like the book inscribed with a message from the author.  

Adding Custom Fields to Checkout

WooCommerce is filled with many useful hooks to tie into with our code. The checkout action we will be using for this tutorial is woocommerce_after_order_notes which will allow us to add our custom fields directly below the “Order Notes” field in the checkout form. If you would like your fields to display elsewhere there are a number of additional hooks you can use such as woocommerce_after_shipping_calculator and woocommerce_after_shop_loop.

Within the following function we will check what items the user has in their cart by looping through their products and flagging a variable as true or false. If the variable is false the fields will not output, if it is true and the specific product is in the cart will will output our fields. Here’s the code:

Make sure you update the product ID to whichever product you are adding the conditional field for. You can update this to test for multiple products, a category of products or variation.

Now check out the cart page and you should see the fields added below the checkout.

Hide the Inscription Text Field with CSS

We need to hide the inscription text field from the user until they have chosen the inscription option. This is easy thankfully with some simple CSS. Add this to your theme’s stylesheet:

Slide Toggle the Field Based on the User’s Choice

Now, if the user selects the “Yes” checkbox we want to slide the inscription text field down. If they uncheck the field we will slide it up. Let’s use some simple jQuery to do this:

Here’s what my checkout fields look like with some additional styling.

Not Toggled:

Woo Checkout Custom Field

Toggled:

Woo Checkout Custom Field

Tip: Check out the woocommerce_form_field function within WooCommerce to modify the fields to a textarea, select, etc.

Save the New Checkout Fields Upon Successful Order

Now that our fields are displaying properly we need to save them to the order meta when the order goes through. We will again use a WooCommerce hook to do this called woocommerce_checkout_update_order_meta.

Add the following code below the function provided above and update with your necessary modifications:

Now test an order out and you should see our custom field data in the order’s post meta:

Woo Custom Field Order Meta

Now that the data is attached to the post you can do whatever you like with it.

Add the Custom Field Data to Order Emails

Most likely the shop owner is notified of orders via email. What we want to do is send our custom field data along with that email so they can fulfill the order accordingly.

We are going to be using a filter called woocommerce_email_order_meta_keys to send our data along with the email. Again, we will first check the the order does contain the product because we don’t want to clutter up the email with blank custom fields.

Now when an order goes that contains our specific product, in this case a book, our fields will display:

woo-custom-field-email

Conditional Checkout Fields: Oh the Potential

With conditional checkout fields in WooCommerce there is a lot of potential use cases. For instance, you can ask a user to sign up to a specific mailing list based on their product choice, ask for additional shipping requirements or special handling questions, or request additional information from the user. The system is setup to be very flexible, you just have to know how to use it.

If you have any comments, feedback or contributions please use the comments below.

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

There are 101 comments

Join the Discussion

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