instagram rss arrow-down

I’ve seen many people asking for a solution on How to add conditional checkout fields in WooCommerce. There are so many good WooCommerce Plugins to handle checkout fields, but there is always something missing. The closest match I could find that can handle WooCommerce conditional checkout fields is Conditional Woo Checkout Field Pro. But unfortunately, this plugin is lacking the price field.

For what can I use this script?

Most of the WordPress users are familiar with The Events Calendar Pro by Modern Tribes.  I had a request from my client who is selling tickets for B2B events with WooCommerce and The Events Calendar: WooCommerce Tickets. But there was a problem.

No matter how many tickets you add to your cart, checkout will only allow you to enter billing information of the buyer. In my case, the buyer is usually a person who’s buying the tickets for his employees. And he may or may not be the one who’s attending the event.

So, what this script does is following:

  • It adds an extra field to the Woocommerce checkout fields
  • Number of fields are based on the cart quantity. If the user has purchased 2 tickets, fields for 2 attendees will be created.
  • User can check if he is attending the event and if he does, fields for the First attendee will be auto populated with the values from billing section
  • User can also add extra options at Woocommerce checkout
  • WooCommerce cart is dynamically updated based on the options selected
  • Updates the order meta with the field value
  • Displays field value on the order edit page
  • Adds field values to email

In my case, these set of Woocommerce extra checkout fields solved my problem. I now have fully functional Conditional checkout fields with price in WooCommerce.

Where to add this code?

  • You would normally add this code to your themes functions.php file.
  • You will also need to add numeric.js before closing the body tag. </body> . Depending on the theme, your </body> tag can be found inside header.php or footer.php. 
  • You will need to create a folder named “js” inside your theme root folder, create file “numeric.js” and paste the content of the numeric.js from this tutorial.
  • You will also want to style your fields a bit, you can use your themes custom CSS for that

A word of caution:

The following example of Conditional Checkout Fields with price for Woocommerce will probably not work for you by just pasting the code. I had a very untypical WooCommerce setup with a lot of custom features, and needless to mention, all customizations were done with Child Theme. Use this following example only as a guidance and append the code to your needs.

This code snippet is fully functional, it’s active on my client website and it’s running on WordPress 4.7.2 with WooCommerce 3.0.5. I won’t go into details which part does what, as I believe that those of you who feel comfortable enough making this WooCommerce customization, have the basic understanding of PHP and WooCommerce actions and filters.

So let’s get started creating your first Conditional Checkout Fields with Price for WooCommerce!

How to add conditional checkout fields in WooCommerce

As mentioned before, my example has some extra checkout fields options with prices. So let’s define and add our checkout fields.

We are now creating custom checkout fields for extra attendees and for extra options with price. This piece of code creates a number of attendees based on the number of products in the cart. If the number of products in cart is not equal to 0, line 17 will echo how many tickets you have.

How to add conditional checkout fields with price in WooCommerce

This is how our fields are displayed on WooCommerce checkout

Note that the price of the extra fields is not defined in this snippet. These are only the labels displayed at the frontend.

You probably wonder why I didn’t just add a checkbox with extra options for each attendee – That was actually my first idea, but we can update cart on checkout based on checkbox value…but I have more than 1 checkbox with the same name and the same value (!).
PHP on the backend cannot process many fields with the same name as many fields. So if you check one checkbox, an extra fee is added. But if you check 2 checkboxes with the same name, eg. extra pdf, your cart fee is not updated. So I decided to go with numeric fields where user enters a number in the numeric field and on the backed we multiply number by the fee and get the cart updated.

conditional woocommerce checkout fields 2

Updated cart



This is how we calculate the fees. Pay attention on line 15, 21 and 27



This is the place where you set the actual fees for extra options and Woocommerce Cart calculations. Basically, change the number to your own price and don’t forget to update it as well on the labels in the first snippet!

If you need to change the wording on the “Your order” for the newly added items, you can change it on the lines 16, 22, 28.

Now we are going to count how many attendees do we have and add error notices if the attendee fields are left blank.

conditional woocommerce checkout fields 3

Alert on empty checkout fields



The next part for having your conditional checkout fields for WooCommerce complete, we need to add our entered values to the WooCommerce Order meta. This will display your conditional checkout fields on the backend inside your WooCommerce orders section.

conditional woocommerce checkout fields orders

This is how it looks inside the WooCommerce orders panel.



Now we will display field values on the order edit page just below “Item” section on edit order screen.

 

The last part is adding the field values to the emails. The fields are being added both to customer email and admin email. But note that in my example, I didn’t have a request to add the fields to the WooCommerce Ticket email as the client thought it’s enough to be shown on a email receipt.

That’s it! You have created your conditional checkout fields with pricing options in WooCommerce!

But there are still a few more things to do. I mentioned before that you’ll need to edit a couple of more files. Now it’s time to create a new folder inside your themes root and call it “js”. You will need a FTP access to your server for this or cPanel with file manager.

What you need to do is create a new file named numeric.js inside your js folder and paste the code below. This piece of javascript allows only valid characters to be entered into input boxes.

I have also appended this javascript file a bit. I mentioned before that I’ve placed a checkbox where buyer can select whether he is also attending event, and if checked, the Fields for the first attendee will be auto populated by the values from the billing section.

This is done by lines 11 – 18. You will need to run Chrome developer tools on your input fields and find the corresponding field value. In my case, values are as shown below.

Finally, add the script somewhere before closing your body tag </body>. Check if the script is being loaded with your Chrome developer tools.

We also need to add a small function inside your functions.php, I’ve placed it on the very top of my functions.php file.

Autofill in action



I’m actually better in doing than explaining, but I truly hope that this tutorial will be useful to someone, with slight code modifications.

If you want to learn how to remove billing fields in Woocommerce, follow this article.

Thank you for reading my post on How to add conditional checkout fields with price in WooCommerce 3.0! Please comment and make suggestions on how to improve the code below!

Support New Articles with a Sweet Tee

One comment on “How to add conditional checkout fields with price in WooCommerce 3.0

  • Nick
    May 6, 2017 | 8:44 am

    Thank you! Great tutorial. I’m working on a very similar thing but I got stuck on updating the cart part. I used your code and modified it and it finally works!

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

*

*