Show row or module based on visitor country location in Beaver Builder

Do you want to display content in Beaver Builder layout based on visitor country (code) location? Beaver Themer addon provides a lot of conditional options but such location-based targeting is not available by default. However, this can be implemented via Conditional Logic API. To implement this, we shall build conditional logic “User Country Code”.

Preview: User Country Code conditional

User Country Code Logic

User Country Code Logic

First: Create Rules.php File

First, we will create a file called rules.php and upload into the child theme folder. Add the following code and upload it at the correct location (see screenshot below).

File Location

Rules file location

We are using Beaver Builder Theme in this example. Ideally, this tutorial should work in any theme that is compatible with the Beaver Builder plugin.

Second: Front-end Rule Registration

Now we need to create rules.js file. To get started, created js folder inside the child theme folder (see screenshot above for the reference).  Now add the following code in rules.js file and place it inside the js folder.

Add a new rule type in rules.js file using the BBLogic.api.addRuleType function. Our rule matches with the visitor country code. We are using the 4 operators: equals, does not equal, includes and does not include. When you select equals or does not equal operator, you will enter a single value like UK. You will enter multiple country codes like FR,NL,PL with a comma when you select the includes or does not include operator.

Now, all files are ready and we shall set them for execution. Open the functions.php file of your theme and add the following code at the end.

Now you should see the User Country Code logic under the User category. Follow this:

  1. Open the Settings by clicking on the wrench icon of row/column/module.
  2. Click on the Advanced Tab.
  3. Go to the Visibility section.
  4. Select Conditional Logic from the Display drop-down.
  5. Click on Open Conditional Logic Settings button.
  6. Set the logic as per your requirement and click on Save button.

Conditional Logic

User Country Code Logic

User Country Code Logic

Share this Tutorial

Leave a Comment