Tutoriel complet pour traduire son site e-commerce WordPress avec WPML

Dans ce tutoriel détaillé, nous verrons comment traduire son site e-commerce en utilisant l’extension WPML (WordPress Multilingual). Cette extension multilingue créée en 2007 est activement installée sur plus de 850 000 sites WordPress, c’est donc la plus populaire et la plus utilisée à ce jour.

Afin d’aboutir à un article bien approfondi, je vais aussi utiliser un constructeur de page (Elementor), une extension essentielle pour un site e-commerce (WooCommerce) et le thème “Astra”. Toutes ces extensions sont gratuites et sont disponibles depuis le repo WordPress.

Deux choses qui me paraissent essentielles avant de commencer le tutoriel:

1. Je vous invite à lire en parallèle cet article récent qui explique en détail tout ce qu’il faut savoir avant de se lancer dans la construction d’un site multilingue.
2. J’ai travaillé chez WPML de 2016 à Janvier 2020, mais je ne suis plus affiliée à eux. Le but de cet article n’est pas de faire leur promo, mais plutôt d’expliquer comment fonctionne le plugin pour chaque partie de votre site.

C’est parti!

1. Les trois licenses WPML: laquelle choisir ?

Il faut savoir que WPML propose 3 types de licences:

• Blog multilingue, idéal pour les bloggers qui doivent traduire leurs articles sans complexités.
• CMS multilingue, la plus complète qui supporte les constructeur de pages, WooCommerce, la traduction automatique etc. (limité à 3 sites mais un nombre de langues illimitées pour chaque site).
• Agence multilingue, qui est exactement comme la CMS mais offre un nombre de site en illimité.

Chaque année, il y a des frais de renouvellement pour chaque compte, ce qui couvre les mises-à-jour et l’accès au support en 5 langues (incluant le Français). Si vous ne renouvelez pas votre abonnement, les traductions existeront encore, mais vous n’aurez plus accès à votre compte WPML donc plus de MAJ et plus de support. Cela peut être très risqué, à vous de voir…

Pour notre tutoriel, j’ai besoin de traduire le contenu provenant de WooCommerce et Elementor, j’opte donc pour la version CMS à 79 $USD ( à peu près 72 euros.)

 

2. Les extensions WPML: de quoi avez-vous besoin?

Mon achat est fait, WPML m’a envoyé mes codes, je peux dès à présent me connecter pour télécharger les extensions dont j’ai besoin et activer mon site.

WPML n’est pas un seul et unique plugin. Dans votre compte, dans la partie “téléchargement” vous en trouverez une quinzaine, tous inclus dans la licence CMS multilingue.

Les extensions “essentielles”:

On a quasiment toujours besoin de ces quatre extensions:

1. WPML Multilingual CMS, le plugin core qui est essentiel.
2. String Translation, le plugin qui permet de traduire toutes les chaînes de traduction autre que les pages ou les articles. Il va traduire l’interface directement depuis WordPress sans avoir à utiliser de fichiers .mo, traduire le slogan, les mots comme “en lire plus”, le contenu pour le référencement etc. 
3. Translation Management, le plugin qui vous permet d’accéder à la traduction automatique et de collaborer avec les traducteurs/services de traductions sans quitter le tableau de bord WordPress. Cette extension permet aux admins du site de gérer les travaux de traductions et de voir leurs statuts. C’est un véritable outil de gestion des traductions où tout est centralisé.
4. Media Translation, pour la traduction des images. Ce plugin permet d’utiliser la galerie WordPress dans différentes langues et d’attribuer ainsi différentes images en fonction de la langue.

 

Les extensions secondaires (comprises dans le prix licence Multilingual):

WPML a créé plusieurs “glue” plugins (ou intégration) avec les produits WordPress les plus populaires. Ces extensions qui ont besoin de WPML et de l’autre plugin pour fonctionner, permettent d’offrir à l’utilisateur une expérience de traduction assez complète.

Parmi les plus populaires on retrouve GFML (Gravity Forms Multilingual), ACFML (Advanced Custom Fields Multilingual) et WCML (WooCommerce Multilingual).

 

3. Installer et configurer WPML

3.1. L’installation :

Dans mon compte, je vais d’abord enregistrer mon site (1), puis je téléchargerai les extensions dont j’ai besoin (2).

1. Cliquez sur “Register WPML on your sites” (WPML aurait pu traduire cela en Français, c’est dommage)
2. Cliquez sur le bouton “Ajouter un nouveau site”

3. Ajoutez votre URL et cliquez sur “Ajouter”:

4. Vous avez à présent votre clé pour activer votre site, copiez la clé:

5. Allez dans “Téléchargements” (2)

6. Téléchargez WPML Multilingual CMS en cliquant sur la flèche de droite:

7. Dans votre tableau de bord WordPress, Téléversez le plugin WPML CMS, cliquez sur  installer, puis activer.

8. Dans “Extensions” vous obtenez ce message:

9. Cliquez sur “Register Now” et entrez votre clé générée précédemment:

10. C’est magique, vous pouvez à présent simplement cocher les extensions dont vous avez besoin en un clic:

Comme vous pouvez le voir ci-dessus j’ai choisi d’installer les 4 extensions essentielles ainsi que WooCommerce Multilingual, l’extension dédiée à WooCommerce qui a plus de 100 000 utilisateurs. A noter que l’extension est aussi dispo sur le repo WordPress, mais nécessite bien entendu WPML et WooCommerce pour fonctionner.

 

3.2. La configuration: choix des langues et localisation du sélecteur

1. Cliquez sur “Configurer WPML”

2. Il y a un wizard multi-steps qui s’organise en 5 étapes:

Etape 1 – Langue du contenu actuel, j’ai choisi “Français”.

Etape 2 – Langues de traduction: j’ai choisi “Anglais”. WPML a présélectionné des langues pour vous mais vous pourrez en ajouter plus tard, pas de panique. Ajouter une langue ne veux pas dire traduire son site directement, en fait, on “prépare” le site à recevoir du contenu en Français et en Anglais.

Etape 3 – Sélecteur de langue et options

Personnellement, j’ai choisi le pied-de-page pour aller plus vite, mais on reviendra plus tard sur comment créer un sélecteur de langue et l’afficher dans la zone de votre choix:  zone de widget, menus, footers etc.

Etape 4 – Compatibilité: cette section permettra à WPML de savoir quels plugins vous utilisez et donc de maintenir une bonne compatibilité avec les auteurs de ces plugins en priorités. C’est aussi très utile dans le support car WPML saura en avance quels plugins vous avez, plus facile pour débugger!

Etape 5 – Enregistrement et cliquez sur Terminer.

 

4. Ajouter sa propre langue et son propre drapeau

WPML vient avec 100 langues préenregistrées qui sont prêtes à accueillir votre contenu, mais comment faire si vous voulez ajouter votre propre langue? Je pense notamment à nos amis Breton, Niçois ou Franco-Canadien…

1. Dans WPML > Langues, cliquez sur l’hyperlien “Edit Languages”

2. Ici il vous suffit d’ajouter les informations suivantes:

• Code: une valeur unique qui identifie la langue. Une fois saisi, le code de langue ne peut plus être modifié. Attention.
• Traductions: ce sera la manière dont le nom de la langue sera affiché dans les différentes langues, incluant votre sélecteur de langue.
• Drapeau: drapeau à afficher à côté de la langue (facultatif). Vous pouvez soit téléversez votre drapeau depuis votre ordinateur ou recourir à l’une des images de drapeau intégrée dans WPML.
• Paramètres régionaux par défaut: Ceci détermine la valeur des paramètres régionaux de cette langue. Veuillez vérifier le nom du fichier de localisation WordPress pour la définir correctement.
• Encoder les URL: oui/non, détermine si les URL dans cette langue sont encodées ou si elles font appel aux caractères ASCII (je vous recommande de laisser ‘non’ si vous n’êtes pas sûr).
• Hreflang: important pour le SEO, c’est le code que Google requiert pour cette langue. Le hreflang doit contenir au moins le code de langue (composé habituellement de deux lettres) ou, si vous souhaitez spécifier le pays/la région, il doit correspondre à l’appellation locale, mais dans un format légèrement différent. Si l’appellation locale pour le français canadien est fr_CA, le hreflang correspondant sera fr-ca. Plutôt qu’un tiret bas, utilisez un tiret (-) et uniquement des minuscules.

