1. Documentation /
  2. Age Verification Popup

Age Verification Popup

Add age verification popup to your store and validate customers’ age to meet legal requirements.

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.
More information at Install and Activate Plugins/Extensions.

Setup and Configuration

↑ Back to top
As soon as the plugin has been installed, you can view the plugin in WordPress Admin Panel > WooCommerce > Age Restriction Settings. To customize plugin settings, click on Age Restriction Settings.

General Settings:

↑ Back to top
This area allows you to manage the general settings of the plugin.

Minimum Age

↑ Back to top
Use this text field to enter a minimum visitor age limit. Consider this a mandatory field to activate the age verification popup. Leaving this field blank will cause the popup to remain disabled.

Remember Visitor & Duration

↑ Back to top
To remember each visitor, place a check in this box. If you checked this option, you will be shown a field. Use it to set a number of days that you want to remember the visitor.

Show Minimum Age on Popup

↑ Back to top
Click here to allow your users to see the minimum age limit mentioned on the popup.

Redirect – After Cancel

↑ Back to top
If the user is under the defined minimum age limit, you can redirect them to a relevant page or link. With these settings associate a link or page to the Cancel button. Using the radio buttons select whether to redirect to a page on your site or any external link.
  • If you choose ‘Select Page’: define the page to redirect your user to using the dropdown below it. The options will include a list of all of your current pages.
  • If you choose ‘Redirect to an External Link: define the external link to redirect your user to using the text field below it.

When & Where to Display Popup:

↑ Back to top
Using the restriction settings tab to display popup on all or specific products, categories and pages.

Disable Popup for Logged-in Users

↑ Back to top
Place a check in this checkbox and the plugin will not show the age verification popup to users that are logged in.

Select Products, Posts & Pages To Show Popup

↑ Back to top
This option will help you establish which areas are restricted from underage users.
  • If you select ‘Whole Website’: it will restrict the access to your entire website.
  • If you select ‘Partial Items’: it will hide selected products from underage visitors. Selecting this option will reveal other relevant settings below it.
Choose any pages to restrict access of by placing a check in its box. The plugin will automatically remove your specified redirect page from the list. Product Display Settings Define which products should show the popup. There are two options to choose from.
  • All Products: Select this option to show a popup on all products
  • Specific Products: Select this option to show a popup only on specific products. If you agree to this option you will be shown three additional text fields.
  1. Specific Products: Using predictive text, type in three characters to enter one or more product titles to show the popup on
  2. Products Categories: Use the drop down to select one or multiple categories to place the popup on each product within that category.
  3. Product Tags: Use this text field to show a popup on all products associated to your defined product tags
Post Display Settings Define which products should show the popup. There are two options to choose from.
  • All Posts: Select this option to show a popup on all posts
  • Specific Products: Select this option to show a popup only on specific posts. If you agree to this option you will be shown three additional text fields.
  1. Specific Posts: Using predictive text, type in three characters to enter one or more posts titles to show the popup on
  2. Post Categories: Use the drop down to select one or multiple categories to place the popup on each product within that category.
  3. Post Tags: Use this text field to show a popup on all categories associated to your defined post tags
Post Type Settings Select post types from a drop-down which you would like to restrict.

Popup Customization Settings:

↑ Back to top
Use these settings to customize your popup. There are two types of settings, default settings and custom settings. Default Settings If you select the default settings radio button, you can customize the following settings. Date Input Type In this dropdown select any one of the following four options.
  • Enter DOB: This option requires your user to select their DOB from a calendar on the popup
  • Enter Age: This option requires your user to manually enter their age into a text field on the pop up
  • Confirm Age: This option requires your user to click on the “I Am Over (your defined Minimum Age)” Button located in the popup
  • Check Box: This option requires your user to place a check in the “I am Above Required Age” checkbox
Background Image You can apply an image to the popup background from the either the upload files or media library option of the gallery. Choose Template Use these options to set where the popup should be located on a page.
  • Center Popup: will place a square popup in the middle of the page
  • Bottom Popup: will place the popup at the bottom of the page in a banner-like format

Customizing Popup Template

↑ Back to top
If you select the custom settings radio button, you can customize all of the above settings in addition to the following settings.
  • Popup Background Color: Set the background color of the popup by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Popup Background Opacity: Use the bar to define the opacity of the background.
  • Popup Top Border Height: The bar will help you define a customized top border height. It ranges to support a maximum of 72px.
  • Popup Heading Size: Set the font size with this bar to a maximum of 72px.
  • Popup Font Size: Set the font size to apply to all text within the popup (excluding the heading) to a maximum of 72px.
  • Popup Heading Text: The text entered here will apply as the title of the popup.
  • Popup Text Content: This text will be added to the popup as a description under the heading.
  • Popup Text Age Content: This textbox allows you to create a personal way of inquiring the user’s age.
  • Popup Text for Input: Enter the text that should show before the field where the user will input their age.
  • Submit Button Text: Enter the text you would like to show on the submit button.
  • Cancel Button Text: Enter the text you would like to show on the cancel button.
  • Underage Message: This text will be shown to a user that is under your specified age limit.
  • Popup Top Border Color: Set the color of the popup’s top border by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Popup Heading Color: Define the color of the popup’s heading by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Popup Text Color: Choose the color of the popup’s text by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Submit Button Color: Set the color of the submit button by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Cancel Button Color: Define the color of the cancel button by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Submit Button Hover Color: Choose the color submit button should be if the user is hovering over the button by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
  • Cancel Button Hover Color: Set the color submit button should be if the user is hovering over the button by picking a color from the dropdown color spectrum. If a precise color is required, you can also enter the color’s RGB, Hex or HSL code.
Save Changes each time an alteration is made to save and apply the change to the frontend.