Woo­Com­merce et short­codes : in­té­gra­tion facile sous WordPress

Pour vendre des produits sur Internet, vous aurez besoin d’une boutique en ligne, soit sous forme d’une solution in­dé­pen­dante, soit intégrée à un site Internet existant. L’outil de e-commerce Woo­Com­merce fait partie des solutions de boutique en ligne les plus ap­pré­ciées. Ce système a été programmé pour créer des boutiques en ligne avec le CMS WordPress et sa version de base est gratuite. À l’aide des short­codes, ou codes courts, il est très facile d’intégrer des com­po­sants de Woo­Com­merce dans d’autres éléments d’un site Internet. Nous vous pré­sen­tons les prin­ci­paux short­codes et quelques conseils pour les utiliser sur votre site de e-commerce.

Un shortcode est une forme abrégée de fragments de code plus longs. Les short­codes, ou codes courts, sont pro­gram­més comme des fonctions et reçoivent un nom unique. Ces codes courts per­met­tent d’intégrer des com­po­sants ou des processus à certains éléments d’un site Internet, sans né­ces­si­ter de grandes con­nais­sances en pro­gram­ma­tion. La structure des short­codes dans WordPress est ancrée dans le CMS : les codes sont entre crochets pour permettre, par exemple, d’intégrer une galerie à un endroit spé­ci­fique sur une page existante ou dans un article à l’aide du plugin WordPress « Res­pon­sive Lightbox & Gallery » :

La suite de ca­rac­tères « rl_gallery » est le shortcode à pro­pre­ment parler, c’est-à-dire le mot-clé pour l’ins­truc­tion « Affiche une galerie à cette position précise de la page ou de l’article ». La valeur « ID » définit quelle galerie doit être insérée parmi les galeries exis­tantes. La forme [shortcode attribut="123" argument="abc" … ] est utilisée pour tous les codes courts.

Une autre forme de shortcode utilise la structure suivante :

Dans le système de boutique en ligne Woo­Com­merce, les short­codes servent à afficher certains contenus de la boutique. Des in­for­ma­tions ad­di­tion­nelles variées précisant les dif­fé­rents short­codes per­met­tent de créer de nombreux af­fi­chages spé­ci­fiques pouvant favoriser la vente des produits sur une boutique en ligne. Il peut par exemple s’agir de com­po­sants d’une page avec des contenus de type « Les clients qui achètent X choi­sis­sent aussi Y et Z », « L’appareil le plus vendu de sa catégorie » ou « Plus que 3 jours de soldes, j’en profite sans attendre ! ». Découvrez ci-dessous comment y parvenir à travers un exemple de boutique Woo­Com­merce.

En pratique, dès l’ins­tal­la­tion de Woo­Com­merce, le plugin créé déjà des pages avec des short­codes, par exemple « Mon compte », « Panier » ou « Paiement ». Lorsque vous ouvrez la page « Panier » dans le tableau de bord, l’éditeur visuel affiche im­mé­dia­te­ment le shortcode. Il suffit d’ouvrir l’éditeur de texte pour voir que ce code est compris entre des balises HTML in­vi­sibles, qui indiquent qu’un code court a été intégré. Le shortcode est donc visible dans l’éditeur visuel :

Cet ID produit permet déjà d’utiliser un premier code court avec des arguments. Pour insérer un produit à l’aide de son ID unique dans une page ou un article, on utilise le code :

Si vous souhaitez afficher plusieurs produits, listez-les en séparant leurs ID par des virgules :

L’argument « ids » s’écrit toujours au pluriel, quel que soit le nombre d’iden­ti­fiants utilisé. L’in­té­gra­tion d’un seul produit reste ex­cep­tion­nelle, car il est souvent plus pertinent d’intégrer plusieurs produits.

Le shortcode « products » accepte d’autres arguments :

Voici le fonc­tion­ne­ment de chaque argument :

• limit : limite le nombre de produits affichés
• orderby : offre dif­fé­rentes pos­si­bi­li­tés pour trier les données, par exemple en fonction de l’ID, de la date, de la po­pu­la­rité (si la boutique utilise ce critère), par ordre de pu­bli­ca­tion ou de manière aléatoire
• order : tri croissant ou dé­crois­sant (ASC/DESC) des arguments « orderby » sé­lec­tion­nés
• vi­si­bi­lity : définit si les produits sont visibles ou non dans la boutique et dans les résultats de recherche
• paginate : permet une pa­gi­na­tion si l’offre de produit est très vaste. L’attribut d’ac­ti­va­tion est « true ». La valeur « false » est con­fi­gu­rée par défaut.
• columns : nombre de colonnes sur la page produit de la boutique. Un attribut important pour assurer la li­si­bi­lité de la page.

D’autres arguments, comme « attribute », « terms », « category » ou « tag », aident à affiner l’affichage des produits en fonction de critères spéciaux. L’argument SKU (« stock keeping unit »), un terme issu du commerce de détail, est important. Il s’agit d’un code unique attribué à un seul produit. L’argument « sku » s’utilise aussi avec le shortcode Woo­Com­merce « products ». Le SKU est un moyen efficace pour gérer tous les produits de manière sys­té­ma­tique.

Le shortcode de notre boutique d’exemple

À cette fin, utilisez le code [product_category]. Il permet d’afficher et de regrouper les éléments d’une catégorie, que l’on peut compléter avec les attributs « ids » ou « category » séparés par des virgules.

Le shortcode [product_categories], également au pluriel, liste toutes les ca­té­go­ries dis­po­nibles dans la boutique. Cette liste peut s’avérer per­ti­nente sous un produit unique afin de susciter d’autres achats.

Ce qui fonc­tionne pour les produits s’applique également aux autres contenus de l’en­vi­ron­ne­ment Woo­Com­merce. Le code court suivant vous permet d’intégrer un produit par­ti­cu­lier en tant que page :

Cette fonction est par exemple in­té­res­sante lorsqu’un article similaire est recensé sur le blog et que l’on souhaite proposer un article cor­res­pon­dant à la vente sans avoir à faire de détour.

Si l’on décrit le produit dif­fé­rem­ment, le shortcode suivant permet d’insérer la fonction « Ajouter au panier » (à droite sur l’il­lus­tra­tion) dans la page ou l’article WordPress désiré :

Cette étape du processus d’achat peut ainsi être intégrée à l’em­pla­ce­ment de votre choix sur un site Internet. Il en va de même pour la page de paiement, intégrée avec le code court [woo­com­merce_checkout].

Grâce au shortcode [woo­com­merce_order_tracking], un client connecté à la boutique peut voir le statut de sa commande. Pour cela, il doit ren­seig­ner les détails de sa commande. Ce code court n’accepte pas d’argument.

Toutes les commandes sont listées sur la page « Mon compte » avec le shortcode [woo­com­merce_my_account]. Le nombre de commandes à afficher peut être limité. La valeur « -1 » affiche toutes les commandes.

Pour utiliser vos propres codes courts dans WordPress, vous devrez accéder au fichier functions.php. C’est à cet endroit que sont définis les codes courts cor­res­pon­dant à des fonctions pro­gram­mées par vos soins.

Pour vos donner un exemple, la fonc­tion­na­lité suivante a été testée dans un site Internet WordPress existant sans générer de message d’erreur :

Sur chaque page ou article où le shortcode [my­short­code] est utilisé s’affiche alors le message « Bonjour, la pro­gram­ma­tion est effectuée per­son­nel­le­ment par le pro­prié­taire » en guise de titre.

Le risque d’insérer des erreurs dans le code d’un site WordPress peut être élé­gam­ment contourné avec des plugins dédiés à la pro­duc­tion de short­codes. Ces plugins, vérifiés par la com­mu­nauté de WordPress, créent des codes courts par­fai­te­ment inof­fen­sifs capables d’exécuter des tâches in­di­vi­duelles et même de s’adapter à des besoins spé­ci­fiques par leur dé­sig­na­tion. Nous vous en pré­sen­tons trois dans les grandes lignes.

Ce plugin vous permet de per­son­na­li­ser une boutique Woo­Com­merce avec plus de 60 fonc­tion­na­li­tés et short­codes. On peut ainsi ajouter aux pages standard de jolies pages de boutique et de re­mer­cie­ment. Le plugin permet d’autre part de limiter les contenus, d’adapter le site au Règlement général sur la pro­tec­tion des données ou d’apporter des fonc­tion­na­li­tés de sécurité, mais aussi d’envoyer un message à partir d’un nombre de commandes défini. Ce plugin ne fonc­tionne pas seul et repose im­pé­ra­ti­ve­ment sur une ins­tal­la­tion Woo­Com­merce.

Le plugin de short­codes Woo­com­merce Shortcode Ultimate offre plus de 50 codes courts, y compris une pré­vi­sua­li­sa­tion en direct. Ce plugin est adapté à Gutenberg et res­pon­sive. Le dé­ve­lop­peur assure qu’il fonc­tionne avec tous les thèmes. Il existe également une version premium payante (sans abon­ne­ment).

Ce plugin permet d’adapter des processus et de les en­re­gis­trer dans une liste ré­ca­pi­tu­la­tive similaire à la liste des articles ou des pages dans WordPress. Le shortcode reçoit une des­crip­tion (similaire au titre d’un article) et s’affiche ensuite dans la liste avec les short­codes pouvant être intégrés. Les short­codes com­men­cent toujours de cette façon :

Les contenus peuvent être rédigés en HTML, Ja­vaS­cript ou CSS. D’autres pa­ra­mètres com­plè­tent les pos­si­bi­li­tés offertes par ce plugin de short­codes pour Woo­Com­merce. Vous pouvez tra­vail­ler en mode code, texte ou visuel : ce plugin a un grand potentiel.