Voici un exemple pour le Nissart:

3. Sauvegardez et votre langue est ajoutée!

 

5. Créer son propre sélecteur de langue

Avec WPML on peut afficher son sélecteur de langue dans le menu principal, secondaire, dans le footer et dans toute zone de widgets. WPML propose deux façons de créer son sélecteur de langue.

Façon numéro 1: Pour cela il faut aller dans WPML > Langues > Options du sélecteur de langue

D’ici on peut ajouter son CSS et changer l’ordre des langues.

Façon numéro 2 (ma préférée):  Pour cela il faut aller dans WPML > Langues > Sélecteurs de langue personnalisés > Cochez Activer > Personnaliser

Et là, on a un vrai laboratoire qui nous permet de créer un sélecteur de langue comme on veut avec des drapeaux, des couleurs personnalisées et un aperçu du résultat en haut à droite:

 

6. Choisir parmi les 3 types de traduction

6.1. Scénario 1: Je traduis le site en utilisant la traduction automatique  

Depuis plus d’un an, WPML propose la traduction automatique gratuite pour 10 000 mots, inclus dans votre licence. Après les 10 000 mots, vous avez encore 2000 mots offerts, puis voici un exemple du tarif mensuel entre 12000 et 15000 mots = 2$

Voici comment utiliser la traduction automatique avec WPML:

1. Assurez-vous que l’extension “Translation Management” soit activée dans votre tableau de bord:

2. Allez ensuite dans WPML > Gestion de traduction > Qui traduira ce site?

Pour cette démo de traduction automatique, je choisis “Uniquement moi”.

3. Il est temps de choisir quel outil de traduction je veux utiliser: l’éditeur classique de WPML ou l’éditeur avancé? Je choisi l’éditeur avancé car je veux avoir accès à la traduction automatique:

4. Je vais à présent traduire ma page d’accueil en Anglais, construite avec Elementor, en utilisant la traduction automatique:

5. Dans le dashboard WordPress, allez dans “Pages” et cliquez sur le “+” près de la page d’accueil. Nous allons traduire notre page en Anglais.

6. Me voilà sur l’éditeur avancé de WPML. Ici j’ai le choix de modifier la traduction moi-même ou d’utiliser la traduction automatique (le bouton en bleu ciel)

7. J’opte pour la traduction automatique, il y a seulement 94 mots ce qui est peu dans mon quota de 10 000 mots gratuits.

8. Voilà, chaque élément d’Elementor a été traduit en Anglais en un clic:

La traduction est pas mal, je vais juste ajuster le mot “bio” et le traduire plutôt vers “organic”. WPML nous laisse modifier la traduction manuellement:

9. Voici ma page d’accueil traduite en Anglais grâce à la traduction automatique:

 

6.2. Scénario 2: Traduire sa page web en ajoutant un traducteur

Une autre façon de traduire sa page web est de faire appel à un traducteur en l’ajoutant comme utilisateur WordPress. Voyons comment ajouter un traducteur et lui envoyer du contenu à traduire.

Dans notre cas, on va voir comment traduire la page “contact” grâce à un traducteur:

1. Ajoutez un traducteur à votre site en utilisant les rôles WordPress en allant dans WPML > Gestion de Traduction > Rôles de Traduction > Ajouter un Traducteur

2. A vous de choisir suivant votre business, moi je choisis de créer un nouvel utilisateur.

3. Je crée donc un profil pour mon nouveau traducteur:

4. Je confirme bien que mon nouveau traducteur sera en charge de la traduction du Français vers l’Anglais:

5. Le traducteur aura reçu un email avec des identifiants.
6. J’envoie la page “contact” à traduire au traducteur depuis WPML > Gestion de Traduction > Tableau de bord de traduction

7. J’ajoute la page au panier:

8. Ma page se retrouve dans le panier de traduction: 

9. Je décide à quel traducteur j’assigne ma page contact puis j’envoie:

10. Le traducteur “MarineL” reçoit alors un email de notification:

11. Le traducteur peut simplement cliquer sur “démarrer la traduction”. Voyons d’ailleurs à quoi ressemble le tableau de bord d’un point de vue du traducteur. Il s’agit encore du même éditeur avancé sauf que le traducteur a accès uniquement à cette page contact:

