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

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

/**
 * Register a callback function for processing the rule
 */
BB_Logic_Rules::register( array(
	'user-country-code' => 'wpd_user_country_code',
) );

//* Callback function
function wpd_user_country_code( $rule ) {
	//* getting local IP address
	$ip = $_SERVER['REMOTE_ADDR'];

	if (filter_var(@$_SERVER['HTTP_X_FORWARDED_FOR'], FILTER_VALIDATE_IP))
		$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];

	if (filter_var(@$_SERVER['HTTP_CLIENT_IP'], FILTER_VALIDATE_IP))
		$ip = $_SERVER['HTTP_CLIENT_IP'];
    
    //* getting local geolocation data as json type
	$json = file_get_contents('http://www.geoplugin.net/json.gp?ip=' . $ip );
    $data = json_decode($json);
	$countryCode = strtoupper( substr( $data->geoplugin_currencyCode, 0, 2) );

	if( $rule->operator == "includes" || $rule->operator == "does_not_include" ) {
    	$codes = $rule->compare;
    	$rule->compare = $countryCode;
		$countryCode = explode( ',', strtoupper( $codes ) );
	}
	
	return BB_Logic_Rules::evaluate_rule( array(
		'value' 	=> $countryCode,
		'operator' 	=> $rule->operator,
		'compare' 	=> strtoupper( $rule->compare ),
	) );
}

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.

var addRuleType = BBLogic.api.addRuleType
var __ = BBLogic.i18n.__

addRuleType( 'user-country-code', {
    label: __( 'User Country Code' ),
    category: 'user',
    form: {
        operator: {
            type: 'operator',
            operators: [
                'equals',
                'does_not_equal',
                'includes',
                'does_not_include'
            ],
        },
        compare: {
            type: 'text',
            defaultValue: 'US',
        },
    },
} )

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.

/**
 * Creates User Country Code Logic Field
 */
if ( class_exists( 'FLPageData' ) ) {
	add_action( 'bb_logic_enqueue_scripts', function() {
		wp_enqueue_script(
			'wpd-themer-logic-rules',
			get_stylesheet_directory_uri() . '/js/rules.js',
			array( 'bb-logic-core' ),
			'1.1',
			true
		);
	} );
	
	add_action( 'init', function() {
		require_once get_stylesheet_directory() . '/rules.php';
	} );
}

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.
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.