Shortcodes WooCommerce : Un guide complet

Faits marquants

• Personnalisation facile – Ajoutez des éléments dynamiques WooCommerce sans codage.
• Installation rapide – Copiez et collez les shortcodes dans les pages sans effort.
• Affichage flexible des produits – Présentez les produits en vedette, les produits récents ou les produits spécifiques à une catégorie.
• Meilleure expérience utilisateur – Améliorez la navigation grâce au suivi des commandes et aux boutons de panier.
• Dépannage simple – Corrigez les erreurs courantes à l’aide de contrôles syntaxiques de base.
• Autres options – Utilisez des blocs ou des plugins WooCommerce pour une personnalisation plus poussée.
• L’hébergement compte – Un hébergeur fiable comme Bluehost garantit des performances optimales.

Introduction

WooCommerce est l’une des plateformes de commerce électronique les plus populaires au monde. Elle offre un large éventail de fonctionnalités qui vous permettent de vendre des produits et des services en ligne.

Mais saviez-vous qu’il existe une fonction qui peut vous aider à tirer encore plus de profit de votre boutique de commerce électronique ?

Il s’agit des shortcodes.

Si vous ne les connaissez pas, ne vous inquiétez pas. Nous allons vous expliquer ce qu’ils sont et comment les utiliser pour optimiser votre boutique en ligne. En outre, nous explorerons des méthodes efficaces pour résoudre les erreurs de shortcode.

Prêt à tout apprendre sur les shortcodes de WooCommerce ? Plongeons dans le vif du sujet.

Qu’est-ce que les shortcodes WooCommerce ?

Les shortcodes WooCommerce sont des extraits de code WordPress qui exécutent une fonction spécifique sur votre site web. Ces morceaux de code ont des fonctionnalités prédéfinies et ont été créés spécifiquement pour WooCommerce.

Tous les codes courts ont la même structure : des textes courts entre crochets. Si plusieurs textes sont utilisés, ils sont reliés entre eux par des traits de soulignement et des virgules. Une fois que vous avez compris la syntaxe ou la fonction de gestion, vous pouvez commencer à ajouter des codes courts aux pages de votre site web.

Les shortcodes de WooCommerce peuvent être utilisés avec des paramètres ou des arguments (args), ce qui vous permet de personnaliser davantage votre site web. Un paramètre est l’attribut ajusté par un shortcode, tandis qu’un argument est la valeur assignée à cet attribut.

Par exemple, si vous utilisez un shortcode produit, vous pouvez définir le nombre de produits à afficher (c’est-à-dire le paramètre) et le nombre de colonnes souhaitées (c’est-à-dire l’argument).

Voici un aperçu des paramètres et arguments d’un shortcode WooCommerce :

[related_products limit= »4″]

Dans cet exemple, « limit » est le paramètre, tandis que « 4 » est l’argument. Les paramètres vous permettent de modifier les shortcodes afin qu’ils puissent fonctionner de différentes manières selon vos besoins ou exigences. Cependant, tous les shortcodes de WooCommerce n’utilisent pas de paramètres.

Pourquoi utiliser les shortcodes de WooCommerce ?

Les shortcodes WooCommerce vous permettent de personnaliser votre boutique en ligne en ajoutant diverses fonctionnalités à vos articles et pages sans aucune expérience en matière de codage. En utilisant un code préexistant, vous pouvez gagner un temps considérable qui aurait été consacré à l’écriture de votre propre code.

Les shortcodes sont un moyen rapide et pratique d’améliorer la conception de votre site web pour augmenter les conversions. Ces extraits de code vous permettent de créer une expérience d’achat supérieure et de différencier votre marque de celle de vos concurrents.

Comment utiliser les shortcodes de WooCommerce

Maintenant que vous savez ce que sont les shortcodes WooCommerce et pourquoi ils sont importants, voyons comment les utiliser. L’ajout de shortcodes à votre boutique WooCommerce est assez simple, même si vous n’avez aucune connaissance en codage.

Toutefois, avant d’apporter des modifications à votre site web, il est préférable de sauvegarder vos données. Vous pourrez ainsi rétablir l’état antérieur de votre site en cas de problème.

Si vous utilisez l’éditeur classique, il vous suffit de copier et de coller le shortcode choisi sur la page souhaitée.

D’autre part, l « éditeur de blocs Gutenberg vous oblige à ajouter le shortcode à un bloc de shortcodes. Dans ce tutoriel, nous vous montrerons comment ajouter des shortcodes à votre site web WordPress en utilisant l » éditeur Gutenberg.

Commençons :

1. Connectez-vous à votre tableau de bord WordPress.
2. Allez dans « Pages », qui se trouve dans le menu de gauche, et sélectionnez « Ajouter un nouveau ». Vous pouvez utiliser une page nouvelle ou existante.
3. Cliquez sur l’icône noire (+) pour créer un bloc.

4. Une fois que vous avez cliqué sur l’icône plus, vous verrez le bloc de codes courts. Cliquez dessus pour l’ajouter à l’éditeur. Vous pouvez également taper [/] sur la page et rechercher « shortcode ».

5. Tapez ou collez le code court souhaité dans le champ prévu à cet effet.

6. Prévisualisez la page pour vous assurer que tout se passe bien.
7. Cliquez sur le bouton « Publier » dans le coin supérieur droit de la page.

Voilà, c’est fait ! Vous avez ajouté avec succès un shortcode WooCommerce à votre page. Maintenant que vous savez comment utiliser ces extraits de code, explorons les différents shortcodes que vous pouvez utiliser pour améliorer votre site web WordPress.

Les shortcodes WooCommerce et leur utilisation

Il existe de nombreux shortcodes WooCommerce, mais ils ont tous des fonctions différentes. Nous avons compilé une liste des shortcodes les plus populaires que vous pouvez utiliser pour améliorer les fonctionnalités de votre boutique en ligne.

1. Shortcodes pour les pages WooCommerce

Si vous êtes passé par l’assistant de configuration de WooCommerce, vous avez peut-être remarqué que les shortcodes de page sont générés automatiquement. Voici les shortcodes de page les plus populaires et comment les utiliser.

Chariot

Le shortcode WooCommerce cart simplifie le processus d’ajout d’une page de panier à votre boutique en ligne. Il crée une page de panier par défaut, de sorte que vous n’avez pas besoin d’en créer une à partir de zéro.

En plus d’afficher tous les produits que vos clients ont ajoutés à leur panier, ce shortcode affiche le sous-total, ainsi que la quantité et le prix de chaque produit. Le shortcode WooCommerce cart est le suivant :

[woocommerce_cart]

Suivi des commandes

Ce shortcode crée un formulaire par défaut que les acheteurs en ligne peuvent utiliser pour vérifier l’état de leurs commandes. Une fois le formulaire créé, les clients doivent saisir leur numéro de commande et leur adresse électronique de facturation pour suivre leur commande.

Pour créer un formulaire de suivi de commande, entrez le shortcode ci-dessous :

[woocommerce_order_tracking]

Voici à quoi ressemblerait le formulaire de suivi des commandes sur la page d’accueil de votre boutique :

Mon compte

Ce shortcode affiche les détails du compte d’un client. Il permet aux clients de consulter, de modifier et de mettre à jour leurs informations personnelles. Par exemple, ils peuvent consulter leurs commandes précédentes, modifier leur mot de passe et leur adresse électronique et se connecter et se déconnecter de leur compte.

Le shortcode à utiliser est le suivant :

[woocommerce_my_account]

Sortie de caisse

Ce shortcode WooCommerce crée une page de paiement. En tant que tel, il inclut des champs pour que les clients puissent ajouter leurs détails de facturation et leurs informations de livraison. Ce shortcode intègre également le bouton « Passer commande ».

Pour ajouter la page de paiement à votre site WooCommerce, entrez le shortcode suivant :

[woocommerce_checkout]

Avec plus de 70% des paniers d’achat en ligne abandonnés, la personnalisation de votre page de paiement WooCommerce est un moyen efficace d’optimiser le taux de conversion de votre site web.

Vous pouvez personnaliser votre page de paiement en utilisant des plugins tels que le YITH WooCommerce Checkout Manager. Ce plugin vous permet de modifier les champs existants et d’ajouter des champs personnalisés pour rationaliser le processus de paiement.

2. Raccourcis pour les produits WooCommerce

Les shortcodes produits de WooCommerce vous permettent de créer des pages produits personnalisées et d’afficher les produits où vous le souhaitez. Voyons comment vous pouvez les utiliser pour afficher vos produits de différentes manières sur votre site web.

Produits

Affichez n’importe quel article en stock à l’aide du shortcode products:

[produits]

La page des produits peut être personnalisée pour afficher les produits par ordre croissant (ASC) ou décroissant (DESC).

Par exemple, si vous souhaitez répertorier les produits dans l’ordre croissant, le shortcode se présente comme suit :

[products order= »ASC »]

Si vous souhaitez personnaliser davantage votre site, vous avez la possibilité de restreindre le nombre de produits affichés :

[products limit= »5″ order= »ASC »]

Les autres paramètres de ce shortcode sont les suivants :

• Commande par
• Catégorie
• Colonnes
• Paginer
• SKU
• Étiquette
• Classe
• Meilleures ventes
• Top_rated
• En vente

Il convient de mentionner que les paramètres tels que best_selling, top_rated et on_sale ne doivent pas être utilisés ensemble.

Produits récents

Ce shortcode vous permet d’afficher les produits récents sur votre site web. Si vous avez lancé de nouveaux produits intéressants, vous pouvez utiliser ce shortcode pour attirer l’attention sur eux et inciter les clients à faire un achat.

Supposons que vous souhaitiez afficher vos six produits les plus récents sur trois lignes. Le shortcode pour cela serait :

[products limit= »6″ columns= »3″ orderby= »id » order= »DESC » visibility= »visible »]

Ce shortcode répertorie les produits sur la base de leurs identifiants uniques, qui sont générés lors de la création des pages de produits.

Produits vedettes

Si vous souhaitez attirer l’attention de vos clients sur certains produits, ce shortcode WooCommerce est fait pour vous. Le shortcode de base est :

[featured_products]

Cependant, si vous souhaitez afficher deux éléments sur une même ligne, le shortcode se présentera comme suit :

[featured_products limit= »2″ columns= »2″]

Produits en vente

Si vous souhaitez présenter des produits en promotion, les shortcodes de WooCommerce peuvent vous être d’une grande aide. Pour afficher trois produits en promotion classés par ordre de popularité, vous pouvez utiliser ce shortcode :

[products limit= »3″ columns= »3″ orderby= »popularity » on_sale= »true »]

Produits les mieux notés

Lorsqu’ils recherchent des produits qui répondent à leurs besoins, la plupart des clients s’intéressent aux articles les mieux notés. C’est là qu’intervient le shortcode « Produits les mieux notés ». Il vous permet d’afficher les articles les mieux notés dans votre boutique en ligne.

Le shortcode à utiliser est le suivant :

[top_rated_products]

Ce shortcode ne doit pas être utilisé en conjonction avec on_sale ou best_selling.

Produits les plus vendus

Les shortcodes pour les produits les plus vendus vous permettent de présenter vos produits les plus vendus. Vous pouvez les afficher sur votre page d’accueil afin d’attirer l’attention sur eux lorsqu’un client potentiel visite votre site web.

Si vous souhaitez présenter une grille à quatre colonnes de vos quatre produits les plus vendus, le shortcode est le suivant :

[products limit= »4″ columns= »4″ best_selling= »true »]

Étiquettes du produit

Les étiquettes de produits vous permettent d’afficher uniquement les produits portant une étiquette particulière. Le shortcode pour cette fonction est assez simple. Par exemple, pour afficher les produits portant l’étiquette « pantalon », vous pouvez utiliser le code court :

[products tag= »pants »]

3. Shortcodes pour les catégories de produits WooCommerce

Un autre shortcode WooCommerce couramment utilisé est le shortcode de catégorie de produits. Voici les deux principaux shortcodes et leurs cas d’utilisation.

Catégorie de produit

