Les shortcodes WooCommerce vous permettent d’afficher les informations de votre boutique de manière nouvelle et passionnante. WooCommerce est livré pré-construit avec des shortcodes, et vous pouvez installer des plugins pour en ajouter d’autres. Que vous souhaitiez lister des produits dans un tableau, afficher le panier n’importe où sur votre site ou autre chose, vous êtes au bon endroit!

Vous avez probablement déjà rencontré des shortcodes, que vous soyez nouveau sur WordPress ou que vous l’utilisiez depuis un certain temps. Les shortcodes sont, comme leur nom l’indique, de courts morceaux de code qui remplissent une sorte de fonction. Les shortcodes WooCommerce, par exemple, vous permettent d’ajouter des fonctions soignées liées à WooCommerce aux pages WordPress, aux publications, aux barres latérales et aux zones widgetisées de votre site Web.

Si vous cherchez un moyen de simplifier l’expérience d’achat, vous pouvez le faire en utilisant des shortcodes WooCommerce. Ils peuvent vous aider à améliorer les flux d’utilisateurs d’achat et à optimiser votre boutique en ligne pour les conversions.

Par exemple, vous pouvez utiliser les shortcodes WooCommerce pour:

• Afficher une liste de vos produits les mieux notés sur votre page d’accueil.
• Présentez les produits connexes chaque fois qu’un client exprime un intérêt pour un produit.
• Mettez en surbrillance les produits phares dans les blocs Gutenberg, les barres latérales et d’autres zones widgetisées.

Dans cet esprit, dans ce guide complet, nous vous expliquerons comment utiliser les shortcodes WooCommerce pour offrir de meilleures expériences utilisateur et augmenter vos résultats. En cours de route, nous vous expliquerons également quand (et pourquoi) vous devez utiliser chaque shortcode. Nous examinerons les shortcodes fournis avec WooCommerce lui-même et les shortcodes que vous pouvez ajouter avec d’autres plugins.

Comment utiliser les shortcodes WooCommerce

Les shortcodes ont l’air et le son un peu techniques, mais ils sont en fait conçus pour tout le monde. Vous n’avez pas besoin de compétences en codage.

Insérez simplement le shortcode dans n’importe quel éditeur de texte dans WordPress, ou dans un bloc ‘Shortcode’ si vous utilisez Gutenberg ou un générateur de page tel qu’Elementor ou Visual Composer:

Vous pouvez combiner des shortcodes et afficher plusieurs shortcodes sur une seule page. Par exemple, vous pouvez combiner le shortcode de suivi des commandes avec le shortcode du compte utilisateur. Tout ce que vous avez à faire est d’insérer les deux shortcodes sur la même page. Cela ressemblerait à quelque chose comme ça:

shortcodes de liste de produits WooCommerce

Il existe également des shortcodes pour lister les produits de différentes manières dans votre magasin. Ceux-ci ajoutent une flexibilité supplémentaire, de sorte que vous n’êtes pas coincé avec les vues restreintes que vous obtenez sur les pages de la boutique et des catégories. Au lieu de cela, vous pouvez utiliser des shortcodes WooCommerce pour répertorier un ou plusieurs produits littéralement n’importe où sur votre site WordPress – que ce soit dans une vue de liste basée sur une grille ou une table.

shortcode des produits WooCommerce

WooCommerce a un shortcode qui vous permet de lister des produits spécifiques dans une mise en grille:

. Vous pouvez également y ajouter d’autres paramètres (tels que orderby et columns) pour personnaliser l’apparence du front-end.

Vous pouvez choisir le nombre de produits à lister par ligne. Par exemple, si vous souhaitez afficher six produits dans trois colonnes ordonnées par date dans l’ordre croissant, vous utiliseriez le shortcode : . De même, pour afficher les produits par ordre décroissant, il vous suffit de remplacer ASC par DESC.

shortcode WooCommerce quick view

Le shortcode fonctionne de manière transparente avec le plugin WooCommerce Quick View Pro. Cela ajoute des boutons d’affichage rapide à la liste des produits comme un moyen rapide de permettre aux gens de faire leur achat sans quitter la page actuelle:

Tout ce que vous avez à faire est d’installer le plugin WooCommerce Quick View Pro sur votre site WordPress et il ajoutera automatiquement des boutons d’affichage rapide au frontal. De cette façon, les clients peuvent voir les attributs et les variations des produits et ajouter des produits au panier sans accéder à la page d’un seul produit.

Lisez notre guide complet du shortcode WooCommerce Quick View Pro.

shortcode de table de produits WooCommerce

Bien que le shortcode de produits WooCommerce intégré soit assez flexible, il ne vous permet de les afficher que dans une mise en grille. Ce n’est pas idéal pour les magasins qui souhaitent afficher plus de produits par page, par exemple si vous créez un formulaire de commande rapide d’une page ou un magasin de gros. Dans ce cas, vous pourriez être mieux avec un shortcode de table de produits.

Alors que WooCommerce lui-même n’a pas de shortcode de table de produits, vous pouvez facilement en ajouter un avec le plugin de table de produits WooCommerce. Le shortcode de base est et vous pouvez le configurer en utilisant plus de 50 options de shortcode.

Affichez la liste complète des options de shortcode que vous obtenez avec la table de produits WooCommerce.

WooCommerce ajouter au panier shortcode

WooCommerce est livré avec un shortcode intégré qui vous permet d’insérer un bouton ajouter au panier pour un produit spécifique où vous le souhaitez. Ajoutez simplement l’ID et/ ou le SKU du produit pour lequel vous souhaitez afficher le bouton ajouter au panier:

Si vous souhaitez inclure le prix du produit, utilisez:

Pour les produits simples, cela affichera un bouton ajouter au panier.

Pour les produits variables, il affichera un bouton « Sélectionner les options »:

Personnellement, je n’aime pas cela car les clients doivent visiter la page du produit unique pour choisir leurs variations. Il est préférable d’utiliser la table des produits WooCommerce pour répertorier un ou plusieurs produits variables dans une table, avec des listes déroulantes de variations:

De cette façon, les clients peuvent sélectionner des options et les ajouter au panier à partir de la page sur laquelle ils se trouvent actuellement.

Code court de catégorie de produit

Le code court de catégorie de produit répertorie les produits d’une catégorie spécifique dans une disposition de grille standard.

C’est le shortcode pour cela:

Si vous n’aimez pas la disposition de la grille, ou si vous voulez plus de contrôle sur les informations à afficher sur chacun produit, alors vous pouvez utiliser le shortcode de table de produits WooCommerce à la place. Le plugin de table de produits WooCommerce est livré avec une option de shortcode de catégorie, que vous pouvez utiliser pour lister les produits de catégories spécifiques uniquement:

Contrairement au shortcode intégré à WooCommerce, vous pouvez choisir les colonnes d’informations à afficher sur chaque produit et permettre aux clients de sélectionner des variations et de choisir des quantités directement dans la table des produits. Cela rend les achats beaucoup plus rapides et augmente votre taux de conversion.

Code court des catégories de produits WooCommerce

Les codes courts des catégories de produits répertorient vos catégories de produits, au lieu des produits qu’elles contiennent. Exemple:

listera 4 de vos catégories WooCommerce, classées par nom.

Jetons un coup d’œil à certains des attributs et des shortcodes associés aux catégories de produits:

• limit contrôle le nombre de catégories affichées.
• orderby contrôle l’ordre de tri ; « nom » et « date » sont des options valides.
• order représente l’ordre des catégories de produits, c’est-à-dire « ASC » ou « DESC ».les colonnes
• indiquent le nombre de colonnes dans lesquelles les catégories sont disposées.
• hide_empty est utilisé pour masquer des catégories de produits sans produits.
• parent vous permet de présenter uniquement des catégories de produits de premier niveau.Les ID
• indiquent que les ID de catégorie peuvent être définis uniquement en fonction des résultats spécifiés en sortie.

Produits récents

Le shortcode Produits récents de WooCommerce affiche les produits que vous avez récemment ajoutés à votre boutique en ligne.

Ceci est le shortcode pour les produits récents:

Cependant, si vous souhaitez afficher la date réelle de l’ajout du produit à votre boutique en ligne, ou si vous souhaitez plus de contrôle, alors vous pouvez utiliser le plugin de table de produits WooCommerce à la place.

Il suffit de commander le tableau des produits par date dans l’ordre décroissant et d’utiliser le numéro de limite de produit pour contrôler le nombre de produits à inclure:

Si vous incluez une colonne de date dans le tableau, les clients peuvent facilement voir quels produits ont été récemment ajoutés au magasin.

Produits phares

Le shortcode Produits phares pour WooCommerce vous permet de répertorier les produits phares séparément du reste de votre boutique. Utilisez-le pour lister les produits en vedette où vous le souhaitez, par exemple dans des articles de blog ou d’autres pages.

Les produits phares sont des produits WooCommerce qui ont une icône en étoile bleue à côté d’eux sur la page Tous les produits:

C’est le shortcode pour présenter les produits phares: . La sortie devrait ressembler à ceci:

Encore une fois, si vous n’aimez pas la grille d’images, vous pouvez lister les produits en vedette en utilisant le shortcode du plugin de table de produits WooCommerce à la place:

Ceci répertorie les produits en vedette dans une mise en page de tableau, avec les colonnes d’informations que vous avez choisies sur la page des paramètres du plugin.

shortcode des produits de vente WooCommerce

Le shortcode des produits de vente vous permet de présenter les produits actuellement en vente. Vous pouvez facilement les afficher en utilisant le shortcode:

shortcode produits les plus vendus

Utilisez le shortcode WooCommerce suivant pour afficher vos produits les plus vendus de tous les temps dans une grille:

Les boutons d’affichage rapide apparaissent sur le front-end si vous avez le plugin WooCommerce Quick View Pro installé sur votre site WordPress.

Si vous préférez une disposition de table, vous pouvez également lister les produits les plus vendus ou les plus populaires avec le shortcode de table de produits WooCommerce comme ceci:

Lisez notre tutoriel complet sur la façon de lister les produits populaires avec la table de produits WooCommerce.

Produits les mieux notés

Vous pouvez utiliser le shortcode des produits les mieux notés ainsi que la fonction d’avis et d’évaluations intégrée de WooCommerce pour présenter vos produits les mieux notés. Utilisez le shortcode:

Vous pouvez également lister les produits les mieux notés dans une vue de tableau à l’aide du shortcode de table de produits WooCommerce:

Produits associés shortcode

Les produits associés sont une liste de produits similaires au produit que le client consulte. Ceux-ci apparaîtront directement sous le produit principal sur la page du produit unique, mais vous pouvez utiliser le shortcode produits liés à WooCommerce pour répertorier les produits connexes ailleurs.

Vous pouvez envisager d’ajouter ceci à une zone élargie de votre boutique en ligne ou à un article de blog.

Ce shortcode fonctionne avec le plugin WooCommerce Quick View Pro. Lorsque vous utilisez les deux plugins ensemble, les boutons d’affichage rapide apparaîtront à côté des boutons Ajouter au panier. C’est idéal si vous affichez des produits variables ou si vous souhaitez que les clients puissent modifier la quantité avant de l’ajouter au panier. Les clients peuvent consulter des informations supplémentaires sur le produit, choisir les quantités et les variations et les ajouter au panier à partir d’une visionneuse rapide. Cela les maintient sur la page d’origine au lieu de les amener sur une page de produit séparée.