12. Une fois que le traducteur a réalisé la traduction, on peut voir le résultat sur la page en Anglais:

 

6.3. Scénario 3: je connecte mon site à une entreprise de traduction

On arrive au dernier scénario qui permet de travailler directement avec des services de traduction. WPML est connecté à une trentaine de services qui peuvent traduire votre site directement depuis le tableau de bord WordPress. On oublie les Google Docs, les emails, les tableaux Excel, tout se gère en proxy. Il y a tous les prix et ces entreprises traduisent tous types de sites.

1. Choisir son service de traduction: pour les découvrir, WPML a une liste complète de partenaires accessible sur leur site, je vous recommande de demander un devis à chacun d’entre eux pour pouvoir comparer leurs tarifs.  Dans la gestion de traduction vous pouvez voir le nombre de mots pour chaque page, ce qui va vous permettre de calculer le prix potentiel avec chaque partenaire.

2. Sélectionnez votre service de traduction depuis le tableau de bord: WPML > Gestion de traduction > Services de traduction > Activate

3. J’ai choisi ICanLocalize et en parallèle j’avais créé un compte avec eux, ils m’ont aussi fournis une clé d’activation, je peux donc m’authentifier:

4. Je retourne dans ma gestion de traduction et j’envoie la page à ICanLocalize.

5. ICanLocalize me “renverra” la page traduite sur mon dashboard WordPress et je pourrai vérifier ainsi le contenu. Si cela me convient, en un clic, la page sera publiée.

 

7. Traduire les widgets: pieds-de-pages, articles récents, etc.

WPML permet de traduire les widgets WordPress. Les mots comme “Articles Récents” seront automatiquement traduits en Anglais, mais comment traduire la section du pied-de page “Nos Partenaires”, par exemple?

1. Allez à WPML > Traduction de chaînes puis rechercher votre chaîne à traduire. Dans notre cas c’est “nos partenaires”, cochez  la mention “Traduction terminée” et cliquez sur “Appliquer”.

2. Mon pied-de-page est à présent traduit:

Nota: Vous pouvez bien sûr ajouter cette chaine de traduction à votre panier comme dans les étapes précédentes et ainsi utiliser la traduction automatique ou permettre à un traducteur de traduire ces mots.

 

8. Traduire le menu de son site WordPress

La traduction du menu se fait très rapidement et il y a deux espaces dédiés dans votre tableau de bord. Assurez-vous que tous les titres de pages soient traduits dans WPML > Chaîne de traduction. Je recherche tous les mots du menu à traduire:

Répétez cette étape pour chaque éléments puis allez dans: 

WPML > Synchroniser les menus WP vous devriez obtenir le menu en Anglais:

 

9. Rediriger les visiteurs vers la bonne langue

Dans WPML > Langue > Redirection selon la langue du navigateur, vous pouvez sélectionner l’option qui vous correspond. Pour l’instant WPML permet seulement de détecter la langue du navigateur et pas de l’adresse IP.

 

10. Traduire les images, changer de logo en fonction de la langue

Dans un article précédent sur la “localisation” vs la “traduction”  on mentionnait l’importance de s’adapter au marché dans lequel on veut s’étendre. Par conséquent, il peut être utile d’adapter le logo.

Logo FR	Logo EN

Alors, comment définir un logo par langue? Il suffit d’aller dans WPML > Media Translation

Ensuite, téléversez un logo en Français et le tour est joué:

 

11. Traduire les formulaires de contact

Comme mentionné dans la partie 1, WPML a développé plusieurs “Glue” plugins pour assurer la traduction des extensions les plus populaires. Nous allons prendre l’exemple de Ninja Form et voir en détail comment WPML fonctionne avec.

Pour cette étape, il nous faut donc les extensions suivantes:

• WPML CMS
• WPML Translation Management
• Ninja Forms (la version gratuite)
• Ninja Forms Multilingual

J’ai créé un formulaire de contact assez simple, comprenant les quatre champs suivants:  “Nom”, “Email”, “Message”, “Envoyer”

1. Pour traduire, allez à WPML > Gestion de Traduction > Tableau de bord de traduction > Sélectionnez votre formulaire

2. Ajoutez-le au panier de traduction:

3. Dans “WPML>Traduction”, vous verrez le formulaire prêt à être traduit:

