Un guide simple sur les codes courts WooCommerce

Vous avez peut-être entendu parler des shortcodes WooCommerce et les avez probablement également utilisés. Mais vous ne savez peut-être pas comment et où cela fonctionne.

Si vous souhaitez libérer tout le potentiel de WooCommerce, vous voudrez certainement vous familiariser avec les codes abrégés.

Pourquoi? Parce que les shortcodes alimentent une grande partie des fonctionnalités du plugin, y compris toutes les pages comme la page du panier, la page de paiement, les pages de produits, les pages de catégories de produits, la page Mon compte.

Et si vous comprenez mieux le fonctionnement des codes abrégés WooCommerce, vous pouvez facilement créer des pages de vente hautement personnalisées et créer un site de boutique en ligne incroyablement puissant pour toutes les situations.

Que sont les shortcodes WooCommerce, pourquoi les utiliser, comment les utiliser… nous les couvrirons tous dans cet article.

Que sont les shortcodes WooCommerce ?

En termes simples, les codes abrégés dans WooCommerce sont de courts morceaux de code/texte entourés de crochets qui ressemblent à quelque chose comme [ceci].

Ces shortcodes sont en fait d'énormes quantités de code condensées dans une phrase plus courte qu'un propriétaire de magasin WooCommerce non-technicien peut utiliser.

Les shortcodes peuvent réaliser tout ce que vous aimez :

• Afficher le paiement sur n'importe quelle page
• Présentez les best-sellers sur votre page d'accueil
• Proposer des produits liés lorsque les clients manifestent un intérêt pour un produit
• Afficher la vidéo et l'audio
• Ajouter un curseur créatif
• Insérer les boutons Ajouter au panier
• Mettez en surbrillance les produits vedettes dans les blocs Gutenberg, les barres latérales et d'autres zones widgetisées

… toute autre chose

Maintenant que les bases des shortcodes sont comprises, voyons comment vous les ajoutez à votre boutique.

Comment ajouter des shortcodes à votre boutique WooCommerce ?

Gérer une boutique WooCommerce prend du temps pour tout le monde. Gestion du magasin, création d'offres, bons de réduction, améliorations de la caisse… il y a des centaines de tâches à surveiller. Pour gagner du temps, les shortcodes sont pratiques.

Les codes abrégés améliorent également la précision, réduisant les erreurs associées à l'écriture de codes longs.

Il existe trois façons d'ajouter des shortcodes :

Insertion de shortcodes à l'aide de l'éditeur de blocs Gutenberg

Avec l'éditeur Gutenberg, ajouter des shortcodes est facile.

• Accédez à votre panneau d'administration WordPress.
• Cliquez sur Pages > Add New . Vous pouvez également modifier n'importe quelle page existante.



• Cliquez sur le signe plus pour ajouter un nouveau bloc, tapez 'shortcode' dans la barre de recherche et sélectionnez le bloc Shortcode .
• Maintenant, tapez votre shortcode dans le champ. Par exemple – [products] .
• Cliquez sur le bouton bleu Publish ou Update à jour en haut à droite de la page et vos produits apparaîtront désormais sur votre nouvelle page.

Insertion de shortcodes à l'aide de l'éditeur classique/éditeur WordPress

L'ajout de codes abrégés avec l'éditeur Classic est également facile. Ajoutez simplement les shortcodes, en veillant à inclure les crochets ([ et ]).

Insertion de shortcodes à l'aide d'un widget

Pour ajouter un shortcode à une zone widgetisée, ajoutez simplement un widget Texte avec le shortcode. Ensuite, chargez la page pour voir le contenu du shortcode sur votre barre latérale.

Comment fonctionnent les shortcodes WooCommerce ?

Bien qu'ils aient l'air simples, les shortcodes sont en fait assez puissants ! Passons en revue les différentes parties qui composent un shortcode.

Le shortcode lui-même :
Comme mentionné ci-dessus, les shortcodes sont un seul mot ou un ensemble de mots liés à des traits de soulignement, comme ceci :

