What are WooCommerce Shortcodes and How to Use Them

Que sont les shortcodes WooCommerce et comment les utiliser

Si vous avez passé du temps à utiliser WordPress, je suis sûr que vous avez déjà découvert les shortcodes. Cependant, si vous ne savez pas ce que sont les shortcodes, je vais vous proposer une explication de base.

Qu'est-ce qu'un shortcode et comment utiliser les shortcodes dans WooCommerce ?

Pour éviter toute erreur, assurez-vous lorsque vous copiez-collez les shortcodes, de bien supprimer l'espace vide entre les parenthèses : – faux, - bien.

Un shortcode, comme son nom l’indique, est une courte chaîne de caractères généralement écrite entre crochets droits. Son objectif principal est d'aider les utilisateurs de WooCommerce à insérer ou à modifier du contenu dynamique sans avoir à quitter l'éditeur visuel.

Dans un langage encore plus simple, il vous aide à implémenter et à modifier les valeurs des éléments interactifs, des formulaires d'abonnement, des profils et paramètres utilisateur, de l'état du panier, des pages de paiement et à peu près tous les éléments auxquels vous pouvez penser.

Un bon exemple de shortcode WooCommerce serait :

– inséré dans l'éditeur de publication WordPress, ce shortcode renverra le panier WooCommerce et les éléments ajoutés par l'utilisateur actuel.

Il existe de nombreuses extensions et mods créés pour répondre aux besoins de codes courts dans WordPress, mais le plus populaire serait Visual Composer, qui dessert plus de 350 000 sites Web. Pour WooCommerce , il existe en revanche le plugin « WooCommerce Shortcodes » , une extension de la plateforme qui apporte un environnement plus visuel pour l'utilisation de shortcodes.

Une fois installé et activé, le plugin WooCommerce Shortcodes implémentera un bouton Woo dans votre éditeur de publication à partir duquel vous pourrez facilement gérer tous les shortcodes disponibles dans WooCommerce et modifier leurs valeurs selon vos préférences.

Quels codes courts sont inclus dans WooCommerce ?


J'ai commencé avec le cependant, il existe de nombreux autres codes courts disponibles et tous sont assez intuitifs. Une autre règle qui s'applique à tous les shortcodes dans WooCommerce, ils commencent tous par WooCommerce et sont suivis du soulignement et du nom réel du shortcode.

Il convient également de mentionner que certains de ces shortcodes permettent également de transmettre des arguments. Par exemple, le nombre de produits à afficher ou le nombre de catégories à afficher par page.

Page de paiement WooCommerce


Qu’est-ce que le shortcode de paiement WooCommerce ?

WooCommerce Checkout Shortcode est un morceau de code qui vous permet d'utiliser la page de paiement WooCommerce sur la page de paiement souhaitée. Le shortcode accepte deux arguments :
  1. L'ID du produit WooCommerce que vous souhaitez afficher dans la fenêtre de paiement, et
  2. Une valeur booléenne qui détermine si vous souhaitez ou non afficher le bouton « Commander maintenant » .

Comment trouver mon shortcode WooCommerce ?

C'est simple : je le posterai ci-dessous :



Profil utilisateur et administration du compte


Ce shortcode vous aidera à créer l'une des pages de magasin les plus importantes : la page Mon compte. Sur cette page, les clients peuvent consulter les commandes passées, modifier les adresses et les détails de paiement. Mon compte est le tableau de bord client central d'une boutique WooCommerce.

Comment trouver mon shortcode WooCommerce ?

Simple : copiez-collez simplement le shortcode ci-dessous sur la page « Mon compte » souhaitée :



 

Comme son nom l'indique, il présentera les détails du compte utilisateur actuel et les moyens de les modifier. En outre, sur cette page, l'utilisateur peut voir les détails des commandes précédentes. Il s'agit d'un shortcode qui accepte des arguments, vous pouvez donc choisir le nombre de commandes à afficher/page.

Le nombre de commandes par défaut est de 15, mais vous pouvez le définir sur le nombre de votre choix. Si vous souhaitez tous les afficher, votre shortcode devrait ressembler à ceci :



Si vous souhaitez afficher 10 commandes



Afficher les produits et les catégories de produits


Il existe de nombreuses variantes de codes courts WooCommerce pour vous aider à afficher les produits, afin que vous puissiez afficher les produits récents, les produits en vedette, un seul produit ou plusieurs produits de certaines catégories.

un. Comment afficher un seul produit dans WooCommerce ?

Pour ce faire, vous aurez besoin soit de l'identifiant unique du produit, soit du SKU ( Stock Keeping Unit ) du produit, un identifiant unique pour le produit.

 Exemple d'identification : 
Exemple de SKU : 

Comment trouver l’identifiant du produit WooCommerce ?

Accédez à Tableau de bord d'administration > Produits ( sous le bouton WooCommerce, dans le panneau de gauche ) > Passez la souris sur le titre d'un produit. L'ID du produit apparaîtra en premier, sur la même ligne avec « Quick Edit », « Edit », et ainsi de suite.

b. Comment afficher plusieurs produits WooCommerce spécifiques

Il s'agit d'un autre shortcode qui accepte les arguments et ce sont les arguments order et orderby. Sinon, ce shortcode est exactement le même que celui d’un seul produit, juste dans ce cas, vous séparez les ID et les SKU par virgule.

 Exemple d'identification :
 Exemple de SKU :

c. Comment afficher les produits vedettes de WooCommerce

Comme vous le savez peut-être, WooCommerce vous permet de configurer des produits phares, des produits que vous choisissez de promouvoir et vous pouvez désormais décider lesquels vous affichez et combien vous souhaitez en afficher sur une page.

Pour ce faire, nous utilisons le petit code. Est un shortcode dynamique qui accepte des arguments comme per_page et columns .

Donc pour l'utiliser :

exemple : Afficher 15 produits phares sur 3 colonnes

d. Comment afficher les produits récents WooCommerce

Si vous souhaitez afficher les derniers ajouts de produits de votre boutique WooCommerce, vous pouvez profiter de l'option shortcode qui autorise 2 arguments : per_page et columns

exemple : Afficher les 30 derniers produits de votre boutique sur 3 colonnes

e. Page complète du produit WooCommerce

C'est assez similaire à l'affichage d'un seul produit, vous afficherez simplement une page complète d'un seul produit.

 Exemple d'identification :

 Exemple de SKU :

F. Afficher toute la catégorie de produits

Vous pouvez afficher tous les produits d'une certaine catégorie en utilisant le petit code. Le shortcode accepte 5 arguments :

  • per_page – nombre de messages par page
  • colonnes – nombre de colonnes pour les produits
  • orderby – titre, date, etc.
  • ordre – croissant ou décroissant
  • catégorie – la catégorie de produits que vous souhaitez présenter

exemple : Afficher 16 produits de la catégorie Carnets classés par date, croissant sur 4 colonnes

g. Comment afficher les produits les plus vendus dans WooCommerce ?

Ce sont les produits avec le plus grand nombre de ventes. Vous pouvez les afficher en utilisant petit code. Il accepte l'argument per_page .

exemple : Affichez les 15 produits les plus vendus dans votre magasin

h. Afficher uniquement les produits disponibles en vente

– affichera uniquement les produits disponibles à la vente. Il accepte 4 arguments :

  • par page
  • Colonnes
  • commandé par
  • commande

exemple : afficher 20 produits soldés classés par titre dans un ordre décroissant sur 2 colonnes

je. Afficher les produits WooCommerce associés

C’est un bon moyen d’augmenter le nombre d’impressions de pages sur votre site Web et de générer davantage de notoriété pour les produits moins populaires. Vous pouvez afficher les produits associés en utilisant le petit code.

Le shortcode accepte 3 arguments :

  • par page
  • Colonnes
  • commandé par

exemple : Pour afficher 5 produits associés, vous utilisez simplement le shortcode

Bouton et URL Ajouter au panier


Un shortcode très important, qui vous aide à personnaliser l'apparence de votre bouton « Ajouter au panier » WooCommerce et à le placer là où vous le jugez nécessaire. Vous pouvez le placer sur d'autres articles ou pages car cela dépend du produit.

Ainsi, pour afficher un bouton ajouter au panier, vous devez utiliser le shortcode qui supporte 3 arguments : id , style et sku.

exemple : Pour afficher un bouton d'ajout au panier pour un produit portant le numéro d'identification 25 avec le style border:2px solid #ccc; arrière-plan : #999 ; couleur : #000 ; 12 pixels ; avoir SKU – pro
 id=”25″ style=”border:2px solid #ccc; arrière-plan : #999 ; couleur : #000 ; 12 pixels ; » sku=”pro” >

Si vous n'avez pas besoin du bouton pour ajouter au panier et que vous avez seulement besoin d'une URL, vous pouvez utiliser le shortcode qui prend en charge l'identifiant et le sku .

 exemple : id=”25″ sku=”pro”>

Cela renverra l' URL complète permettant à l'utilisateur d'ajouter un certain produit avec l' id = 25 dans son panier.


Gardez à l'esprit

Lorsque vous utilisez des shortcodes WooCommerce ainsi que des shortcodes WordPress, assurez-vous de ne pas les placer entre les et balises car WordPress les confondra avec le code et n’exécutera pas votre shortcode. Aussi, comme je l’ai précisé au début de l’article, veillez à bien supprimer l’espace vide entre les parenthèses : – faux, - bien.