Infos SaaS Web

WordPress et WooCommerce – le duo parfait

8 minutes de lecture

WordPress est, comme chacun sait, le CMS numéro un au monde, ce n’est plus une nouveauté. Ce qui l’est moins en revanche, c’est que WordPress est également le numéro un des boutiques en ligne grâce à WooCommerce.

WooCommerce fait également partie d’Automattic depuis 2015, ce qui garantit la pérennité de la compatibilité et du développement de l’extension.

Après l’installation et l’activation de WooCommerce, de nouveaux types de contenus personnalisés (Custom Post Types), taxonomies personnalisées (Custom Taxonomy) et pages spéciales sont créés. Le type de contenu personnalisé, tu l’auras deviné, représente un produit dans WordPress, tandis que la taxonomie personnalisée sert à définir la catégorie et le mot-clé du produit. Les pages spéciales sont la page boutique (par défaut /shop) sur laquelle tous les produits sont affichés, la page des CGV (/terms-conditions), l’espace client (/my-account) permettant aux clients de suivre leurs commandes en cours, le panier (/cart) et la page de commande (/checkout).

Voici les fonctionnalités proposées par WooCommerce :

  • Produits
    • Types de produits : produit simple, produit variable, article « immatériel », lien vers un autre produit. Un produit variable est par exemple un produit disponible en plusieurs tailles ou couleurs. Les différentes variantes peuvent être créées à l’aide d’attributs définissables librement. Les produits immatériels sont par exemple des téléchargements PDF ou des codes à télécharger.
    • Présentation du produit : pour chaque produit, il est possible de renseigner un nom, une description courte et une description détaillée. On y ajoute également une grande image produit ainsi que des images supplémentaires (galerie). Bien entendu, un prix est aussi indiqué.
  • Devise, prix : il est possible de définir aussi bien la devise que l’affichage des prix avec ou sans TVA. Il est également possible d’indiquer différents taux de TVA en fonction du pays d’origine de la commande.
  • Gestion des stocks : une gestion des stocks simple peut être activée. La quantité est saisie manuellement, puis le stock est automatiquement ajusté en fonction des commandes. Pour les produits variables, la quantité en stock peut être indiquée pour chaque variante. Il est également possible de définir si un produit passe automatiquement en indisponible lorsque le stock atteint 0, ou si les « commandes excédentaires » sont autorisées et en quelle quantité.
  • Livraison : des zones de livraison sont définies. Une zone de livraison peut s’appliquer à un ou plusieurs pays, et une ou plusieurs méthodes de livraison y sont associées, comme les frais de port forfaitaires ou la livraison gratuite.
  • Options de paiement : une intégration PayPal peut être activée par défaut ; sinon, les options suivantes sont disponibles : virement bancaire, paiement à la livraison et chèque. Il est également possible d’activer des bons de réduction et de les appliquer aux commandes.
  • Compte client : il est possible d’activer la fonction de compte pour les clients, leur offrant ainsi un espace où ils peuvent consulter leurs commandes en cours et passées.
  • E-mails : différents modèles d’e-mails sont disponibles pour différentes actions (confirmation de commande, annulation, etc.).
  • API : un élément essentiel pour les développeurs ! L’API WooCommerce permet d’accéder à toutes les fonctionnalités et de les traiter via REST.

Bien sûr, ce ne sont pas là toutes les fonctionnalités, mais les plus importantes (celles qui me viennent à l’esprit en rédigeant cet article).

Avec WPML, tu peux adapter ta boutique WooCommerce à plusieurs langues. Tu peux traduire les produits comme des pages ou des articles classiques, ainsi que leurs attributs et taxonomies associés. Pour cela, il est recommandé d’installer et d’activer l’extension WooCommerce Multilingual.

Quantités en stock différentes selon la langue

Si tu as des quantités en stock différentes selon la langue, tu rencontres d’abord un problème.

La quantité ne peut être gérée que de manière centralisée via le produit dans la langue par défaut. Cela signifie que le produit traduit a la même quantité que celui de la langue par défaut.

Une option consiste à créer le produit en tant que produit variable et à définir des variantes linguistiques (pour les produits variables, la quantité en stock peut être définie pour chaque variante). Ce n’est toutefois pas aussi simple que cela : les widgets fournis par WooCommerce, comme les produits les mieux notés par exemple, ne peuvent pas gérer les variantes ; ils utilisent la quantité en stock de la variante définie par défaut pour afficher le lien Ajouter au panier ou se contentent de créer un lien vers le produit.

Par ailleurs, on souhaite probablement (c’était notre cas) que la variante linguistique de la langue actuelle soit présélectionnée. Cela n’est pas non plus possible via l’option permettant de définir un attribut par défaut, car celle-ci s’appliquerait alors à toutes les langues.

Tu peux voir le résultat ici, sur la page boutique : www.textilbox.de, www.textilbox.es et www.textilbox.fr.

Les filtres présentés ci-dessous sont tous rattachés à une action init et doivent être définis dans le functions.php :

add_action('init', function() {

  add_filter('function-name', function($args){
 .. Code ...
 },1,1); 

}

Pour que cela fonctionne comme indiqué dans le code ci-dessous, tu dois nommer les variantes linguistiques avec les mêmes codes ISO que ceux utilisés par WPML. Nous avons 3 variantes linguistiques : allemand, français et espagnol, nommées respectivement de, fr et es.

Nous avons par ailleurs créé l’attribut Language, qui est utilisé pour créer les variantes.

add_filter('woocommerce_product_add_to_cart_url', function($url, $product){
 if (is_a($product, 'WC_Product_Variable')) {
 $variations = $product->get_available_variations();
 $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;  
  if ($default_var) {
  foreach ($variations as $variation) {
  if (
  count($variation['attributes']) == 1 &&  
  isset($variation['attributes']['attribute_pa_language']) &&  
  $variation['attributes']['attribute_pa_language'] == $default_var &&  
  $variation['variation_is_active'] &&
  $variation['variation_is_visible'] &&
  $variation['is_purchasable'] ) {
  $url = remove_query_arg( 'added-to-cart', add_query_arg( array( 'variation_id' => $variation['variation_id'], 'add-to-cart' => $product->get_id() ), $product->get_permalink() ) );
  return $url;
  }
  }
  }
  }
  return $url;
}, 99, 2);

Cette valeur $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE; est définie afin que la variante linguistique de la langue actuelle soit sélectionnée lors du clic sur Ajouter au panier. Si un acheteur souhaite une autre variante linguistique, il doit d’abord sélectionner le produit, puis choisir la variante souhaitée.

Il est également possible d’utiliser cette fonction comme alternative à la constante ICL_LANGUAGE_CODE :
global $sitepress;
$my_current_lang = $sitepress->get_current_language();

add_filter('woocommerce_product_add_to_cart_text', function($text, $product){
 if (is_a($product, 'WC_Product_Variable')) {
 $text = $product->is_purchasable() && $product->is_in_stock() ? __( 'Add to cart', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
 }
 return $text;
}, 99, 2); 
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', function($args){
 $attribute = $args['attribute'];
 if (empty($args['selected']) && $attribute == 'pa_language') {
 $args['selected'] = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
 }
 return $args;
}, 10, 1 );  

Que se passe-t-il avec le panier lorsque le client change de langue ?

Voilà une question intéressante. Il existe différentes possibilités :

  • Si tu as configuré tes langues de manière à ce que ton site les répartisse ainsi website.tld/de, website.tld/fr, alors c’est le cas le plus simple. Le panier est simplement traduit (le produit reste identique).
  • Si tu as configuré un domaine distinct par langue (website.de, website.fr), la situation devient un peu plus complexe. En effet, la session et les cookies sont toujours liés à un domaine donné ; lors d’un changement de domaine, une nouvelle session et un nouveau cookie sont créés. Il faut donc configurer WPML pour que les informations nécessaires soient transmises soit par GET, soit par POST (les données sont chiffrées).

Tu trouveras ici une documentation détaillée sur le sujet : https://wpml.org/documentation/getting-started-guide/language-setup/passing-session-data-between-languages-in-domains/

En Allemagne, on sait qu’une mise en demeure peut rapidement arriver si l’on ne respecte pas les règles. Cependant, il ne faut pas se conformer à certaines règles uniquement par crainte de sanctions : certaines d’entre elles sont tout à fait pertinentes, comme l’indication du prix au poids ou à la mesure. Cela permet, pour les produits proposés en différentes tailles, de voir rapidement si et comment une éventuelle remise s’applique.

Aperçu des fonctionnalités de WooCommerce Germanized

L’extension est proposée en freemium : il existe une version gratuite qui offre déjà de nombreuses fonctionnalités, et une version payante Pro, qui propose davantage de fonctionnalités. Dans cet article, nous nous intéressons uniquement à la version gratuite.

Les fonctionnalités :

  • Correspondance avec les pages juridiquement pertinentes telles que les mentions légales, la politique de confidentialité ou le droit de rétractation
  • Formulaire de rétractation sous forme de shortcode avec confirmation par e-mail
  • Activation de l’affichage d’un prix de base, particulièrement important pour les produits variables
  • Affichage de la TVA et des frais de livraison en complément du prix sur la page de présentation et la page produit
  • Activation du régime applicable aux petites entreprises
  • Indication des délais de livraison
  • Activation d’une case à cocher dans le processus de commande permettant aux clients d’accepter la création d’un compte client
  • Procédure de double opt-in pour la création du compte client

Ici aussi, toutes les fonctionnalités ne sont pas listées, il y en a trop 😉

Tu peux découvrir une boutique utilisant WooCommerce Germanized ici : www.oelmanufaktur-bender.de.

Grâce à la combinaison WordPress + WooCommerce, tu profites d’un choix parmi des milliers d’extensions. De nombreuses personnalisations peuvent par ailleurs être réalisées sans toucher directement au code du CMS ou de WooCommerce, ce qui garantit la capacité du système à être mis à jour. Dans les exemples mentionnés ci-dessus, les personnalisations sont réalisées via des hooks, des actions et des filtres ; WooCommerce lui-même n’a pas été modifié.

Des prestataires professionnels, qui se concentraient jusqu’à présent sur les solutions de boutique traditionnelles telles que Magento, OXID ou Prestashop, développent de plus en plus leurs solutions pour WooCommerce.

Un autre aspect que personne ne devrait négliger est celui des coûts de développement. Plus un système est répandu, plus les coûts de développement sont avantageux, car de nombreux prestataires se font concurrence, ce qui tire les prix vers le bas. Cependant, la qualité a, comme on le sait, toujours un prix…

Tu envisages de créer une boutique en ligne ? Nous concevons et assurons la maintenance de boutiques avec WordPress et WooCommerce. En savoir plus sur les boutiques WordPress