How to translate an external link?

In this article, you will find how to translate an external link.

When you need to translate an external link to redirect your visitors to different website (depending on their languages), you could have the reflex to make some changes from the Translations List. 
But you can't proceed this way

To translate an external link, you'll have to follow these steps.

  1. Create two different elements. By creating two different elements in your original website, you'll be able to define two different links. The first one will follow the second one. However, the two elements will never be displayed at the same time. For instancetwo icons (one linked to an English URL and the other linked to a Spanish URL).
  2. Then, you'll have to add specific selector for each elements. For example: .link-en for the icon linked to the English URL and .link-es for the icon linked to the Spanish URL.
  3. After that you'll have to use CSS rules to hide the element that doesn't match with the current language.

To do the last step, go to your  WP Dashboard > Weglot > Override CSS and enter this code:

html[lang="es"] .link-en {
    display: none!important;
}
html[lang="en"] .link-es {
    display: none!important;
}

!! Don't forget to replace the right languages and the right classes in the code below.
Also, make sure the 'en' and 'es' abbreviation are the one you're really use.

Still need help? Contact Us Contact Us