Si vous préférez afficher les boutons ajouter au panier pour plusieurs produits, ou si vous n’aimez pas le format par défaut avec la grande image, vous pouvez utiliser la table des produits WooCommerce à la place.

Choisissez les colonnes que vous souhaitez inclure dans le tableau des produits (assurez-vous d’inclure la colonne ajouter au panier!) et utilisez le shortcode pour l’insérer où vous le souhaitez. Utilisez l’option inclure pour choisir les produits à inclure, par exemple:

Puis-je afficher les shortcodes dans les shortcodes?

Parfois, vous voudrez peut-être imbriquer des shortcodes – par exemple, pour ajouter le shortcode WordPress audio player afin qu’il ajoute un lecteur de musique intégré à la liste des produits.

Vous ne pouvez normalement pas imbriquer les shortcodes WooCommerce. Cependant, vous pouvez y parvenir en utilisant le shortcode de table de produits WooCommerce pour lister les produits et ajouter d’autres shortcodes aux champs que vous affichez dans la table de produits.

Par exemple, disons que vous souhaitez lister 8 produits, avec un lecteur audio intégré pour chacun. Vous pouvez ajouter le lecteur audio aux champs de description courte ou longue du produit et les afficher sous forme de colonnes dans le tableau. Vous utilisez ensuite le shortcode de la table des produits WooCommerce pour répertorier ces produits spécifiques, y compris la colonne de description courte ou longue qui contient les lecteurs audio.

Pour que les shortcodes d’autres plugins fonctionnent dans la table des produits, assurez-vous d’activer l’option « Shortcodes » sur la page des paramètres de la table des produits WooCommerce:

shortcodes de page WooCommerce

Commençons par jeter un coup d’œil à certains des shortcodes de page WooCommerce les plus courants. Ceux-ci créent automatiquement des pages entières, telles que le panier ou le paiement.

Panier d’achat WooCommerce

Le shortcode de panier d’achat WooCommerce – – vous permet d’afficher le panier d’achat du client sur le front-end de votre site Web WordPress. Vous pouvez l’ajouter à des pages ou des publications WordPress ou l’afficher dans des zones élargies (telles que la barre latérale).

Cela ressemblera à ceci sur le front-end:

Lorsque vous installez et activez WooCommerce sur votre site Web WordPress, il crée automatiquement des pages pour vous – y compris la page du panier, qui utilise ce shortcode. Vous pouvez utiliser le shortcode pour ajouter le panier à des parties supplémentaires de votre site.

Page de paiement WooCommerce

Vous pouvez utiliser le shortcode de paiement WooCommerce – – pour générer une page de paiement complète sur votre site Web de commerce électronique. Cette page est également créée automatiquement pour vous lorsque vous installez WooCommerce. Vous pouvez également utiliser le shortcode pour insérer le paiement ailleurs (par exemple, sous une table de produits pour créer des achats d’une page).

Le shortcode de paiement WooCommerce comprend les détails de facturation, les détails de la commande et la possibilité d’expédier à une adresse différente.

Suivi des commandes WooCommerce

WooCommerce permet aux propriétaires de magasins de créer une page de suivi des commandes à l’aide du shortcode . Bien que cette page ne soit pas livrée avec WooCommerce prête à l’emploi, vous pouvez simplement créer une nouvelle page et insérer le shortcode dans l’éditeur de texte pour créer le vôtre. Cela devrait ressembler à ceci sur le front-end:

Page de compte utilisateur WooCommerce

WooCommerce crée automatiquement une page Mon compte lorsque vous l’installez pour la première fois sur votre site Web. Ceci est fait en utilisant le shortcode . Vous pouvez utiliser le shortcode pour insérer la zone de compte dans des emplacements supplémentaires sur votre site.

Le shortcode Mon compte sert également de formulaire de connexion et d’inscription pour les utilisateurs déconnectés. En conséquence, vous pouvez également l’utiliser comme un shortcode de connexion WooCommerce.