How to Create Conditional Checkout Fields in WooCommerce

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:

 * Add the field to the checkout
add_action( 'woocommerce_after_order_notes', 'wordimpress_custom_checkout_field' );

function wordimpress_custom_checkout_field( $checkout ) {

	//Check if Book in Cart (UPDATE WITH YOUR PRODUCT ID)
	$book_in_cart = wordimpress_is_conditional_product_in_cart( 117 );

	//Book is in cart so show additional fields
	if ( $book_in_cart === true ) {
		echo '<div id="my_custom_checkout_field"><h3>' . __( 'Book Customization' ) . '</h3><p style="margin: 0 0 8px;">Would you like an inscription from the author in your book?</p>';

		woocommerce_form_field( 'inscription_checkbox', array(
			'type'  => 'checkbox',
			'class' => array( 'inscription-checkbox form-row-wide' ),
			'label' => __( 'Yes' ),
		), $checkout->get_value( 'inscription_checkbox' ) );

		woocommerce_form_field( 'inscription_textbox', array(
			'type'  => 'text',
			'class' => array( 'inscription-text form-row-wide' ),
			'label' => __( 'To whom should the inscription be made?' ),
		), $checkout->get_value( 'inscription_textbox' ) );

		echo '</div>';


 * Check if Conditional Product is In cart
 * @param $product_id
 * @return bool
function wordimpress_is_conditional_product_in_cart( $product_id ) {
	//Check to see if user has product in cart
	global $woocommerce;

	//flag no book in cart
	$book_in_cart = false;

	foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];

		if ( $_product->id === $product_id ) {
			//book is in cart!
			$book_in_cart = true;


	return $book_in_cart;


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:

.inscription-text { display:none; }

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:

$('.inscription-checkbox input[type="checkbox"]').on('click', function () {

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

Not Toggled:

Woo Checkout Custom Field


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:

 * Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'wordimpress_custom_checkout_field_update_order_meta' );

function wordimpress_custom_checkout_field_update_order_meta( $order_id ) {

	//check if $_POST has our custom fields
	if ( $_POST['inscription_checkbox'] ) {
		//It does: update post meta for this order
		update_post_meta( $order_id, 'Inscription Option', esc_attr( $_POST['inscription_checkbox'] ) );
	if ( $_POST['inscription_textbox'] ) {
		update_post_meta( $order_id, 'Inscription Text', esc_attr( $_POST['inscription_textbox'] ) );

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.

 * Add the field to order emails
add_filter( 'woocommerce_email_order_meta_keys', 'wordimpress_checkout_field_order_meta_keys' );

function wordimpress_checkout_field_order_meta_keys( $keys ) {

	//Check if Book in Cart
	$book_in_cart = wordimpress_is_conditional_product_in_cart( 117 );

	//Only if book in cart
	if ( $book_in_cart === true ) {

		$keys[] = 'Inscription Option';
		$keys[] = 'Inscription Text';

	return $keys;

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


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.