WordPress - Design - How can I change the flags of the language button?

In this article, you'll find how to change the flags of the Weglot button on your website.

1. Using Weglot plugin setup in your website admin

Go to your WordPress Dashboard > Weglot plugin > Type of flags:

Click on "Change country flags":

You can now choose the flag you want to replace.

2. Using one of Weglot's image for a flag not available in 1.

Go to your website, right click on the flag you want to modify and click on "Inspect Element". You should see this:

Copy the URL of the image here:

Enter the URL in your browser, you should see this:

Right-click on the image and select "Save as". Then, save the image in your folder. Open your folder again, right click on the file and select "Open with Paint" (or Mac OS equivalent), you should see this:

Locate the flag you want to display (e.g. the Belgian flag) and place your cursor on the left of the flag (see red line). Then, at the bottom left, you should see the number in pixels of the position of the flag within the image. Copy this number (3672px here).

Here the number is 3672px. Divide it by 2 and multiply by (-1). Then, go to Weglot Settings in your website admin, under the Override CSS and paste this:

.wg-li.flag-3.nl a:before {       	
background-position: -1836px!important;  
}

Don't forget to change .nl by .fr or .en in the CSS selector if you want to modify another flag (e.g. French or English flag instead of Dutch flag here). You can find all the 2-letter language code here.

Click on "Save" and refresh your website.

Still need help? Contact Us Contact Us