How to Implement Age Verification to WooCommerce Store

Have you ever wondered how online businesses ensure that minors are not purchasing age-restricted products? 

For WooCommerce-powered websites, it’s essential to integrate a reliable age verification system into your store to meet legal requirements and safeguard minors. In this article, we’ll guide you through the step-by-step process of implementing age restrictions in your WooCommerce store using various methods. 

Implement Age Verification to WooCommerce Store – Methods

You can implement age verification for WooCommerce using two methods which are discussed in detail below:

1. WooCommerce Age Verification Popup by KoalaApps
2. Adding Age Verification for WooCommerce Programmatically

Method #1: WooCommerce Age Verification Popup by KoalaApps

WooCommerce Age Verification Popup by KoalaApps verifies the customer’s age before allowing them to proceed with their purchase. Using this plugin, you can display an age verification popup to the entire website or specific products, categories, carts, checkouts, and other pages. This plugin shows a custom attractive popup for age verification to ensure that only customers who meet the legal age requirements can make purchases.

Installation

To install the WooCommerce Age Verification Popup plugin, follow these steps:

• To install this plugin, search the .zip file from your WooCommerce account and begin downloading.
• Go to the WordPress Admin Panel. Select Plugins, choose Add New, and then choose the file to Upload Plugin.
• Select Install Now and then click Activate.

Setup and Configuration

Once the plugin is installed, you can configure it by navigating to WordPress Admin Panel > WooCommerce > Age Restriction Settings. Click on Age Restriction Settings to customize the plugin settings according to your preferences.

Configure General Settings to Add Age Verification

Configure the general settings tab to clearly define the age verification process and redirect users if they do not meet the age requirement.

Minimum Age: Enter the minimum age required for visitors to access your site in this text field. This is a mandatory field to enable the age verification popup. If this field is left blank, the age verification popup will remain disabled.

Remember Visitor: Check this box to remember each visitor who has verified their age.

• Duration: If the “Remember Visitor” option is checked, you will see an additional field to specify the number of days to remember the visitor.

Show Minimum Age on Popup: Check this box to display the minimum age limit on the age verification popup.

Redirect After Cancel: If a user is under the defined minimum age limit, you can redirect them to a relevant page or external link. Configure the settings for the Cancel button using the following options:

• Select Page: Use the dropdown to select a page from your site to redirect the user to. The dropdown will list all of your current pages.
• Redirect to an External Link: Enter the URL of the external link in the provided text field to redirect the user.

Apply Restrictions to Age Verification

Navigate to the Restrictions tab. Here, you can customize the display and application of age verification popups across your WooCommerce store and ensure that underage visitors are appropriately restricted from accessing certain content.

Restrict Age Verification to Logged-in Users

Disable Popup for Logged-in Users: Check this box to prevent the age verification popup from displaying to users who are logged in.

Restrict Whole Website

• Whole Website: Select this option to restrict access to your entire website for underage visitors.
• Partial Items: Select this option to hide specific products, categories, or pages from underage visitors. 

Select Pages to Show Popup

Select Pages to Show Popup: Choose specific pages to restrict by checking the corresponding boxes. The plugin will automatically exclude the specified redirect page from this list.

Show Popup for Products

• All Products: Select this option to show the age verification popup on all products.
• Specific Products: Select this option to show the popup only on specific products. When this option is selected, the following additional fields will appear:
  • Specific Products: Type at least three characters to search for and select specific product titles to display the popup.
  • Product Categories: Use the dropdown to select one or more categories to display the popup on all products within those categories.
  • Product Tags: Enter product tags to show the popup on all products associated with those tags.

Post Display Settings

• All Posts: Select this option to show the age verification popup on all posts.
• Specific Posts: Select this option to show the popup only on specific posts. When this option is selected, the following additional fields will appear:
  • Specific Posts: Type at least three characters to search for and select specific post titles to display the popup.
  • Post Categories: Use the dropdown to select one or more categories to display the popup on all posts within those categories.
  • Post Tags: Enter post tags to show the popup on all posts associated with those tags.

Post Type Settings

List of Post Types: Select post types from a dropdown list that you would like to restrict with the age verification popup.

Personalize Age Verification Popup

Use the following settings to customize your age verification popup. There are two types of settings available: 

• Default Settings
• Custom Settings 

Default Settings

If you choose the default settings option, you can customize the following:

Date Input Type: Select one of the following four options from the dropdown menu:

• Enter DOB: Requires the user to select their date of birth from a calendar on the popup.
• Enter Age: Requires the user to manually enter their age into a text field on the popup.
• Confirm Age: Requires the user to click on the “I Am Over (your defined Minimum Age)” button on the popup.
• Check Box: Requires the user to check the “I am Above Required Age” checkbox

Background Image

You can set a background image for the popup using the following options:

• Upload Files: Upload an image from your computer.
• Media Library: Select an image from your WordPress media library.

Choose the Popup Template

Choose Template

Decide where the popup should be located on the page:

• Center Popup: Places a square popup in the center of the page.
• Bottom Popup: Places the popup at the bottom of the page in a banner-like format.

Set Custom Settings for the Popup 

If you select the custom settings option, you can customize all of the above settings in addition to the following:

• Popup Background Color and Opacity
• Popup Top Border Height and Color 
• Popup Heading and Font Size
• Popup Heading Text and Color
• Popup Text Content and Color
• Popup Text Age Content
• Popup Text for Input
• Submit and Cancel Button Text
• Underage Message
• Submit and Cancel Button Color
• Submit and Cancel Button Hover Color

Method #2: Adding Age Verification for WooCommerce Programmatically

This method involves adding custom code to your WooCommerce store to implement age verification. 

Add the following code in functions.php file of your active or child theme to create new custom endpoints for your my account page.

function koala_age_verification() {
    ?>

    <p class="form-row form-row-first">
    <label for="reg_age_verification" class="woocommerce-form__label woocommerce-form__label-for-checkbox"><?php _e( 'age verification', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox" name="age_verification" id="reg_age_verification" value="<?php if ( ! empty( $_POST['age_verification'] ) ) esc_attr_e( $_POST['age_verification'] ); ?>" />
    </p>

    <div class="clear"></div>

    <?php
}
  // to validate the form
function validate_age_verification( $errors, $username, $email ) {
    if ( isset( $_POST['age_verification'] ) && empty( $_POST['age_verification'] ) ) {
        $errors->add( 'age_verification_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );
    }
    return $errors;
}

 // to save the form into user meta age_verification
function age_verification_save( $customer_id ) {
    if ( isset( $_POST['age_verification'] ) ) {
        update_user_meta( $customer_id, 'age_verification', sanitize_text_field( $_POST['age_verification'] ) );
   }
}

add_action( 'woocommerce_register_form', 'koala_age_verification' );
add_filter( 'woocommerce_registration_errors', 'validate_age_verification', 10, 3 );
add_action( 'woocommerce_created_customer', 'age_verification_save' );

Final Thoughts

By following the steps outlined in this article, you can effectively implement an age verification system in your store using the plugin or a code. This not only helps you comply with legal obligations but also protects minors from accessing age-restricted products.