WordPress - Design - How can I change the flags of the language button (using my own image)?

In this article, you will find how to replace the flag in the Weglot button by your own image.

You can use your own flag image on Weglot switcher. You'll need the URL of the image to use it on your website.

1. Inspect the element on your browser

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:

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 flag you would like to edit (here it is the rule that includes 'pt' for the Portuguese flag):

The copied code should be:

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

2. Add the CSS code to customize the language flag

Go to your WordPress admin > Weglot plugin, in the 'Override CSS' field, paste the code and replace the CSS property by a background-image and replace the URL by the actual URL of your own image. Also, add '!important' at the end of the rule so that it overrides the other CSS rules:

.wg-li.flag-1.pt a:before {     
    background-image: url(https://portuguese-flag.com/my-image.jpg)!important; 

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

Still need help? Contact Us Contact Us