Geo-Specific Visibility In Oxygen Builder

By James LePage
 on January 20, 2022
Last modified on April 9th, 2022

Geo-Specific Visibility In Oxygen Builder

By James LePage
 on January 20, 2022
Last modified on April 9th, 2022

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 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 visitors culture/country)
  • Showing the users 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 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.


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.


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.

Frontend demo if I was from the UK. US specific content is simply not included in the page.

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.


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.

<div class="geoip geoip-show-DE"> This text is shown only in Germany </div> <div class="geoip-hide geoip-hide-DE"> This text is hidden only in Germany </div>

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.

Assuming you've added the CSS styles in the first code block to the site, this element would be hidden using display:none if the country was 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;}


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


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  */ 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 (review here).

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.


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.


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

Github Guidance

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

Hey, I want to hide a page for the USA users. How can i do that with this plugin?

Article By
James LePage
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram