November 21, 2017 Jonny
Follow me on Twitter

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’s a child theme in place and you’re happy editing code.
  2. Using WooCommerce Checkout Add-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 we’re 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.

Screenshot of wordpress dashboard

Plugins > Add New

Step 2.

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

Plugins > Add New

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’.

Add new field group

Step 4.

Click on the ‘+ Add Field’ button.

Edit field group

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 our 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.

Location

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.

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →