WooCommerce multilangue (WPML) (partie 1) - accès membres

Publié le 13 décembre 2019 par BulgaWeb

Préambule :

Je ne suis pas développeur et je partage mon expérience. La demande de mon client (en sous-traitance) était d’avoir un site e-commerce qui soit mis à jour quotidiennement depuis la caisse enregistreuse d’un magasin. Le développeur envoie un fichier xml en FTP qui est lancé par une commande cron tous les soirs (jours ouvrables du magasin) avec WP All Import (plugin également de Soflyy). Vu la lenteur du site avec mon ancien thème, j’ai refait le site avec Oxygen et j’ai supprimé certains plugins (Ultimate Member notamment) et simplifié pour conserver de bonnes performances. Le client m’a donné les instructions du design qui est très simple (le client est Roi).

WPML avec Oxygen

J’utilise la duplication de mes templates et pages après avoir réalisé mon site dans la première langue. Pour réaliser cette opération il faudra autoriser WPML à dupliquer les templates d’Oxygen (les pages et articles sont normalement configurés directement). Il faudra se rendre dans “WPML > Paramètres > Traduction des types de publication” et activer “Templates”
Note : ceci doit être également réalisé si vous travaillez avec des blocks à traduire ou d’autres éléments. Pour les Widgets, mettre le plugin WooSidebars et là je crée mes widgets pour les deux langues.

Ensuite, se rendre dans “WPML > Gestion des traductions” et sélectionner le contenu à traduire. Dans l’image ci-dessous j’ai rajouté uniquement une page Test pour l’exemple. Dans votre cas il faudra choisir toutes les pages voulues et ensuite répéter l’opération pour tous les templates. Cochez “Dupliquer le contenu” et ensuite validez avec “Duplication”.

À partir de là, vous pouvez vous rendre dans vos pages et templates et, en choisissant la seconde langue, vous avez toutes vos pages dupliquées mais identiques à la première langue. Il nous reste juste une opération à réaliser sur CHAQUE page/template de la seconde (ou plus) langue. En se rendant sur la page, il faut demander à WPML de traduire la "copie" à part de manière à garder deux différentes, ce qui est le but. Donc, cliquez sur "Traduire à part" et ensuite vous pouvez traduire/changer le contenu de la page/template dans l’autre langue.

Note : prendre en compte le fait qu’à intérieur des templates il faudra modifier certains paramètres pour les queries ainsi que les widgets insérés. C’est logique. Ne pas oublier qu’il faut, suivant les cas, traduire les attributs et catégories mais ce tutoriel est juste fait pour aider l’intégration avec Oxygen.

Pages de connexion / déconnexion WooCommerce

Certains doivent le savoir mais pour moi ce fut une petite surprise. Réaliser une page de connexion avec WooCommerce est très simple. Par défaut lorsque vois insérer le module "My account" d’Oxygen et que le client n’est pas connecté vous avez un bloc avec deux colonnes S’enregistrer et Se connecter. Personnellement je voulais avoir mes formulaires Se connecter et S’inscrire séparés. Un peu de CSS est suffisant.
Note : le module "My account" dans l’édition d’Oxygen ne montre pas le même résultat que sur le front-end (site), pas de panique. Le code block contient le CSS pour séparer les deux colonnes.

CSS pour conserver uniquement la colonne connexion (peut varier suivant votre personnalisation, c’est une base) :

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
     display: none;
 }
 .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
     float: left;
     width: 100%;
 }

Pour une page S’inscrire :

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
     display: none;
 }
 .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
     float: right;
     width: 100%;
 }

Et voilà 🙂 (le cadre peut être enlevé à votre convenance)

Dernier point, l’accès pour la connexion

Oxygen permet avec les conditions l’accès aux pages selon que l’utilisateur est connecté ou pas (User logged in) mais je voulais dans mon menu que le client voit Se connecter s’il n’est pas connecté et Déconnexion s’il est connecté. Dans ce cas il faudra installer User menu (gratuit) qui va résoudre ce point. Après installation, rendez-vous dans votre menu et choisissez les pages à autoriser (dans mon cas Connexion/Déconnexion ainsi que Mon Compte) et changer les conditions. WooCommerce, dans la section menu, propose les Terminaisons WooCommerce (à activer éventuellement dans les options de l’écran) où vous trouverez la Déconnexion et où vous pourrez choisir la redirection après déconnexion.

Lien de User Menus https://fr.wordpress.org/plugins/user-menus/

Voilà, c’est mon premier tutoriel pour "J’oxygène mon WordPress" et j’espère qu’il vous a été utile et qu’il est clair. Bon travail et, comme on dit, "Y a plus qu’à ... "


Bruno Pirard (Freelancer passionné)
https://oxygen.bulgaweb.com/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

bookmarkipsum libero. tristique ut velit, venenatis neque. linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram