In two previous posts, I described how to edit the default WooCommerce checkout fields, and also how to add a custom field to the checkout screen. These changes are a great way to tailor the checkout process so that it is easier for your customers to make a purchase, and so that you collect all the data you need in order to process that order. But what if you wanted to conditionally display WooCommerce checkout field so that it only displays if a certain product (or products) are in the customer’s cart? This tutorial will show you how to show those fields only when they are needed.
Who Needs to Conditionally Display Checkout Fields?
If your WooCommerce shop sells some customized products or things that may require more information from the customer than the standard checkout field provides. For example, if you sell:
- Customized products, such as hats, shirts, mugs, etc. You may want to prompt the customer to enter the text they want to have displayed on the product. But if a customizable product is not in the customer’s cart, you don’t want to confuse them with extra fields.
- Registration for an event. You may want to provide a drop down menu with meal choices if the event is a dinner, or have a text field asking them to list any food allergies. You can also use this to ask for the names of the attendees at the event.
- Include a note to the recipient of a gift basket. If you are a florist or sell gift baskets, your products are often times given as gifts for birthdays, holidays and other special events. You can prompt your customers to include a note with the product if it is one of the standard gifts you sell.
- Digital product delivery. You may want to offer alternate methods for delivering a digital product, such as via email, download, or the option to have a CD/disc mailed to the customer.
Conditionally Display WooCommerce Checkout Fields
You can easily add custom fields to WooCommerce Checkout and edit existing fields with Conditional Woo Checkout Field Pro. Get Conditional Woo Checkout Field Pro
The remainder of this tutorial will assume that you have gone through the previous two tutorials explaining how to edit the default WooCommerce checkout fields, and how to add your own custom fields. If you find yourself feeling like you have missed a step anywhere during the rest of this tutorial, please refer to those earlier tutorials.
Like in those previous examples, all of the code we are working with will go in your child theme’s functions.php file, or a site specific plugin.
The first thing we need to do is hook into the checkout form, which will allow us to add our field(s) after the order notes area.
add_action('woocommerce_after_order_notes', 'conditional_checkout_field'); |
Next, we need to add a function that will check to see if the product we are interested in showing a custom field for is in the customer’s cart, and then display that field only if that product is in the cart.
<?php function conditional_checkout_field( $checkout ) { echo '<div id="conditional_checkout_field">'; $check_in_cart = conditional_product_in_cart(xxxx); //replace xxxx with the product id // Check if the product is in the cart and show the custom fields if it is if ($check_in_cart === true ) { echo '<h2>'.__('My Custom Checkout Field').'</h2>'; woocommerce_form_field( 'custom_field', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide'), 'label' => __('Label for my Custom Field'), 'placeholder' => __('Placeholder to help describe what you are looking for'), ), $checkout->get_value( 'custom_field' )); } } ?> |
In the example above I am using a simple text field, but you can use a text area, or a select drop-down menu if you want. Also, if you need more than one field to show up like if you want to provide meal choices in a drop down menu, and also provide a text box for food allergies, you can add several of the following arrays to the function.
woocommerce_form_field() |
Now you will have a custom field that only displays in the checkout form when a certain product is in the customer’s cart.
IMPORTANT: You will also need to attach the information provided by the customer to the order, and order confirmation emails. This is done the same way as it was done in the custom checkout field example.
Hi!
Thanks for your helpful post! So useful to me.
A question though: I’d like to ask customers if they want to be advised via SMS of their order status. Is it possible to show a text field, used to enter their mobile number, after they chose “yes” to a select menu?
Thanks in advance for your response.
This should be possible. Do you want it to show the text field only after the customer clicks yes, or should the text field always be there?
From a checkout flow perspective it might be easier for customers if there were fewer fields to fill out, which might be a reason to not ask if they want SMS notification first, and instead just show the text box.
Hi Scott, really helpful post. Is it possible to do a similar thing if you product with variations? Lets say you sell tshirts and it can either be blank or have printing on, you would only want the custom field to appear for the one with printing.
Thanks
James
That’s a good question. I’ll have to look into that – perhaps for another post!
Hi Scott. The line …
$check_in_cart = conditional_product_in_cart(xxxx);
….seems to be causing an error for me.
Is conditional_product_in_cart something that WooCommerce understands natively, or do I need more code to support that? If I manually set $check_in_cart to true, then it’s all good. But when I plug in my product id in for xxxx the page errors out.
Thanks for any help you can provide.
Hi. It’s possible to create a custom required field that depends on the gateway choice?
For example, if I choose BACS a field named ONE will show, while if I choose another gateway ONE field disappears and a field named TWO appears…
Hello Gianni,
This would most likely have to be configured separately for each gateway. I haven’t had the opportunity to dive into their gateway configuration yet, but I would imagine that there is a hook or filter that would enable you to add fields depending on the gateway selected.
Scott
It’s difficult to create an offline gateway? Can you suggest some tutorial?
Hi,
I followed your tutorials, and it works, thus far.
However, I’m collecting name, email and phone for each attendee of an event.
Ho can i display the custom fields, not only conditional to the product, but also to the quantity of the product?
Thank you
Schalk
Hi scott,
tanks so much for your useful post.i appreciate your post.
i have an option in checkout page and it is free tester of Perfume
i would like this option to be displayed when customer buy more than 50$.
hope you can help me.
Hi,
i would like how i can make conditional additional information in checkout page .As an example i want it would be shown when customer buy more than 50$.
hope you can help me.
have a excellent day.
Hello,
Thank you for the helpful posts. As mentioned in the comments above I need to display custom fields based on item quantity.
1 x ticket = 1 customer name field email field and address field
2 x tickets = 2 name fields, email fields and address fields. Etc
I’ve been searching for hours and nobody seems to provide any custom solution.
I would be really really really REALLY grateful if someone could help!
Kind regards,
Melissa
Check out the Conditional Woo Checkout Fields Pro plugin. It has conditional fields based on the customer’s cart quantity just like you are looking for.
Did you ever find a solution to this Melissa?
I’m trying to do the exact same thing!
Thanks.
Hi the Edit Woocommerce Checkout Fields and Add Custom Fields Tutorials linked to this are really helpful. I wanted to Add a Conditional Checkout Page for a specific price of products (Free Products).
Moreover I do not want to edit the fields but the Billing Details should change to Register. Place Order should change to Register Now etc. Basically A Conditional Checkout Page with the same fields but different texts in the button. How do I make this possible?
I think you would need to edit your checkout page template, and build in some logic to determine which version of the checkout page should be loaded.
I looked at the Conditional Fields Checkout Pro and could not see if there was a place to select a conditional text field based on both the Cart total as well as the Billing or Shipping Country. Is this possible?
The Conditional Checkout Fields plugin is conditional only based on the products that are in the customer’s cart. It doesn’t take into consideration what the order total is or what country they are from.
Hi,
and thank you for a great snippet.
But is possible hide/unset a billing_field, when the customer chose a specific payment_method?
Don’t exist any plugin and search snippet, how do that….
Hello !
Is it possible through script to add an “additional field” in “text” format, where when typing on the field it will do an option search saved in a “data table” in the SQL database?
Example:
In the database I have stored the name of fruits (Grape, Strawberry, Banana and melon). If the user types the first letter, example “G” will automatically filter the options and in this case will bring “GRAPE”.
It’s possible ?
It is possible, but you would need to use some jQuery in your text field to populate the results. Here are a number of options that might help.