This post is about how to hack the WooCommerce “Store Notice” to display based on a visitor’s IP address.  For this hack we will need to use the GeoIP Detection plugin and some CSS, that’s it!

Use Case – WooCommerce Multisite

The use case where we are utilizing this hack happens to be for a WordPress multisite setup, where the sites are identical however they serve different geographies due to having physical inventory for each region they are serving.  The “.com” website serves the US customers, where as the “.com/au” serves Australia (AU) and the rest of the world sales.

In this case, we have two scenarios where we want to display the “Store Notification” bar:

Scenario 1:  Visitor outside of the US (i.e. has non-US IP address), lands on the US site so we want to inform them that there is an International site where they can order from instead of the US site they are currently on.

Scenario 2: Visitor from the US  (i.e. has US IP address), lands on the AU site so we want to inform them that there is a US dedicated site where they can order from instead of the AU site they are currently on.

Plugin Problem

The issue is there is no plugin that exists that includes the above functionality, so what to do?  One option is to develop a plugin obviously, but this would take much longer than the hack we will discuss today.  In the end I figured out a way to use the geoIP detection plugin and some CSS to make it all work.

WooCommerce GeoIP and Store Notification Solution

Scenario 1 – Step 1

Let’s start by enabling the WooCommerce Store Notification on the US site, in the “WooCommerce->Settings->General” tab.  In this notice we will inform non-US visitors that there is an international store (AU site) where they can order products and link them to the site:

 

 

 

As it is now, the store notice will display for everyone visiting the US site.  What we want to do is hide it for visitors with US IP address since they are already on the US site.

Scenario 1 – Step 2

Now let’s setup the GeoIP Detection plugin so that we can detect which country visitors are coming from based on their IP.  After installing and activating the plugin we will need to download the Maxmind database to our server under “Tools->GeoIP Lookup”:

 

Click the “Options” link to setup the GeoIP database:

 

Select the data source as “Automatic download & update of Maxmind GeoIP Lite City” and click the “Update” button.  This should download the GeoIP database, you can verify this by going back to the original screen and clicking the “Lookup” button:

 

The results will yield a table, ensure the “Values” column has the correct for your IP.

Scenario 1 – Step 3

This is the interesting bit which saves us time and effort.  In the “Options” of the GeoIP Detection plugin, you can select to add CSS class to the body of each page which indicate which country each visitor is from (e.g. “geoip-country-US” or “geoip-country-AU” etc.):

 

Now we can use CSS to hide the notification for US IPs, since they are already on the US site.

Scenario 1 – Step 4

Now we need to add CSS specific to the US site which means it should be saved in the theme options (i.e. site specific database) as opposed to the “style.css” which is shared for all sites in the multisite network.

Here is the CSS code we need to add to style and hide the store notice:

p.demo_store {background-color: #dc477d;}
.geoip-country-US p.demo_store {display: none;}
.geoip-country-US #wrapper[style] { margin-top: 0px !important; } 

The first line of CSS simply styles the background of the store notification to whatever color that best matches your theme and stands out to get the visitor’s attention.

The second line of CSS hides the store notice for users within the US, with the help of the geoIP class “geoip-country-US” discussed in step 3.

The third line of CSS is an interesting hack needed to override an inline CSS style.  It seems that there is a “wrapper” div that defines the top margin for the store notification in an inline style.  If we hide the store notification alone, it will still push down the whole site due to this top margin, so in order to remove this margin we need to override it using this CSS “hack”.  As you can see we are modifying the “[style]” of the div and adding “!important” to override it.  Test this for yourself by removing this line and then placing it back to see visually what is meant here.

With those three lines we have created a store notification bar that informs all non-US visitors that there is an International store where they can order from instead of the US store they are on.  Now onto scenario 2, where we will set up the store notification for the International store (AU site).

Scenario 2 – Step 1

In scenario 2, many of the steps will be similar with slight modifications.  In this step we also, enable the WooCommerce Store Notification on the AU site, in the “WooCommerce->Settings->General” tab.  In this notice we will inform US visitors that there is an US site where they can order products and link them to the site:

 

As it is now, the store notice will display for everyone visiting the AU site.  What we want to do is hide it for ALL visitors other than those with a US IP address since there is a US dedicated site.

Scenario 2 – Step 2 and 3

In this case these steps are exactly the same for the AU site, so review those before continuing.

Scenario 2 – Step 4

Here again is the interesting part of this solution.  We need to again remember to place the CSS in the theme options as opposed to “style.css” so it is only added to the AU site.

The CSS in this case is somewhat different as we are hiding the store notice for every IP other than US IPs:

p.demo_store {background-color: #dc477d;} 
p.demo_store {display: none;}
#wrapper[style] { margin-top: 0px !important; }
.geoip-country-US p.demo_store {display:block;}
.geoip-country-US #wrapper[style] { margin-top: 56px !important; }
@media screen and (max-width: 865px) { .geoip-country-US #wrapper[style] { margin-top: 92px !important; } }
@media screen and (max-width: 444px) { .geoip-country-US #wrapper[style] { margin-top: 128px !important; } }
@media screen and (max-width: 339px) { .geoip-country-US #wrapper[style] { margin-top: 164px !important; } }

Let’s skip the first line and talk about the second and third lines.  The CSS is pretty much the same as with scenario 1, except that we are hiding the store notice for all visitors.

In the next 5 CSS lines, we are showing the store notice to US visitors, because we want to redirect them to the US site.  To do this we must display the store notice (line 3) and restore the top margin as well (line 4).  Line 5, 6, 7 is added because on smaller devices the text wraps into more than one line and therefore the top margin needs to be larger for each new line.

Note: The “max-width” value will be specific to the text length placed in the store notice, so you might have to play around with that number to get it just right.

Conclusion

Keep in mind that this is a quick hack and is not the most elegant of solutions, but it does the trick.  The ideal situation would be to create a plugin that does all of the above on the server-side and has admin options to control what store notice is displayed to whom and when.  If you think such a plugin would be useful, then comment below and let me know what options you would include in such a plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *