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

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

Follow this 2 steps guide to change the flags of the language button using your own image:

1. Find the CSS flag selector code

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

2. Paste the CSS selector code and the flag URL 

Go to Weglot Settings in your website admin, under the section "Override CSS". Once you find it, paste the CSS selector code you just found. 

In my example, I have to paste :

.wg-li.nl a:before {
     background-image: url(https://my_picture_of_Dutch_flag.png)!important;
  • Don't forget to change .nl by .fr or .en in the CSS selector if you want to change another flag (e.g. French or English flag instead of Dutch flag here). You can find all the 2-letter language codes here,
  • Paste the URL of your image between the brackets of "URL",
  • If you want to change the shape of your flag, replace the previous URL by the URL of your new image.

Save and refresh your website.

Still need help? Contact Us Contact Us