Pour vendre des produits sur Internet, vous aurez besoin d’une boutique en ligne, soit sous forme d’une solution indépendante, soit intégrée à un site Internet existant. L’outil de e-commerce WooCommerce fait partie des solutions de boutique en ligne les plus appré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 shortcodes, ou codes courts, il est très facile d’intégrer des composants de WooCommerce dans d’autres éléments d’un site Internet. Nous vous présentons les principaux shortcodes et quelques conseils pour les utiliser sur votre site de e-commerce.
Domaine Internet pas cher
Bien plus qu'un simple domaine !
Personnalisez votre présence en ligne avec un nom de domaine pertinent.
EmailCertificat SSLAssistance 24/7Shortcode | Arguments | Explication, fonction |
[woocommerce_cart] | – | Affiche le panier |
[woocommerce_checkout] | – | Affiche la page de paiement |
[woocommerce_my_account] | – | Affiche le compte de l’utilisateur connecté |
[products] | Plusieurs arguments combinables entre eux | Affiche les produits que l’on peut trier selon différents critères |
[product_category] | ID, description de la catégorie | Affiche les produits de la catégorie sélectionnée |
[product_categories] | – | Liste toutes les catégories d’une boutique |
[product_page] | ID | À l’aide de l’ID d’un produit, affiche une page produit unique |
[add_to_cart] | ID | Affiche l’action « Ajouter au panier » à l’aide de l’ID d’un produit |
[woocommerce_order_tracking] | – | Suivre une commande |
[woocommerce_my_account] | « limit », entre autres | Liste les commandes |
Un shortcode est une forme abrégée de fragments de code plus longs. Les shortcodes, ou codes courts, sont programmés comme des fonctions et reçoivent un nom unique. Ces codes courts permettent d’intégrer des composants ou des processus à certains éléments d’un site Internet, sans nécessiter de grandes connaissances en programmation. La structure des shortcodes 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écifique sur une page existante ou dans un article à l’aide du plugin WordPress « Responsive Lightbox & Gallery » :
[rl_gallery id="9876"]La suite de caractères « rl_gallery » est le shortcode à proprement parler, c’est-à-dire le mot-clé pour l’instruction « 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 existantes. La forme [shortcode attribut="123" argument="abc" … ] est utilisée pour tous les codes courts.
Une autre forme de shortcode utilise la structure suivante :
[shortcode]…[/shortcode]Les codes courts de ce type servent notamment à créer des mises en pages sur plusieurs colonnes, des onglets ou des boutons.
Dans le système de boutique en ligne WooCommerce, les shortcodes servent à affichercertains contenus de la boutique. Des informations additionnelles variées précisant les différents shortcodes permettent de créer de nombreux affichages spécifiques pouvant favoriser la vente des produits sur une boutique en ligne. Il peut par exemple s’agir de composants d’une page avec des contenus de type « Les clients qui achètent X choisissent 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 WooCommerce.
Avec le plugin flexible de e-commerce WooCommerce, les paquets WordPress vous offrent les avantages du CMS le plus apprécié et d’une boutique en ligne en un seul et même endroit.
En pratique, dès l’installation de WooCommerce, le plugin créé déjà des pages avec des shortcodes, par exemple « Mon compte », « Panier » ou « Paiement ». Lorsque vous ouvrez la page « Panier » dans le tableau de bord, l’éditeur visuel affiche immédiatement le shortcode. Il suffit d’ouvrir l’éditeur de texte pour voir que ce code est compris entre des balises HTML invisibles, qui indiquent qu’un code court a été intégré. Le shortcode est donc visible dans l’éditeur visuel :
<!-- wp:shortcode -->[woocommerce_cart]<!-- /wp:shortcode -->Les produits constituent la base de toute boutique en ligne. C’est également le nom qu’ils portent dans WooCommerce et ils sont accessibles depuis le tableau de bord de WordPress.
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 :
[products ids="9581"]Lorsque vous utilisez un argument, faites bien attention à utiliser les bons guillemets. Sous Windows, utilisez le raccourci ALT+0034 ; sous macOS, MAJ+2. Les shortcodes ne reconnaissent aucun autre type de guillemet ouvrant ou fermant.
Si vous souhaitez afficher plusieurs produits, listez-les en séparant leurs ID par des virgules :
[products ids="9581, 9577, 9352"]
L’argument « ids » s’écrit toujours au pluriel, quel que soit le nombre d’identifiants utilisé. L’intégration d’un seul produit reste exceptionnelle, car il est souvent plus pertinent d’intégrer plusieurs produits.
Le shortcode « products » accepte d’autres arguments :
[products limit="5" columns="2" orderby="date" order="ASC" visibility="visible"]Voici le fonctionnement de chaque argument :
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 WooCommerce « products ». Le SKU est un moyen efficace pour gérer tous les produits de manière systématique.
Le shortcode de notre boutique d’exemple
[products category="equipement-photo"]affiche uniquement deux produits, ceux portant le nom de catégorie « équipement photo ». Cet argument fonctionne aussi bien avec le nom de catégorie, « équipement photo », qu’avec le slug « equipement-photo ». Si l’on ajoute, après une virgule, la mention « tuto-numerique », le site de la boutique affichera tous les produits correspondants. Il s’agit d’un processus courant de gestion des catégories par le biais des shortcodes.
À 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 catégories disponibles dans la boutique. Cette liste peut s’avérer pertinente sous un produit unique afin de susciter d’autres achats.
Ce qui fonctionne pour les produits s’applique également aux autres contenus de l’environnement WooCommerce. Le code court suivant vous permet d’intégrer un produit particulier en tant que page :
[product_page id="9350"]
Cette fonction est par exemple intéressante lorsqu’un article similaire est recensé sur le blog et que l’on souhaite proposer un article correspondant à la vente sans avoir à faire de détour.
Si l’on décrit le produit différemment, le shortcode suivant permet d’insérer la fonction « Ajouter au panier » (à droite sur l’illustration) dans la page ou l’article WordPress désiré :
[add_to_cart id="1234"]Le shortcode [woocommerce_cart] appelle le panier (rempli correctement) :
Cette étape du processus d’achat peut ainsi être intégrée à l’emplacement 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 [woocommerce_checkout].
Grâce au shortcode [woocommerce_order_tracking], un client connecté à la boutique peut voir le statut de sa commande. Pour cela, il doit renseigner 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 [woocommerce_my_account]. Le nombre de commandes à afficher peut être limité. La valeur « -1 » affiche toutes les commandes.
Tous les shortcodes ont l’air d’avoir été correctement saisis, mais ne fonctionnent pas ? Il peut s’agir d’une erreur courante : lorsque les shortcodes sont placés entre les balises <pre>[shortcode]</pre>, il vous faudra les enlever dans l’éditeur de texte/code pour résoudre le problème.
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 correspondant à des fonctions programmées par vos soins.
Le début du fichier functions.php comporte souvent la mention « Éditez ce fichier uniquement si vous savez ce que vous faites… ».
Pour vos donner un exemple, la fonctionnalité suivante a été testée dans un site Internet WordPress existant sans générer de message d’erreur :
<?php
function myshortcode_function(){
return "<h1>Bonjour, la programmation est effectuée personnellement par le propriétaire</h1>";
}
add_shortcode('myshortcode', 'myshortcode_function');
?>
Sur chaque page ou article où le shortcode [myshortcode] est utilisé s’affiche alors le message « Bonjour, la programmation est effectuée personnellement par le propriétaire » en guise de titre.
Hébergement Web avec conseiller personnel !
Hébergement Web puissant, flexible et performant avec boîte email, conseiller personnel et domaine inclus la 1ère année !
DomaineCertificat SSLAssistance 24/7Le risque d’insérer des erreurs dans le code d’un site WordPress peut être élégamment contourné avec des plugins dédiés à la production de shortcodes. Ces plugins, vérifiés par la communauté de WordPress, créent des codes courts parfaitement inoffensifs capables d’exécuter des tâches individuelles et même de s’adapter à des besoins spécifiques par leur désignation. Nous vous en présentons trois dans les grandes lignes.
Ce plugin vous permet de personnaliser une boutique WooCommerce avec plus de 60 fonctionnalités et shortcodes. On peut ainsi ajouter aux pages standard de jolies pages de boutique et de remerciement. Le plugin permet d’autre part de limiter les contenus, d’adapter le site au Règlement général sur la protection des données ou d’apporter des fonctionnalités de sécurité, mais aussi d’envoyer un message à partir d’un nombre de commandes défini. Ce plugin ne fonctionne pas seul et repose impérativement sur une installation WooCommerce.
Le plugin de shortcodes Woocommerce Shortcode Ultimate offre plus de 50 codes courts, y compris une prévisualisation en direct. Ce plugin est adapté à Gutenberg et responsive. Le développeur assure qu’il fonctionne avec tous les thèmes. Il existe également une version premium payante (sans abonnement).
Ce plugin permet d’adapter des processus et de les enregistrer dans une liste récapitulative similaire à la liste des articles ou des pages dans WordPress. Le shortcode reçoit une description (similaire au titre d’un article) et s’affiche ensuite dans la liste avec les shortcodes pouvant être intégrés. Les shortcodes commencent toujours de cette façon :
[sc name="abcde123…"]Les contenus peuvent être rédigés en HTML, JavaScript ou CSS. D’autres paramètres complètent les possibilités offertes par ce plugin de shortcodes pour WooCommerce. Vous pouvez travailler en mode code, texte ou visuel : ce plugin a un grand potentiel.
Considérez également d’autres solutions de boutique en ligne pour votre activité de e-commerce. Vous y trouverez tout ce qu’il faut savoir pour vendre des produits en ligne. Notre guide « Comparatif des systèmes de boutiques en ligne » peut vous aider à choisir votre solution de boutique en ligne.
Nous comparons les deux systèmes de vente en ligne populaires Shopify et WooCommerce. Quels sont les différences, les avantages et les inconvénients de chaque solution de commerce électronique ? Le système que vous utilisez a une grande influence sur votre activité commerciale sur Internet. La comparaison détaillée de ces deux solutions de commerce électronique peut donc vous aider à prendre la...
Il n’a jamais été aussi simple de créer une boutique en ligne. La plupart du temps, quelques étapes suffisent. Shopify a perfectionné cette simplicité de configuration et occupe aujourd’hui la première place du marché des logiciels de e-commerce. Mais il existe des outils concurrents qui peuvent se révéler meilleurs en fonction des différents besoins. Dans cet article, nous revenons sur les trois...
WooCommerce est certes gratuit, mais ça ne signifie pas qu’il n’entraîne aucun frais. Les utilisateurs qui créent une e-boutique à l’aide du plugin gratuit de WordPress WooCommerce devront s’acquitter d’un certain nombre de frais WooCommerce. Pour bien planifier leur budget, ils doivent connaître les prix de WooCommerce en amont. Voici chacun des coûts, des certificats SSL à l’hébergement en...
Il est recommandé de proposer plusieurs solutions de paiement sur WooCommerce afin de s’adresser au plus grand nombre de clients possible et de leur offrir une expérience d’achat agréable et simple. WooCommerce offre différentes méthodes par défaut mais vous pouvez aussi ajouter d’autres modes de paiement. Découvrez les moyens de paiement, leurs avantages et inconvénients, et les meilleurs...
Tout exploitant de boutique en ligne a besoin de fonctionnalités sur son site. Si vous avez créé votre boutique en ligne avec WooCommerce, de nombreux plugins WooCommerce gratuits ou payants vous permettent d’adapter votre boutique à vos exigences. Nous vous présentons les principales extensions WooCommerce pour les mesures marketing, le processus d’achat et un processus de paiement amélioré.
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packs
