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 flag options

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 Weglot for a flag not available in 1.

On your web browser, make a right click on the flag then select 'Inspect Element'. The inspector should show up with a focus on the flag element in the code.

In the case of this example, let's say the Brazilian flag has to be changed to the Portuguese flag:

Open the <a> element with the array on the left, there should be a pseudo-element 'before'. Select it:

Copy the full CSS rule that is displayed on the right, regarding the background-position property:

In the case of this example for the Brazilian flag, the code copied is:

.wg-li.flag-1.pt a:before {     
    background-position: -993px 0; 
}

Paste this code in your WordPress admin > Weglot plugin 'Override CSS' field:

Now, depending on the type of flag chosen on your website and the flag you would like to apply, you'll need to replace the number of pixels by one of the following:

Rectangle Mat Flags:

Flag Number of px
Germany -2490
Brazil -6630
Hong Kong -3600
Mexico -4320
Portugal -1740
UK -1920
US -3570

Rectangle Shiny Flags: 

Flag Number of px
Canadian -1281
Portuguese -5921
UK -7777
US -7841

Circular Flags:

Flag Number of px
Canadian -4224
Hebrew -1608
Mozambique -288
UK -2520
US -2712

If you would like to select a flag that is not in these above tables, you can contact our support team for help!

In the case of the Brazilian flag, the type of flag is 'Rectangle Shiny' on the test website:

So the number of pixels for the Portuguese flag with the 'Rectangle Bright' is -5921. You'll also need to add '!important' so that the custom rule would override the other CSS rules. The CSS code to apply is so:

.wg-li.flag-1.pt a:before {     
    background-position: -5921px 0!important; 
}

After the changes are made, click on 'Save Changes':

Still need help? Contact Us Contact Us