• [products]
• [woocommerce_order_tracking]

Alors que certains shortcodes fonctionneront seuls, d'autres nécessitent certains paramètres.

Paramètres :
Les paramètres ou arguments (appelés Args dans certaines documentations de WooCommerce) sont des moyens de rendre le shortcode plus spécifique. Par exemple, en ajoutant id = "36" au [add_to_cart] , il créera un bouton "Ajouter au panier" pour le produit avec l'ID 36.

Liste des shortcodes WooCommerce intégrés

Il existe cinq shortcodes essentiels disponibles avec WooCommerce.

1. [woocommerce_cart] – affiche la page du panier
2. [woocommerce_checkout] – affiche la page de paiement
3. [woocommerce_my_account] – affiche la page du compte utilisateur
4. [woocommerce_order_tracking] – affiche le formulaire de suivi de commande
5. [products] – affiche les produits

Dans la plupart des cas, ces shortcodes seront automatiquement ajoutés aux pages via l'assistant d'intégration de WooCommerce et n'ont pas besoin d'être utilisés manuellement.

Regardons chaque shortcode et comment les utiliser.

[woocommerce_cart]

Ce shortcode ajoute la fonctionnalité de panier WooCommerce à la page. Il affichera tous les produits que l'utilisateur a ajoutés à son panier. Il n'y a aucun paramètre à ajouter à ce shortcode.

[woocommerce_checkout]

Comme son nom l'indique, ce shortcode affiche la page de paiement. Assurez-vous que cette page est configurée correctement. Après tout, si les clients ne trouvent pas facilement la page de paiement ou trouvent le processus de paiement encombrant, ils n'achèteront rien.

Aucun paramètre supplémentaire à ajouter à ce shortcode également.

[woocommerce_my_account]

Ce shortcode affiche la page Mon compte contenant toutes les informations du client, ainsi que ses précédentes commandes dans votre boutique.

Par défaut, le nombre de commandes affichées est fixé à 15. Vous pouvez le modifier pour afficher toutes les commandes en faisant le chiffre -1. Vous pouvez ajouter des paramètres ou des arguments à ce shortcode comme ceci :

déployer(
     'utilisateur_actuel' => ''
 )

 woocommerce_my_account

L'argument de l'utilisateur actuel est automatiquement défini à l'aide get_user_by( 'id', get_current_user_id() ) .

[woocommerce_order_tracking]

Ce shortcode crée une page de "suivi des commandes", qui permet aux clients de voir l'état actuel de leurs commandes. Il n'y a pas d'autres arguments.

[des produits]

Le shortcode [products] est l'un des shortcodes les plus robustes. Il vous permet d' afficher les produits par ID de publication, SKU, attributs, catégories avec prise en charge de la pagination, du tri aléatoire et des balises de produit .

Il a remplacé le besoin de plusieurs codes abrégés tels que [featured_products] , [sale_products] , [best_selling_products] , [recent_products] , [product_attribute] et [top_rated_products] utilisés dans les versions WooCommerce inférieures à 3.2.

Il existe une tonne de paramètres qui vous permettent de personnaliser les types et les quantités de produits affichés.

Pour ajouter un paramètre, écrivez simplement son nom, suivi du signe égal et de la valeur souhaitée entre guillemets. Assurez-vous que cela se trouve à l'intérieur du shortcode [products] .

Par exemple, pour afficher cinq produits de la catégorie vêtements, utilisez ce shortcode : [products limit="5" category="clothing"] .

Attributs de produit disponibles

Les attributs suivants peuvent être utilisés conjointement avec le shortcode des produits. Quelques paramètres vous aident à contrôler la mise en page de vos pages de produits. Examinons-les avec des exemples, en commençant par les attributs de produit d'affichage.

Afficher les attributs du produit

• limit – contrôle le nombre de produits affichés. Par défaut à et -1 (afficher tout) lors de la liste des produits, et -1 (afficher tout) pour les catégories. Exemple – [products limit="3"]
• colonnes – contrôle le nombre de colonnes à afficher. La valeur par défaut est 4. bien que cela se réduise généralement à un nombre plus petit sur mobile (selon votre thème.) Exemple – [products columns="3"]
• paginer – détermine si les pages de résultats de vos produits seront paginées. Utilisé en conjonction avec la limite. La valeur par défaut est false, définie sur true pour paginer. Exemple – [products paginate="true"]
• orderby – personnalise la façon dont vos produits sont commandés. La valeur par défaut est le titre du produit. Une ou plusieurs options peuvent être passées en ajoutant les deux slugs avec un espace entre eux. Les options disponibles sont :
  • date – la date à laquelle le produit a été publié.
  • id – l'identifiant de publication du produit.
  • menu_order - l'ordre du menu, s'il est défini (les nombres inférieurs s'affichent en premier).
  • popularité – le nombre d'achats.
  • rand - commandez les produits au hasard lors du chargement de la page (peut ne pas fonctionner avec les sites qui utilisent la mise en cache, car cela pourrait enregistrer une commande spécifique).
  • note - la note moyenne du produit.
  • title – le titre du produit. Exemple – [products orderby="date"]
• skus – ajoutez des SKU spécifiques séparés par une virgule. Exemple – [products skus="shirt-black-small, shirt-black-large"]
• catégorie - afficher les produits qui ont un certain slug de catégorie. Vous pouvez ajouter plusieurs catégories en plaçant une virgule entre elles. Exemple – [products category="watches, purses"]
• tag – affiche les produits qui ont un certain slug de tag. Vous pouvez ajouter plusieurs balises en plaçant une virgule entre elles. Exemple – [products tag="rainy, kids"]
• order – indique si l'ordre du produit est croissant (ASC) ou décroissant (DESC), en utilisant la méthode définie dans orderby. La valeur par défaut est ASC. Exemple – [products order="DESC"]
• classe - ajoute une classe wrapper HTML afin que vous puissiez modifier la sortie spécifique avec un CSS personnalisé. Exemple – [products class="custom-element"]
• on_sale – affiche les produits soldés. Ne l'utilisez pas en conjonction avec best_seller ou top_rated. Exemple – [products on_sale="true"]
• best_selling – affiche les produits qui se vendent le plus. Ne l'utilisez pas en conjonction avec on_sale ou top_rated. Exemple – [products best_selling="true"]
• top_rated – affiche les produits les mieux notés. Ne l'utilisez pas en conjonction avec on_sale ou best_selling. Exemple – [products top_rated="true"]

Ensuite, les attributs du produit de contenu.

Attributs du produit de contenu

Ces shortcodes peuvent être utilisés pour afficher les produits en fonction de leurs attributs - taille, couleur, etc.

• attribut – affiche les produits avec un certain attribut.
• termes – affiche les produits avec certains termes liés à l'attribut. Ceci doit être utilisé avec l'attribut ci-dessus. Par exemple, l'attribut peut être des couleurs et les termes sont rouge, bleu ou jaune.
• termes_opérateur - vous permet d'effectuer des calculs pour déterminer quels termes seront inclus. De même, ils doivent être utilisés avec des attributs et des termes. Les options disponibles sont :
  • ET – affiche les produits de tous les attributs choisis.
  • IN – affiche les produits avec l'attribut choisi. Il s'agit de la valeur par défaut de l'opérateur Terms_operator.
  • NOT IN – affiche les produits qui ne sont pas dans les attributs choisis.
• tag_operator – identique au terme opérateur ci-dessus, à l'exception des balises. Les options disponibles sont :
  • ET – affiche les produits de toutes les balises choisies.
  • IN – affiche les produits avec les balises choisies. Il s'agit de la valeur par défaut de tag_operator.
  • NOT IN – affiche les produits qui ne sont pas dans les balises choisies.
• visibilité – affiche les produits en fonction de leur visibilité sur votre site. Les options disponibles sont :
  • visible - produits visibles sur la boutique et les résultats de recherche. Il s'agit de l'option de visibilité par défaut.
  • catalogue – produits visibles uniquement dans la boutique mais pas dans les résultats de recherche.
  • recherche – produits visibles uniquement dans les résultats de recherche mais pas dans la boutique.
  • caché - produits cachés à la fois de la boutique et de la recherche et accessibles uniquement par URL directe.
  • en vedette - produits marqués comme produits en vedette.
• catégorie - afficher les produits qui ont un certain slug de catégorie.
• tag – affiche les produits qui ont un certain slug de tag.
• cat_operator – vous permet d'effectuer des calculs pour déterminer quels produits seront inclus. Les options disponibles sont :
  • ET – affiche les produits qui appartiennent à toutes les catégories choisies.
  • IN – affiche les produits dans la catégorie choisie. Il s'agit de la valeur par défaut de cat_operator.
  • NOT IN – affiche les produits qui ne sont pas dans la catégorie choisie.
• ids - affiche les produits en fonction d'une liste d'ID de publication séparés par des virgules.
• skus – affiche les produits en fonction d'une liste de SKU séparés par des virgules.

Si le produit ne s'affiche pas, assurez-vous qu'il n'est pas défini sur "Masqué" dans la "Visibilité du catalogue".

Exemples de scénarios de produits basés sur des attributs

Scénario 1 – Articles de vente aléatoires

Vous souhaitez afficher quatre produits en promotion.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

Ce shortcode indique explicitement quatre produits avec quatre colonnes (qui seront une ligne), montrant les articles en vente les plus populaires. Il ajoute également une vente rapide de classe CSS, que vous pouvez modifier dans votre thème.

Scénario 2 – Produits vedettes

Vous souhaitez afficher vos produits phares, deux par ligne, avec un maximum de quatre articles.

[products limit="4" columns="2" visibility="featured"]

Ce shortcode indique que jusqu'à quatre produits seront chargés dans deux colonnes et qu'ils doivent être présentés. Bien que cela ne soit pas explicitement indiqué, il utilise les valeurs par défaut telles que le tri par titre (A à Z).

Scénario 3 – Produits les plus vendus

Vous souhaitez afficher vos trois produits les plus vendus sur une seule ligne.

[products limit="3" columns="3" best_selling="true"]

Pour plus d'exemples, consultez la documentation des shortcodes WooCommerce.

Catégories de produits

Ces deux shortcodes afficheront vos catégories de produits sur n'importe quelle page.

1. [product_category] - affiche les produits dans une catégorie de produits spécifiée.
2. [product_categories] – affiche toutes vos catégories de produits. C'est le shortcode générique pour afficher une catégorie particulière. Vous devrez ajouter un paramètre spécifique, répertorié ci-dessous, afin d'afficher réellement un (ou plusieurs).

Attributs de catégorie de produits disponibles

• ids – affiche des catégories spécifiques par leurs identifiants. À utiliser dans product_categories. Exemple – [products _categories ids="1,2"]
• catégorie - Peut être l'identifiant de la catégorie, le nom ou le slug. À utiliser dans [product_category]
• limit – détermine le nombre de catégories qui seront affichées. Exemple – [products _categories limit="3"]
• colonnes – détermine le nombre de colonnes qui seront affichées. La valeur par défaut est 4.
• hide_empty - cela masquera les catégories vides. La valeur par défaut est "1" qui masquera les catégories vides. Réglez sur "0" pour afficher les catégories vides. .Exemple – [products _categories hide_empty="1"]
• parent - cela affichera les catégories enfants d'une catégorie parent spécifique, qui est ciblée par id. Par exemple, [parent= »3″] affichera les catégories enfant de la catégorie dont l'id est 3. Si vous définissez parent sur « 0 », seules les catégories de niveau supérieur seront affichées. Exemple – [products _categories parent="0"]
• orderby - ceci contrôle l'ordre dans lequel les catégories sont affichées. La valeur par défaut est de trier par "nom". Il peut être défini sur "id", "slug" ou "menu_order". Si vous souhaitez commander par les identifiants que vous avez spécifiés, vous pouvez utiliser orderby = "include". Exemple – [products _categories orderby="id"]
• order – indique si l'ordre des catégories est croissant (ASC) ou décroissant (DESC), en utilisant la méthode définie dans orderby. Par défaut, ASC. Exemple – [products _categories order="ASC"]

Exemples de scénarios de catégories de produits

Afficher uniquement les catégories de niveau supérieur
Imaginez que vous vouliez uniquement afficher les catégories de niveau supérieur sur une page et exclure les sous-catégories, eh bien c'est possible avec le shortcode suivant : [product_categories number="0" parent="0"] .

Autres shortcodes utiles

[Ajouter au panier]

Ce shortcode vous permet de créer facilement un bouton Ajouter au panier pour un produit spécifique, ciblé par identifiant. Il y a pas mal de paramètres. Comme pour les autres shortcodes, chacun doit être placé entre deux guillemets, "comme ceci".

• id : Choisissez le produit par ID
• style : Personnalisez directement le CSS du bouton
• sku : Choisissez le produit par SKU
• show_price : Choisissez si le prix est affiché avec le bouton. Il y a deux options, "VRAI" et "FAUX"
• class : Attribuez une classe HTML au bouton, afin de pouvoir le cibler avec du code CSS
• quantité : Choisissez la quantité de produit qui sera ajoutée au panier. Dans la plupart des cas, ce sera juste "1"

Exemple : [add_to_cart show_price="TRUE" quantity="1" class="example-cart-button"]

Ajouter au panier URL

Ce shortcode affichera l'URL réelle d'un produit particulier. Il n'y a que deux paramètres :

• id : ciblez le produit par ID
• sku : Ciblez le produit par SKU

Exemple : [add_to_cart_url]

Cela affichera l'URL sur le bouton d'ajout au panier d'un seul produit par ID.

[shop_messages]

Vous souhaitez afficher des messages WooCommerce sur des pages non-WooCommerce ? Ce shortcode vous permettra d'afficher des notifications comme "Ce produit a été ajouté à votre panier" sur n'importe quelle page avec celui-ci.

Codes abrégés des coupons

WooCommerce offre également un moyen d'afficher les coupons disponibles sur n'importe quelle page et de générer automatiquement des coupons. Cependant, vous devrez acheter l'extension Smart Coupons. Reportez-vous aux articles ci-dessous pour obtenir les codes abrégés :

• Comment afficher les coupons disponibles sur n'importe quelle page
• Comment générer automatiquement des coupons

Dépannage des codes abrégés

Il peut arriver que les shortcodes que vous avez insérés ne fonctionnent pas. Voici ce que vous devez vérifier :

Le shortcode est entre les balises :
Lorsque vous ajoutez un shortcode à une page, assurez-vous qu'il ne se trouve pas entre des balises, qui sont conçues pour afficher (et non exécuter) du code.

Les guillemets sont bouclés, pas droits
Une autre erreur courante est si les guillemets (utilisés avec les paramètres) sont inclinés, ou « bouclés » (comme ceci : « ) et non droits (comme ceci : »). Les paramètres ne fonctionneront pas avec des guillemets bouclés.

Reportez-vous à ce document pour plus de détails.

Liste des plugins de shortcode WooCommerce

Outre les shortcodes WooCommerce intégrés et gratuits, voici quelques plugins qui vous aideront à personnaliser votre boutique.

• Kit de codes courts Woo
• SIP Avis Shortcode pour WooCommerce
• Bundler frontal SIP pour WooCommerce

Conclusion

Les shortcodes WooCommerce sont exceptionnellement utiles et puissants. Bien que cela puisse sembler un peu technique, il est assez facile à utiliser et à mettre en œuvre.

J'espère que ce guide vous a aidé à résoudre toutes vos questions liées aux shortcodes WooCommerce.

En attendant, vous pouvez également consulter nos plugins WooCommerce populaires qui contribuent à rendre votre boutique WooCommerce plus rapide et plus intelligente.

Si vous avez des questions ou des suggestions, laissez un commentaire ci-dessous et nous réglerons le problème !