4. L’éditeur WPML s’ouvre à nouveau, effectuez la traduction comme expliqué dans les sections précédentes.

5. Sur la page de l’éditeur de traduction, assurez-vous de traduire uniquement le contenu de la page et non le shortcode du formulaire. Assurez-vous de copier le shortcode du formulaire dans le champ de traduction de la langue secondaire. WPML affichera automatiquement le formulaire dans la langue correcte.

 

12. SEO Multilingue: WPML et Yoast SEO

Avant de commencer cette partie, je vous invite à lire cet article spécialisé en SEO multilingue. On y explique les bases à connaître tel que les balises “hreflang”. Si vous envie de devenir un expert et d’améliorer vos connaissances en SEO, inscrivez-vous à notre notre formation SEO et référencement. :)

Pour cette section j’ai besoin de:

• Yoast SEO (plus de 5M installations actives)
• WPML CMS, WPML Translation Management, WPML String Translation, Yoast SEO Multilingual (disponibles depuis votre compte WPML et/ou depuis la section “extensions” depuis votre tableau de bord)

On va passer en revue les éléments suivants:

• Traduction de textes SEO
• Traduction des attributs de référencement de page
• Traduction du fil d’Ariane
• Comment les plans de site xml (ou sitemaps) SEO fonctionnent avec WPML

12.1. Traduction de textes SEO

Yoast SEO vous permet de saisir des textes qui s’appliquent à la page d’accueil ainsi qu’à l’ensemble du site. La première étape est donc d’aller dans Yoast > Réglages SEO > Réglages généraux puis cliquez sur l’hyperlien “la modifiant directement”.

Ensuite allez à WPML > Traduction de chaînes et sélectionnez bien le domaine “admin_texts_wpseo_titles”.

Choisissez ce que vous voulez traduire, par exemple le “company_name”:

12.2. Traduction des attributs de référencement de page

A présent, depuis votre page d’accueil, remplissez les cartouches meta et la requête-cible comme dans mon exemple:

Pour traduire les attributs SEO, ouvrez le menu “Langue” à droite de votre page d’accueil dans votre tableau de bord WordPress, les options doivent être comme ceci:

Cliquez sur les deux flèches pour ouvrir l’éditeur avancé de WPML. On retrouve nos attributs SEO (titre, meta descriptions etc.):

Une fois de plus, vous avez le choix, vous pouvez traduire automatiquement ou le faire vous même. (Les paramètres non textuels sont synchronisés entre les traductions.)

12.3. Traduction du fil d’Ariane

Assurez-vous que le fil d’Ariane soit activé et compléter les champs.

WPML synchronisera automatiquement les traductions et votre fil d’ariane sera à jour dans les deux langues.

Une exception attention: le texte d’ancrage de la page d’accueil. 

Vous devez le traduire dans le panel WPML Traduction de Chaînes. Ceci est illustré dans la capture d’écran suivante:

12.4. Comment les plans de site xml (ou sitemaps) SEO fonctionnent avec WPML et Yoast

Un plan du site  (ou sitemap en Anglais) est un fichier XML qui répertorie toutes les pages de votre site pour Google. C’est donc important d’avoir un plan du site pour chaque domaine.  Pour accomplir cela, il suffit d’avoir un domaine différent par langue. Dans WPML > Langues > URLs vous pouvez choisir cette option en quelques clics.

Lorsque vous avez en.mydomain.com pour les versions du site anglais et fr.mydomain.com pour la version du site Française, vous vous retrouverez avec deux fichiers XML différents pour chaque version linguistique. Les deux versions listeront les pages correctes pour leur langue respective, et ça Google aime bien!

Où trouver le plan du site de la langue par défaut ? —>  En accédant à votredomaine / sitemap_index.xml.

Où trouver le plan du site de la langue secondaire ? —> En accédant  à votre-domaine-de-langue-secondaire / sitemap_index.xml.

 

13. Zoom sur WooCommerce Multilingual (WCML), configuration de la boutique internationale, traduction des produits, catégories, taxonomies…

Parmi les extensions de WPML, on y trouve WCML, WooCommerce Multilingual. Ce plugin utilisé par plus de 100 000 personnes, permet à votre e-boutique de devenir internationale en quelques clics.

Important: WPFormation vous propose une riche formation WooCommerce qui peut vous être utile afin de maîtriser Woo à la perfection avant de vous lancer dans l’internationalisation de votre boutique. La formation est reconnue par Pôle Emploi et se fait en comité réduit…What else?

Avant toute chose, on vérifie que les plugins suivant soient activés:

• WPML CMS
• WPML Translation Management
• WooCommerce
• WooCommerce Multilingual

13.1. Configuration de WCML

Après activation de WCML, vous aurez ce message provenant de WPML. Vous pouvez cliquer sur “Démarrer l’assistant de configuration”.

La configuration se fait en 5 étapes essentielles pour bien démarrer et choisir quelles sont les pages à traduire, les devises à utiliser en fonction de la langue et bien d’autres choses.

A la fin du wizard, on retrouve WCML dans le menu de WooCommerce dans votre tableau de bord:

WCML nous redirige automatiquement dans l’onglet “Status”. Ici, vous pouvez voir ce qu’il manque à configurer au fur et à mesure.

13.2. Traduire les produits et les variantes WooCommerce:

Mon produit en Français	Mon produit traduit en Anglais

Dans le tableau de bord WCML, ouvrez l’onglet “Produits”:

Pour effectuer notre traduction il suffit de cliquer sur le “+” sous le drapeau Anglais. L’éditeur WPML s’ouvre à nouveau, je sélectionne l’option “traduire automatiquement” et j’obtiens mon produit traduit en Anglais:

NB: on pourrait aussi envoyer les produits à des traducteurs ou des services de traduction directement comme vu précédemment.

13.3. Traduire les catégories et les taxonomies:

Allez dans l’onglet “Catégories” depuis le tableau de bord WCML et cliquez sur le “+”:

Voici un exemple avec “Jus”:

13.4. Traduire les modes et les classes de livraison

On suit le même processus:

13.5. Traduction des pages “paniers” et “paiement”

Bonne nouvelle, WCML traduit tout automatiquement pour vous, ainsi le panier et la page paiement seront affichées dans la bonne langue. 

13.6. Traduction d’autre texte pendant le processus d’achat:

Si vous remarquez du texte non traduits, alors direction WPML > Chaîne de traduction et rechercher votre mot à traduire comme montré précédemment.

13.7. Utilisation de plusieurs devises et différent moyens de paiement: définir les prix en fonction de la langue et collecter les paiements

Ouvrez l’onglet “Multidevise” sur votre tableau de bord WCML:

Vous avez le choix ici d’ajouter toutes vos devises, les indexées en live au taux de change, choisir le séparateur, la décimale etc. Pour mon exemple,
j’ajoute le Dollar Américain:

Puis, je configure ma boutique pour que le Dollar n’apparaisse que sur la version Anglaise du site:

Ensuite, toujours dans le même onglet, je construis un sélecteur de devise qui va fonctionner comme le sélecteur de langue (widget) que nous avons vu précédemment. Dans cette pop-up, on peut créer son son propre style: une liste horizontale ou verticale, des symboles personnalisés pour devises, les couleurs de la bordure etc.

13.8. Aller plus loin: les extensions WooCommerce et leur compatibilité avec WPML. 

Parmi les plus populaires on retrouve:

• WooCommerce Bookings
• WooCommerce Product Add-Ons
• WooCommerce Subscriptions (voir le tuto)
• WooCommerce Table Rate Shipping
• WooCommerce Tab Manager

WPML a une liste d’extensions régulièrement testées vous pouvez donc consulter la liste et voir si votre extension s’y trouve: 

 

Ma conclusion sur WPML

WPML est donc un plugin très complet avec beaucoup de fonctionnalités à connaître avant de se lancer.

L’extension vous permet de traduire votre site manuellement ou automatiquement grâce à l’éditeur avancé, d’envoyer du contenu à un service de traduction ou encore d’ajouter un traducteur en utilisant les rôles WordPress.

WPML supporte les sites e-commerce, les constructeurs de pages et les sites dynamiques utilisant ACF et les templates. Enfin, si vous avez une demande spécifique ou si vous souhaitez voir une autre application de WPML avec un plugin ou un thème en particulier, n’hésitez pas, laissez-moi un commentaire ;)