08 Oct 2020

Les shortcodes Woocommerce

Les shortcodes permettent d’intégrer facilement des éléments techniques dans une page. Ce sont des codes très courts entre crochets, que vous pouvez insérer dans l’éditeur classique ou Gutenberg de WordPress. Woocommerce possèdent des codes courts qui vous permet de construire et d’améliorer votre boutique en ligne.

C’est quoi exactement un code court sur WordPress ?

L’utilisation des shortcodes est très utile et parfois peu connue des utilisateurs.

Aujourd’hui, on utilise facilement des plugins pour pouvoir permettre l’application d’une fonction sur son site WordPress.
Cependant, il existe des codes courts qui appelle une fonction natif du cms, pour permettre d’afficher cet élément dans une page, un produit, un article…

Ils sont indiqués entre crochets comme ceci : [nomdushortcode]

On peut dans certains cas ajouter des conditions comme un id, le nombre de colonnes, etc. mais nous verrons ça un peu plus loin dans l’article.

Certains plugins vont vous permettre d’avoir un shortcode à intégrer n’importe où sur le site. Par exemple, le célèbre plugin de diaporama, Slider Revolution, génère un shortcode pour chaque slider créé.

Les shortcodes des pages Woocommerce

Quand vous installez Woocommerce, cela génère des pages qui permettent le bon fonctionnement de votre boutique en ligne.
Vous avez les pages panier, mon compte, paiement, boutique qui sont disponibles automatiquement après l’installation.

La page boutique qui présente les produits, n’utilise pas de shortcode, il faut le régler dans les paramètres de Woocommerce.

Dans ces pages, il y a des shortcodes pour permettre l’affichage des éléments dans la page.
Par exemple, dans la page mon compte, il y a le code qui permet d’avoir le fonctionnement des informations du compte, côté utilisateur (commandes, données personnelles etc).

Si par erreur vous supprimez une page Woocommerce, vous pouvez en recréer une dans les réglages du plugin. Vous définissez la fonction de cette page (panier, mon compte…) et dans la page vous collez le shortcode correspondant (voir ci-dessous).

Afficher le panier :

[woocommerce_cart]

Afficher la page mon compte :

[woocommerce_my_account]

La page paiement (validation de commande) :

[woocommerce_checkout]

Liste de plusieurs shortcodes Woocommerce

En dehors des pages, il y d’autres éléments que vous pouvez intégrer dans votre site avec un code court.
Voici une liste de code court que je trouve pertinents à utiliser.

Une page suivi de commande dans Woocommerce

Cette page est très utile pour l’expérience utilisateur. Elle est à adapter selon votre méthode de suivi de commande
Vous devez dans un premier temps créer la page. Ensuite vous devez utiliser ce shortcode :

[woocommerce_order_tracking]

Voici un aperçu des éléments qui vont apparaître en front-office :
formulaire suivi de commande woocommerce

Afficher vos produits n’importe ou dans WordPress

Je trouve que c’est une méthode très importante. Il faut savoir que vous pouvez intégrer des produits où vous voulez sur votre site WordPress.
Si vous avez un article blog qui parle d’un produit en particulier, vous pouvez l’afficher dans le corps du texte avec une image et un bouton “ajouter au panier”.

L’avantage ? Vous limitez le click client. Il ne devra pas se rendre dans la boutique pour acheter. Il peut faire l’action de mettre au panier depuis votre blog.

Aujourd’hui avec l’éditeur Gutenberg, c’est beaucoup plus simple d’intégrer des produits, il y existe même des plugins dédiés. Vous pouvez lire mon article Personnaliser facilement Woocommerce avec n’importe quel thème, je parle d’un plugin permettant d’avoir plus de fonctionnalités Woocommerce dans l’éditeur.

Hors plugin, vous pouvez utiliser ce shortcode :

[products]

Et à partir de cette base vous pouvez construire l’affichage de vos produits.

Si je veux afficher un produit en particulier, je peux ajouter une condition à mon shortcode avec une recherche par ID :

[products ids="32"]

A partir de là, je peux utiliser des attributs à mon shortcode pour développer mes produits, notamment avec :

  • category
  • limit
  • columns
  • order

Afficher un bouton d’achat produit sur votre WordPress

C’est une option très pratique si vous devez construire des landings pages pour promouvoir un produit. Cela peut aussi être valable quand vous écrivez un article de blog en rapport avec un élément en vente dans votre e-shop.

Contrairement au shortcode produit, celui-ci va faire apparaître uniquement le bouton ajouter au panier. Voici :

[add_to_cart id="33"]

Et voici le rendu si j’affiche le bouton pour vous permettre d’acheter un de mes services :

50,00 HTAjouter au panier

Je ne vais pas tout lister dans cet article, vous avez compris le principe et surtout qu’il y a vraiment tout d’expliqué avec des exemples sur le site Woocommerce.

Intégrer un shortcode dans l’éditeur Gutenberg

Dans l’éditeur classique, il suffit de placer les codes courts dans le texte et cela s’affiche directement sur le site.
Pour Gutenberg, il existe un bloc prévu à cet effet.

Il suffit de cliquer sur + et d’ajouter le bloc code court :

Dans votre page, le bloc s’affiche et vous avez un champ unique où vous devez écrire entre crochet ce code court.

Bien utilisés, les shorts codes vous permettent de placer du contenu Woocommerce à différent endroit stratégique sur votre site internet. Votre but est d’optimiser l’expérience utilisateur et de favoriser l’achat notamment avec un call to action produit. Cela vous sera aussi utile pour construire facilement vos pages.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *