How to add Conditional Checkout Fields in WooCommerce

One of the most important pages in any Woo-commerce store is the checkout page. In the world today, there are many online stores. Therefore, you need to customize your checkout page to be ahead of your competitors.

Also Read: How to remove product-category slug in WooCommerce?

Do you want to create conditional logic on the WooCommerce check-out page? In this article, you will learn how to add Conditional Checkout Fields in WooCommerce.

WooCommerce Conditional Checkout Fields

Let’s assume you have a product (Ex. Handmade Sweater, Shirt) and you want to collect more details like customized fitting size (Ex. Neck, Chest, Waist, Sleeve) at check-out.

One of the best ways of improving the check-out is by adding conditional fields. We can add fields to the checkout using WooCommerce based on almost any conditional matches. These fields allow you to create a conditional logic and show only fields that the customer must completed to speed up the purchasing process on the checkout page.

Steps to Add WooCommerce Conditional Checkout Fields on the Checkout Page

Adding Custom Fields to Checkout

WooCommerce has many useful hooks to apply with our code. We’re going to use woocommerce_before_order_notes for this tutorial that allows us to add our custom fields in the checkout form right above the ‘Order Notes’ box.

Add the following code to the functions.php file under in your current theme or child theme folder:

Hide the Fitting Size Text Field with CSS until they have chosen the option. Add below CSS to your theme’s stylesheet:

Slide Toggle the Field to hide/show Based on the Customer’s Choice

Now, if the user selects the “Yes” checkbox we want to slide the Customized Fitting Size Text Box field down to display. If they uncheck the field we will slide it up to hide. Just copy and paste below simple jQuery to do this:

Now add any product in the cart and go to checkout page. You should see the fields added right above the ‘Order Notes’ box.

Refer the following image
Not Checked option and Not Toggled slide:

Checked option and Toggled slide:

Save the New Checkout Fields After Successful Order

Now We are going to use another WooCommerce hook called woocommerce_checkout_update_order_meta, this hook will save custom fields to the order meta.

Copy and paste the code below to the function.php file:

Now test an order and you will get our custom field data in the order’s post meta. Please refer below image

Add the Custom Field Data to Order Emails

Mostly the shop owner get notification of orders via email. Now, what we want to do is send our custom field data along with that email so they can fulfill the order accordingly.

To send our custom fields data along with the email, We are going to be using a filter called woocommerce_email_order_meta_keys.

Copy and paste the code below to the function.php file

Now test an order and you will get our custom field data in the order’s notification email.

Please refer below image

Displaying the custom field on WooCommerce Thank you page

To display our custom fields data on WooCommerce thank you page, We are going to be using a filter called woocommerce_order_details_after_order_table.

Copy and paste the code below to the function.php file:

Now test an order and you will get our custom field data in the order’s notification email. Please refer below image.

Also Read: Add custom fields to WooCommerce registration form without plugin

Conclusion

Well, This tutorial provide you complete steps to how to add conditional fields on the WooCommerce checkout page. I hope you found this tutorial helpful for your project. Keep learning!. If you face any problem – I am here to solve your problems.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request