Les produits WooCommerce sont des « articles » WordPress personnalisés avec des champs personnalisés. Ils sont organisés à l’aide des taxonomies personnalisées de « catégories de produits » et d’« étiquettes de produits ». Ici, nous vous montrons comment fonctionnent les sites WooCommerce multilingues et ce dont vos thèmes WooCommerce ont besoin pour être Multilingual Ready (prêts pour le multilingue).
Comment fonctionnent les sites WooCommerce multilingues
Lorsqu’un site utilise WPML, une langue est attribuée à chaque élément de contenu. Cela signifie que chaque produit, catégorie et étiquette aura un attribut de langue. Les traductions sont enregistrées dans la base de données en tant que produits distincts, liés entre eux à l’aide de la table de langues de WPML. Les produits traduits partagent les mêmes images et disposent de leurs propres champs distincts avec des textes dans la bonne langue.
Les administrateurs du site peuvent traduire facilement à l’aide de la table de traduction de produits de WPML. De cette façon, ils peuvent se concentrer sur la traduction des textes requis, sans avoir à se soucier de la manière dont les traductions sont stockées dans la base de données.
Étant donné que les traductions sont séparées dans la base de données, il est également facile d’afficher des sites WooCommerce multilingues. En fait, si vous utilisez les API de WordPress et de WooCommerce, votre thème est peut-être déjà Multilingual Ready. Avec un peu de tests et éventuellement de petites modifications, vous pouvez obtenir une compatibilité multilingue complète et profiter de nouveaux marchés.
Extensions requises pour les sites WooCommerce multilingues
Pour faire fonctionner des sites WooCommerce multilingues, les extensions suivantes sont nécessaires :
- WooCommerce
- L’extension noyau de WPML et les modules complémentaires WPML Traduction de chaînes et WPML Traduction des médias
- WPML Multilingual & Multicurrency for WooCommerce
WPML et toutes les extensions associées, y compris WPML Multilingual & Multicurrency for WooCommerce, sont inclus avec le type de compte Multilingual CMS.
Textes codés en dur dans les modèles
Vos fichiers de modèles affichent un mélange d’informations sur les produits et de textes codés en dur. Par exemple, la plupart des modèles incluront le nom du produit et un lien « Acheter ». Le nom du produit provient de la base de données, vous n’avez donc pas à vous soucier de sa traduction.
Vous devez vous assurer que tous les textes codés en dur sont traduisibles, en utilisant GetText.
Bon
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Dans l’exemple ci-dessous, « Similar products » et « Buy now! » ne sont pas enveloppés dans des appels GetText.
Mauvais
<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />Bon
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Mauvais
<p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />« Similar products » et « Buy now! » ne sont pas enveloppés dans des appels GetText.
| Bon | Mauvais |
|---|---|
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" /> | <p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />« Similar products » et « Buy now! » ne sont pas enveloppés dans des appels GetText. |
Assurez-vous d’utiliser le domaine de texte de votre thème pour tous les appels GetText.
Pages WooCommerce codées en dur
De nombreux thèmes e-commerce incluent des pages spéciales, comme les pages Panier ou Compte. Le thème inclut souvent des liens vers ces pages, qui apparaissent sur chaque page du site.
Si vous utilisez un menu WordPress pour ces liens, tout devrait bien fonctionner. WPML affiche un menu WordPress différent pour chaque langue, de sorte que les liens vers ces « pages spéciales » seront différents selon la langue. Cependant, si vous codez ces liens en dur dans les fichiers de modèles, vous devez permettre à WPML de remplacer les liens par des liens vers ces pages dans la bonne langue.
La bonne façon de créer un lien vers les pages spéciales de WooCommerce est d’utiliser les fonctions de l’API de WordPress et les ID de page WooCommerce. WPML Multilingual & Multicurrency for WooCommerce filtre les appels à get_option() avec les ID de page WooCommerce. Il renverra l’ID de la page dans la langue actuelle.
Bon
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>Le « shop » est le slug de la page dans la langue par défaut.
Mauvais
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>L’ID de la « shop page » est codé en dur. Il sera différent selon les sites et les langues.
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>L’URL de la « shop page » est codée en dur. Elle sera différente selon les langues.
| Bon | Mauvais |
|---|---|
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>Le « shop » est le slug de la page dans la langue par défaut. | <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>L’ID de la « shop page » est codé en dur. Il sera différent selon les sites et les langues. <a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>L’URL de la « shop page » est codée en dur. Elle sera différente selon les langues. |
Listes de produits Multilingual Ready
Si vous utilisez les shortcodes de WooCommerce pour afficher la liste de produits, tout devrait bien fonctionner. WooCommerce chargera les produits dans la bonne langue et les affichera.
Si vous préférez charger les produits manuellement, à l’aide de votre propre code, assurez-vous d’utiliser l’API de WordPress ou les appels d’API de WooCommerce. Si vous accédez directement à la base de données, WPML ne filtrera pas votre appel et vous obtiendrez un mélange de tous les produits dans toutes les langues.
Bon
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
);
$products = new WP_Query( $args );
?>Mauvais
<?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters sera défini sur true par défaut, ce qui empêchera le filtrage par langue.
$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML ne filtre pas les requêtes SQL de bas niveau. Tous les produits dans toutes les langues seront renvoyés.
| Bon | Mauvais |
|---|---|
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php | <?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters sera défini sur true par défaut, ce qui empêchera le filtrage par langue. $products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML ne filtre pas les requêtes SQL de bas niveau. Tous les produits dans toutes les langues seront renvoyés. |
Une fois que vous avez chargé les bons produits, vous n’avez pas à vous soucier des langues lors de leur affichage. Chaque produit sera accompagné de ses propres champs personnalisés, avec des informations dans la bonne langue.
Modèles de produits Multilingual Ready
Étant donné que les traductions sont stockées dans des produits distincts, l’affichage d’un seul produit sur un site WooCommerce multilingue ne devrait nécessiter aucun effort particulier.
Options de paiement multidevise
Votre site WooCommerce multilingue peut également inclure plusieurs devises. Pour de nombreux sites non américains, la prise en charge de plusieurs devises est une fonctionnalité très importante. Par exemple, de nombreux sites européens devront facturer en euros, en livres sterling et en dollars américains. Les sites d’Europe de l’Est requièrent souvent le rouble russe, tandis que les sites asiatiques ont besoin d’une variété d’autres devises.
La prise en charge du multidevise est incluse dans WPML Multilingual & Multicurrency for WooCommerce. Pour permettre aux visiteurs de passer d’une devise à l’autre, votre thème doit inclure un sélecteur de devise facultatif.
Vous pouvez afficher un sélecteur de devise soit en utilisant un appel PHP, soit en insérant un shortcode.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>[currency_switcher]Pour plus d’informations, consultez le tutoriel sur le multidevise pour WooCommerce. Veuillez noter que vous ne verrez le sélecteur de devise sur l’interface publique que si le site utilise plusieurs devises.
Rendre votre site WooCommerce compatible avec le format RTL
Les thèmes WooCommerce doivent suivre les mêmes directives de prise en charge des thèmes RTL que n’importe quel autre thème WordPress. Vous devez créer un fichier rtl.css, avec les règles CSS pour l’affichage RTL.
Gérer différentes longueurs de texte dans différentes langues à l’aide d’un design fluide
Lorsque vous créez votre thème WooCommerce Multilingual Ready, n’oubliez pas que certains textes seront plus longs dans certaines langues et plus courts dans d’autres. Parfois, vous ne pourrez même pas les tester, car ce sont vos utilisateurs finaux qui traduiront.
Par exemple, regardez ces deux blocs de produits.
CSS optimisé pour un texte court en anglais
Les textes espagnols plus longs ne rentrent pas dans l’espace
En règle générale, testez votre thème avec des textes 2 fois plus longs et réduits de moitié. Cela vous couvrira dans la plupart des cas. La meilleure façon de gérer des textes de différentes tailles est de prévoir des mises en page fluides. Les mises en page fluides permettront aux éléments de se redimensionner et d’occuper l’espace dont ils ont besoin. Créer un modèle élégant avec des tailles fluides n’est pas trivial, mais le faire permet d’éviter les problèmes d’affichage.
Prêt à commencer ?
Si vous êtes un développeur et que vous créez des thèmes ou des extensions WooCommerce, vous devriez absolument rejoindre notre programme Go Global. Vous recevrez un compte développeur WPML gratuit et bénéficierez de l’assistance prioritaire de notre équipe de compatibilité. La boutique WooCommerce n’est qu’une (grande) partie de votre thème. Vous devriez absolument lire notre guide sur l’obtention de la compatibilité WPML pour vos thèmes.
Vous créez des sites pour des clients ? Achetez WPML et lancez-vous dans la création de sites multilingues pour WooCommerce et plus encore.