Geo-Specific Visibility In Oxygen Builder

In this article, we're going to take a look at how to add geo-specific or location-dependent visibility for content in Oxygen Builder (WordPress). We're going to be using one of the best plugins I've ever encountered: "Geolocation IP Detection", a free tool created by Yellowtree.

It allows you to choose from 1 of 5 data sources, provides a robust PHP and Shortcode function collection, works with caching, and is easy enough for anybody to use.

Use Cases

Once you understand a user's location, there are a couple of things that you can do with it. Location-specific visibility, redirects, and customization make the experience better, and the conversion rate higher. For us, we included this on a large WooCommerce site using Oxygen Builder, implementing the following features:

• Redirecting specific products or pages based on the physical location of the user
• Showing specific content on the homepage to visitors from a specific country (multiple variations of the homepage tailored to the visitor's culture/country)
• Showing the user's country flag, and allowing them to change their country preference if the IP location is incorrect (ie they're using a VPN)
• Better location data compared to the WooCommerce default Maxmind company as we implemented IPStack, a paid service
• Location-specific popups like the example below, but for free:

Once you understand the country or location that a visitors coming from on WordPress, there are a ton of usage scenarios.

The Plugin To Do It: Yellowtree

"Geolocation IP Detection" by Yellowtree is one of the best WordPress plugins I've ever used, and it's 100% free (but the developer asks that you donate to this charity as a "thank you"). It pulls country data in from the users IP address, and then gives you a collection of methods to conditionally display contact based on that country. You can also directly insert the country, town, country flag and more (we'll take a look at how to do that later in this article.

5 Data Sources

You can choose between any of the sources above to get the user information. Some are APIs, and some are actual files - the files will always be quicker as you're hosting them.

For all of our projects, we've used IPStack (paid) as it's constantly updated, the best precision, and pretty cheap even for big sites.

Great Options

You can easily add a country-specific CSS close to the body tag on every page. This way, you can specify using CSS visibility for specific items and elements based on the country's location.

You can automatically disable caching on a page that has an API call to Geo dependent functions but also enable Ajax to bust through any cache. If there's a reverse proxy, you can add it.

Implementation

All of the examples shown here are mentioned in the official GitHub. You have a few ways of incorporating the location data into your project. For Oxygen Builder, the Shortcodes and CSS options are best. PHP can be included in a code block, made into a custom condition, or built into functions.

The first step is installing and testing the tool. All you need to do is download the plugin - no setup is really needed to get it working on most Oxygen Builder sites. If you're using caching (you should be), consider enabling the AJAX features to bust through this.

Shortcodes

You can use shortcodes to insert content directly, or wrap Oxygen elements in a shortcode to conditionally include in the page depending on the user location.

These are all the shortcodes properties that you can use.

				
					[geoip_detect2 property="country"] -> Germany
[geoip_detect2 property="country" lang="de"] -> Deutschland
[geoip_detect2 property="country.isoCode"] -> de
[geoip_detect2 property="city"] -> Frankfurt/Main
[geoip_detect2 property="mostSpecificSubdivision"] -> Hesse
[geoip_detect2 property="mostSpecificSubdivision.isoCode"] -> HE
[geoip_detect2 property="location.longitude"] -> 9.202
[geoip_detect2 property="location.latitude"] -> 48.9296
[geoip_detect2 property="location.timeZone"] -> Europe/Berlin
[geoip_detect2 property="continent"] -> Europe
[geoip_detect2 property="continent.code"] -> EU
[geoip_detect2 property="invalid_or_empty_property_name" default="default value"] -> default value

				
			

There are also shortcodes to have the user manually choose the country -

				
					[geoip_detect2_countries name="mycountry" flag="true" tel="true"]

				
			

You can choose to store this data in the browser for use later.

Oxygen Shortcode Wrapper + Yellowtree = Conditional Visibility

While you can use the shortcodes to collect accurate country settings, allow the user to set this, and display things like town, country, and more, wrapping elements in Oxygen with special shortcodes is where you can seriously unlock the power of this plugin.

Say I want to show one section to somebody accessing my site from the US, and another section to my international customers. Make 2 sections, and place them in the shortcode wrapper. Then, add the following shortcodes to the elements:

				
					//For the domestic section SC wrapper
[geoip_detect2_show_if country="US"][/geoip_detect2_show_if]
//For the international section SC wrapper
[geoip_detect2_show_if not_country="US"][/geoip_detect2_show_if]
OR
[geoip_detect2_hide_if country="US"][/geoip_detect2_hide_if]
				
			

This will now show one section if the US is the country that the IP has identified, and the other if it's not a US visitor. You can wrap pretty much anything in shortcodes so this is an easy way to tailor content to your international visitors.

You can also specify by timezones or/and cities. You can also do AND and OR - so show a section to people from Germany AND Austria.

If you choose to add via Gutenberg or by using do_shortcode, you can unlock more powerful features that aren't supported by the Oxygen shortcode wrapper.

				
					[geoip_detect2_show_if city="Berlin"]You're in Berlin[else]You're not from Berlin[/geoip_detect2_show_if]

				
			

This could be an if/else for regular text, or wrap and output HTML elements.

CSS

By using the custom class added to the body of each page and CSS display: property, we can show and hide things easily. In the demo below, our visitor is accessing the site from the US.

Because of Oxygen's incredible class system, this is a really great option for quick show/hide based on location. Here's how the actual CSS works:

				
					.geoip { display: none !important; }
.geoip-country-UK .geoip-show-UK { display: block !important; }
.geoip-country-DE .geoip-show-DE { display: block !important; }
.geoip-hide { display: block !important; }
.geoip-country-UK .geoip-hide-UK { display: none !important; }
.geoip-country-DE .geoip-hide-DE { display: none !important; }
				
			

The above example would be added to your website by using a universal stylesheet or SCSS partials.

				
					
This text is shown only in Germany
This text is hidden only in Germany

				
			

The following classes would be added to elements in Oxygen. The first element would show only in Germany. The second would be hidden only in Germany.

Switching out the country codes will allow you to style for example, .geoip-country-UK {} will target the UK. To target the US, just change it to be .geoip-country-US {}

It's not just a visibility of the elements, but because this is CSS you can apply all different types of styles based on location. For example, you could make text green if somebody is coming from the UK like so:

.geoip-country-UK #element {color:green;}

PHP

The plugin gives 5 functions (which is what the shortcodes and css use on the backend):

geoip_detect2_get_info_from_ip
geoip_detect2_get_info_from_current_ip
geoip_detect2_get_reader
geoip_detect2_get_current_source_description
geoip_detect2_get_external_ip_adress
geoip_detect2_get_client_ip

There are a ton of things you can build using location data. An example from the Github is calculating the distance from your company to the user (which can in turn be used to show driving/walking time).

				
					<?php
/**
 * Calculates the great-circle distance between two points, with
 * the Haversine formula.
 * @param float $latitudeFrom Latitude of start point in [deg decimal]
 * @param float $longitudeFrom Longitude of start point in [deg decimal]
 * @param float $latitudeTo Latitude of target point in [deg decimal]
 * @param float $longitudeTo Longitude of target point in [deg decimal]
 * @param float $earthRadius Mean earth radius in [km]
 * @return float Distance between points in [km] (same as earthRadius)
 * @see https://stackoverflow.com/a/10054282
 */
function haversineGreatCircleDistance(
  $latitudeFrom, $longitudeFrom, $latitudeTo, $longitudeTo, $earthRadius = 6371)
{
  // convert from degrees to radians
  $latFrom = deg2rad($latitudeFrom);
  $lonFrom = deg2rad($longitudeFrom);
  $latTo = deg2rad($latitudeTo);
  $lonTo = deg2rad($longitudeTo);
  $latDelta = $latTo - $latFrom;
  $lonDelta = $lonTo - $lonFrom;
  $angle = 2 * asin(sqrt(pow(sin($latDelta / 2), 2) +
    cos($latFrom) * cos($latTo) * pow(sin($lonDelta / 2), 2)));
  return $angle * $earthRadius;
}
// Los Angeles
$location['lat'] = 37.6293;
$location['lon'] = -122.1163;
$myLocation = $location; // Change if default Location should be something else
$record = geoip_detect2_get_info_from_current_ip();
if ($record->location->longitude) {
  $myLocation['lon'] = $record->location->longitude;
  $myLocation['lat'] = $record->location->latitude;
}
$distance = haversineGreatCircleDistance($location['lat'], $location['lon'], $myLocation['lat'], $myLocation['lon']); // Returns distance in km. If you need a different unit, change the $earthRadius
				
			

The cool thing about this tool is the with the functions it offers and a basic understanding of PHP, you can incorporate pretty much anything regarding/using location into a WordPress site. This code would be installed to our site using Scripts Organizer.

With the PHP functions offered, building native Oxygen conditions should be pretty easy. This way you can use conditions on any element, and not need to use the somewhat limited shortcode wrapper.

Testing

The only way to accurately test this is to use a VPN to "spoof" your location, or a testing tool like LambdaTest. We use NordVPN for all of this testing. It's cheap and well built.

Note that this plugin has a cache for location data which may interfere with testing if you don't clear it.

Conclusion

With almost everything discussed, assume that it is not GDPR-compliant.

However, there is guidance on Github, so you may be able to make it work.

Hopefully this was a helpful article that showed you a couple of ways that you can show location specific information on Oxygen Builder. This uses either shortcodes or CSS and the Geolocation IP Detection plugin. This shouldn't be used to build a multilingual website, but it's an incredible way to tailor content to countries - such as showing the right pricing and currency, showing popups saying "we see you're from {country}" and more.