Ce shortcode vous permet d’afficher les produits d’une catégorie spécifique sur n’importe quelle page. Si vous souhaitez attirer des clients vers une nouvelle catégorie de produits, ce shortcode peut s’avérer très utile :

[product_category]

Par exemple, pour afficher les produits de la catégorie des pantalons, vous pouvez utiliser ce shortcode :

[product_category category= »pants »]

Vous pouvez choisir de le modifier davantage. Par exemple, vous pouvez afficher six produits de la catégorie des pantalons sur trois colonnes et dans l’ordre décroissant à l’aide de ce shortcode :

[product_category category= »pants » limit= »6″ columns= »3″ order= »DESC »]

Vous pouvez également ajouter d’autres catégories de produits et les séparer par des virgules. Dans l’exemple ci-dessous, nous ajouterons les vestes à la catégorie des pantalons.

[product_category category= »pants,jackets »]

Catégories de produits

Le shortcode pour les catégories de produits vous permet d’afficher toutes vos catégories de produits en une seule fois :

[product_categories]

Ainsi, si vous avez plusieurs catégories comme les pantalons, les t-shirts et les vestes, ce shortcode affichera toutes ces options.

Ce shortcode peut également être utilisé pour mettre en évidence des identifiants de catégories spécifiques. Par exemple, ce shortcode peut être utilisé pour mettre en évidence des identifiants de catégories spécifiques :

[product_categories ids= »5,6,7″]

4. Autres shortcodes WooCommerce utiles

En plus des shortcodes WooCommerce listés ci-dessus, voici d’autres shortcodes utiles à ajouter à votre site web.

Produits apparentés

Comme son nom l’indique, ce shortcode vous permet d’afficher des produits liés aux produits qu’un client consulte sur votre site web. Le shortcode de base est :

[related_products]

Il accepte des arguments tels que limit, orderby et columns. Par exemple, vous pouvez afficher quatre produits apparentés en ajoutant un paramètre limit au shortcode :

[related_products limit= »4″]

Le paramètre limite contrôle le nombre de produits apparentés que vous souhaitez afficher pour chaque client.

Voici un autre exemple :

[related_products limit= »4″ columns= »4″]

Cela vous permet de présenter des produits connexes dans une grille contenant quatre produits par ligne.

Page produit

Le shortcode page produit vous permet d’afficher une seule page produit par ID ou SKU. Supposons que vous souhaitiez afficher un produit dont l’ID est 28.

Le code court serait le suivant :

[product_page id= »28″]

Si vous souhaitez rédiger des articles de blog, utilisez ce shortcode pour intégrer un produit spécifique dans votre article, ce qui permettra à vos lecteurs d’y accéder facilement.

Pour trouver l’identifiant d’un produit, connectez-vous à votre tableau de bord d’administration WordPress et accédez à « Produits » > « Tous les produits ». Survolez le titre d’un produit spécifique et vous verrez l’identifiant unique du produit.

Tableau des produits

Avec WooCommerce Product Table, vous pouvez ajouter des tableaux de produits à votre boutique en ligne et offrir à vos clients une expérience d’achat agréable sur une seule page. Les clients peuvent trouver les produits dont ils ont besoin, sélectionner les quantités souhaitées et ajouter les produits au panier sans avoir à visiter plusieurs pages.

En outre, ce plugin comprend des tonnes d’options de personnalisation. Par exemple, vous pouvez sélectionner les catégories de produits que vous souhaitez présenter. Vous pouvez également choisir d’afficher les variations de produits à l’aide de menus déroulants.

Enfin, vous pouvez afficher le tableau des produits sur n’importe quelle section de votre site web à l’aide du shortcode :

[cwpt_table]

Ajouter au panier

Le shortcode add-to-cart vous permet d’afficher le bouton add-to-cart pour un seul produit. Il s’agit d’une fonctionnalité utile lorsque vous ne souhaitez pas afficher tous les détails du produit.

Un article de blog est un endroit idéal pour utiliser le bouton « ajouter au panier ». Le shortcode WooCommerce pour cela est :

[add_to_cart id= »99″]

Comment dépanner les shortcodes de WooCommerce

Si vous rencontrez des problèmes lors de l’utilisation des shortcodes de WooCommerce, voici quelques conseils utiles pour les résoudre.

