How to add a custom checkbox to your WooCommerce checkout page for free

UPDATE AUGUST 2018:
ACF For Woocommerce has been discontinued - This tutorial no longer works. Look out fot a new tutorial soon.

____________________

Recently I needed to add an age verification checkbox to a client’s website checkout page. The website uses WooCommerce, and there are a few options out there to achieve this.

1. Code it yourself. This is fine if there is a child theme in place and you're happy editing code
2. Using WooCommerce Checkout Ad-Ons. Again, fine if you want to pay the $49 for the plugin/ (We had no budget left, otherwise may have used this instead) https://woocommerce.com/products/woocommerce-checkout-add-ons/
3. Use Advanced Custom Fields and ACF for WooCommerce to achieve the same result for free.

Important: This article assumes you have WooCommerce already running.

So we’re gonna look at number 3. As I mentioned, we were out of budget but wanted to make sure we could implement this requirement. Here’s how to set it up.

Step 1.

Install and activate Advanced Custom Fields.

I won’t go into the depths of ACF, and how it’s quite frankly awesome. That’s for another post. If you get time, click on the link above and take a look around.

Step 2.

Install and activate ACF for Woocommerce. This little bad-boy ties up WooCommerce and ACF neatly for you.

Step 3.

Jump over to the ACF settings page (Custom Fields, in the left-hand column of your WP dashboard), and click add new field group. Give your custom field a title. I went with ‘I confirm I am over 18 years old’.

Step 4.

Click on the ‘+ Add Field’ button.

Now you’ll need to fill in the required fields.

Field label will appear on the front-end so make sure you name this as you want your customers to see it!

Set your field type to ‘Checkbox’ and give your field a name too. I went with ‘check_box’.

Fill out your field instructions, again your users will see this so let them know what they’re agreeing or disagreeing to.

Required? Yes or No.

Choices: Assuming like I, you only want your user to select yes, or select no, you’ll need to specify a value and a label, for example: ‘yes : I confirm I am over 18 years old.’

Location: You can set up rules to determine when to show the field group. I went with the settings below ‘Show this field group if checkout is equal to Review order before submit’. The idea being users have to check this box before placing an order.

Step 5.

Publish.

That’s all folks. Now when a user is about to place an order, they’ll have to confirm that they are over 18 before they do.