How to Integrate Country Switcher to Your Ecommerce Store

If you operate in multiple countries, it is important to display appropriate content to audiences in different regions. That is where the website Country Switcher feature comes in. 

With the Country Switcher option, you can reroute customers based on their location to a specific website. This way they can view the prices in their local currencies, see products available in their region, and read content in their regional language. 

If you wish to add the Country Switcher functionality to your store, here are some methods to do so. 

Integrating a Country Switcher to E-stores – 2 Methods

Below are two easy methods to add a country switcher feature to your store. We have added one that requires coding and one that does not so that you can choose the method most suitable for you: 

1. Country Based Website Switcher For WooCommerce by koalaApps
2. Country Based Website Switcher For WooCommerce programmatically

Now, we will explain both methods in detail. 

Method #1: Gift Wrap option for Woocommerce By koalaApps

You can opt for the Country-Based Switcher plugin, which lets you add the country-switching functionality to your site without any coding. Below are the steps to get started:

Installation

• To install this plugin, search the .zip file from your WooCommerce account and begin downloading.
• Go to the WordPress Admin Panel. Select Plugins, choose Add New, and then choose the file to Upload Plugin.
• Select Install Now and then click Activate.

With the above steps, the WooCommerce Country-Based Website Switcher plugin will be installed and ready to use. You can follow the settings below to add a country-based switcher feature customized to your store. 

Setup and Configuration

In the WordPress Admin dashboard, you will see a Country Selector option under WordPress Admin > WooCommerce. From here, you can view the following settings:

1. Adjust Popup & Cookie Settings 

Access the General Settings tab of the Country Based Website Switcher plugin and customize the following options as needed:

• Enable the switcher popup
• Use a shortcode to place the switch button anywhere: {country_name}
• Add an icon to display with the switcher button
• Adjust the cookie lifetime
• Add a URL for redirection after the user clicks the popup
• Opt to exclude redirection for logged-in users

2. Display Continents & Countries

From the Continents option, you can enable continents to showcase countries from the same continent in the Countries tab. For example, if your website is tailored for the European region, you can choose to enable only European countries in the “Country” tab.

Once a user visits your website, the extension will either redirect them or show a popup to guide them to their country-specific site. You can add URLs for different countries to redirect users based on their location.

3. Fully Customize the Popups 

With the WooCommerce Country Based Website Switcher plugin, you can fully customize the country switcher popup using the following settings:

• Hide the popup from logged-in users
• Select the desired layout for the popup
• Choose the position of the popup window from the pull-down tab
• Enable header text and enter a custom title
• Customize the popup text shown before and after the country name
• Use the keyword {country_name} to display the user’s country name
• Enable the country flag
• Customize the redirect notice text
• Insert a custom label for the Visit Shop button 
• Add custom redirect text and show the redirect time
• Customize the cancel and go-to buttons

4. Create a Country Listing Page 

With the Country-Based Website Switcher, your websites developed for different countries can be shown as you like, with the following features:

• Use a shortcode to display the country list on any page
• Customize the view of the Continent Selector
• Enable continent map images on the page
• Add custom continent maps by copying the image URL
• Enable country maps to be displayed with the country name

5. Adjust the Styling of the Popups

The Styling tab lets you customize the default popup & the redirect popup colors along with other visual features:

• Choose the default popup background and overlay color
• Set background color opacity
• Set the close button color
• Set the popup button text color
• Set the color of the text on the switch button
• Set redirect popup background color
• Set the “Visit Shop” text color
• Set the “Visit Shop” text background color
• Add redirect text, and choose text and background color

Method #2: Gift Wrap option for Woocommerce (programmatically)

If you dont want to use a plugin, you can use the code provided below. Simply add the code in the functions.php file of your active or your child theme, and the website switching feature will be added to your website. 

  <?php
add_action('wp_footer', function () { ?>

    <script>
        jQuery(document).ready(function($) {

            // .country on click
            $('.region').click(function(event) {

                // prevent default behaviour
                event.preventDefault();

                // retrieve country code
                var countryCode = $(this).data('region');

                // retrieve current location pathname
                var currentPath = window.location.pathname;

                // append currency argument to pathname
                var newPath = currentPath + '/?region=' + countryCode;

                // use location replace to redirect page with correctly appended currency as argument
                window.location.replace(newPath);

            });
        });
    </script>

<?php }); ?>

//countries dropdown menu

global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');
    echo '<div id="my_custom_countries_field"><h2>' . __('Countries') . '</h2>';

    woocommerce_form_field('my_country_field', array(
    'type'       => 'select',
    'class'      => array( 'chzn-drop' ),
    'label'      => __('Select a country'),
    'placeholder'    => __('Enter something'),
    'options'    => $countries
    )
    );
    echo '</div>';

Conclusion

In this article, we explored two methods to help store admins switch countries based on customers’ locations. We explained how a plugin like the Country-Based Website Switcher can add functionality without any coding. 

We also explained how one could use a code to add the country-switching feature to their ecommerce stores quickly. With the feature, you can offer your users a convenient shopping experience tailored to their needs. 

If you like this blog, you should consider more content on online businesses, web development, and plugins on Koala Apps.