• Vérifiez si vous avez intégré le shortcode entre les balises <pre>. Si c’est le cas, allez dans l’éditeur de texte pour supprimer ces balises indésirables.
• Veillez à ce que les guillemets soient droits (« ) et non frisés ( »).
• Utilisez des crochets.
• Veillez à ce que chaque valeur d’attribut, qui suit le signe égal, soit placée entre guillemets.
• Utilisez la dernière version de WooCommerce.
• Changez de thème, car votre thème actuel peut être en conflit avec le shortcode WordPress que vous souhaitez utiliser.
• Si vous pensez qu’un plugin est à l’origine de l’erreur, désactivez chaque plugin l’un après l’autre et continuez à tester le shortcode pour voir s’il fonctionne.

Alternatives aux shortcodes WooCommerce

Si vous cherchez d’autres moyens de présenter vos produits sur votre site web et de personnaliser votre boutique, voici quelques alternatives aux shortcodes WooCommerce que vous pouvez utiliser.

Blocs WooCommerce

Les blocs WooCommerce sont une excellente alternative aux shortcodes. Ils offrent plusieurs blocs que vous pouvez utiliser pour construire et personnaliser votre boutique eCommerce.

En utilisant les blocs WooCommerce, vous pouvez afficher une grille de vos produits les plus vendus, mettre en évidence les avis de certaines catégories, afficher tous les produits de votre magasin et permettre aux acheteurs de consulter leur panier à partir de n’importe quelle page.

Plugins de shortcodes pour WooCommerce

Plusieurs plugins disponibles sur le marché vous permettent d’ajouter des shortcodes à votre site web sans aucune connaissance technique. Intense est l’un de ces plugins. Il propose plus de 100 shortcodes et 19 types de posts personnalisés.

Les types d’articles personnalisés vous permettent d’étendre le marketing de contenu au-delà des seuls articles de blog. Ce plugin est adapté aux mobiles et a été créé en tenant compte des performances de votre site web, ce qui vous aide à créer une expérience utilisateur de qualité supérieure.

Hébergement Bluehost WooCommerce : Alimenter votre boutique en toute simplicité

Si vous cherchez un moyen simple de mettre en place et de gérer votre boutique en ligne, les plans d’hébergement WooCommerce de Bluehost valent la peine d’être pris en considération. Conçus spécifiquement pour les entreprises de commerce électronique, ces plans sont livrés avec WooCommerce préinstallé, de sorte que vous pouvez commencer à vendre immédiatement, sans avoir à vous soucier des aspects techniques.

De plus, vous bénéficiez d’un domaine gratuit la première année, d’un certificat SSL gratuit pour des transactions sécurisées et d’une assistance clientèle 24 heures sur 24, 7 jours sur 7, au cas où vous auriez besoin d’un coup de main. Que vous lanciez votre première boutique en ligne ou que vous mettiez à niveau une page de boutique existante, Bluehost fournit une base solide avec des performances fiables et des outils intégrés pour faciliter la gestion de la boutique.

Vous voulez vous concentrer sur la croissance de votre entreprise au lieu de vous occuper des problèmes d’hébergement ? L’hébergement WooCommerce de Bluehost rend cela possible.

Dernières réflexions

Les shortcodes de WooCommerce vous permettent de mettre en avant les caractéristiques et les avantages des produits, de fournir un accès rapide aux informations, de simplifier le processus de paiement et d’atteindre vos objectifs commerciaux. Ce niveau de personnalisation est difficile à battre.

Dans un contexte d’e-commerce très concurrentiel, il est important de construire votre entreprise sur des bases solides. Pour cela, il faut choisir un fournisseur d’hébergement web fiable, comme Bluehost.

Nos plans d’hébergement WooCommerce sont dotés d’outils et de fonctionnalités qui simplifient la création et la gestion de sites Web. De plus, vous aurez accès à une assistance en temps réel, ce qui vous permettra d’obtenir de l’aide lorsque vous en aurez besoin.

Contactez-nous dès aujourd’hui pour découvrir comment nous pouvons vous aider à développer votre boutique en ligne.

FAQ