Shortcode Woocommerce [guide complet]

Les shortcode Woocommerce (codes courts en français) sont de petits extraits de code qui vous aideront à obtenir une fonctionnalité ou à afficher du contenu en fonction de certaines conditions de votre boutique WooCommerce. Fondamentalement, le principal avantage des shortcode est que vous pouvez éviter de saisir une longue séquence de code pour obtenir certaines fonctionnalités. Cela le rend populaire parmi les utilisateurs de tous les niveaux de connaissance. WooCommerce propose plusieurs shortcode qui vous aideront à gérer vos publications et vos pages plus efficacement. Dans cet article, nous vous fournirons une vue détaillée des shortcode WooCommerce. Cet article sera le seul auquel vous aurez besoin de vous référer pour tout ce qui concerne les shortcode WooCommerce.

Les bases des shortcode

En termes WordPress, les shortcode sont considérés comme des macros qui vous aident à avoir des interactions dynamiques avec le contenu. Les shortcode aident les utilisateurs de WordPress à modifier leur contenu en fonction d’exigences spécifiques, même sans connaissances approfondies en matière de codage. En fait, cela vous aide à garder le contenu propre et sémantique. Voici certains des avantages de l’utilisation de shortcode dans les publications et les pages WordPress:

• Les shortcode n’ajoutent pas de balises au contenu de la publication, ce qui signifie que vous avez plus de liberté pour modifier le style de la page ultérieurement.
• Ils offrent la possibilité de travailler différemment, en fonction des paramètres définis par l’utilisateur. Cela aide les utilisateurs à utiliser le même code de fonction dans différentes circonstances.

Avantages des shortcode WooCommerce

Les shortcode de WooCommerce offrent un excellent contrôle aux propriétaires de magasins pour qu’ils puissent afficher de manière dynamique des produits ou ajouter des boutons au panier n’importe où sur le site. Ceci est particulièrement important car il est possible que vous souhaitiez expérimenter plusieurs stratégies sur votre magasin. Parfois, vous devrez peut-être placer un bouton Ajouter au panier sur un message populaire pour le produit présenté. Plutôt que de faire passer vos clients par le canal de vente conventionnel, vous pourrez expérimenter différentes stratégies pour générer des conversions.

WooCommerce shortcode pour les pages

Lorsque vous avez installé WooCommerce pour la première fois, vous avez peut-être remarqué que l’assistant d’intégration a créé plusieurs pages telles que le panier, le paiement, etc. Si vous ouvrez ces pages, vous pouvez y voir les codes de fonction ajoutés automatiquement à ces pages. En fait, ces shortcode fournissent la fonctionnalité à ces pages. Si vous n’utilisez pas l’assistant d’intégration, mais souhaitez créer ces pages ultérieurement, vous pouvez simplement ajouter le shortcode correspondant à la page.

Nous allons maintenant aborder certains des shortcode WooCommerce populaires que vous pouvez utiliser sur la page de votre boutique en ligne selon différents scénarios.

[woocommerce_cart]

Ce shortcode rend votre page de panier fonctionnelle. Fondamentalement, la page Panier devrait pouvoir afficher de manière dynamique le contenu que vos clients ajoutent à leur panier. Il sert également d’interface pour les codes de coupon et certains autres éléments de la page du panier. Il s’agit d’un shortcode simple, qui ne permet pas d’ajouter des conditions ou des paramètres.

[woocommerce_checkout]

Le processus de paiement est un autre aspect essentiel d’un magasin WooCommerce. Vos clients devraient pouvoir passer facilement à la caisse sur votre site lorsqu’ils effectuent un achat dans votre magasin. Ce shortcode spécifique confère ses fonctionnalités à votre page de paiement. Tout comme le shortcode du panier, celui-ci fonctionne aussi simplement et n’offre pas la possibilité d’utiliser sélectivement des arguments différents.

[woocommerce_my_account]

La page Mon compte est l’endroit où vos clients pourront voir les détails de leur commande, modifier les adresses de livraison et de facturation, etc. Ils pourront également mettre à jour leurs informations sur cette page, telles que le nom, l’adresse email, le mot de passe, etc. Ce shortcode inclut un argument, qui aide à afficher les informations de l’utilisateur actuellement connecté.

[woocommerce_order_tracking]

Ce shortcode offre la possibilité de fournir des informations de suivi des commandes à vos clients. Vous pouvez l’utiliser sur une page individuelle ou le combiner avec un autre shortcode pour afficher le formulaire de suivi.

Par exemple, vous pouvez ajouter ce shortcode sur la page Mon compte afin que le formulaire de suivi soit également disponible pour les clients.

Affichage de produits à l’aide de shortcode

Les propriétaires de boutique WooCommerce doivent afficher leurs contenus à différents endroits sur leur site, dans des circonstances différentes. Dans les versions précédentes de WooCommerce, il existait différents shortcode pour différents groupes de produits.

Si vous voulez afficher tous vos produits en vedette sur une page, vous devez utiliser ce shortcode – [featured_products]. Ou, si vous vouliez afficher des produits en solde, vous deviez utiliser [sale_products].

Maintenant, pour tout type d’affichage de produit, vous pouvez utiliser le shortcode [products], au lieu d’utiliser plusieurs shortcodes différents. Tout ce que vous avez à faire est de spécifier les conditions requises pour l’affichage. En conséquence, WooCommerce affichera le jeu de produits sélectionné sur la page ou la publication à laquelle vous ajoutez le numéro abrégé.

Par exemple, pour afficher les produits en vedette, vous pouvez maintenant utiliser le shortcode comme ceci – [products featured].

Ou, pour afficher les produits en vente, vous pouvez utiliser ce shortcode – [products on_sale].

Différents attributs que vous pouvez utiliser avec Products shortcode

Examinons maintenant tous les attributs disponibles qui vous aideront à afficher les produits de manière sélective sur votre boutique WooCommerce.

Fixer une limite au nombre de produits

En utilisant l’attribut ‘limit’, vous pouvez spécifier le nombre de produits que vous souhaitez afficher à l’aide du shortcode. L’option par défaut affichera tous les produits, de même que limit = “- 1”. Pour afficher tous les produits, vous pouvez simplement ajouter le shortcode [products] ainsi que.

Par exemple, vous pouvez limiter l’affichage de produits comme ceci: [products limit="6"]. Le résultat sera comme la capture d’écran ci-dessous:

Modification de la disposition de l’affichage du produit

Quelques attributs vous aideront à modifier la présentation des produits. Ceux-ci sont:

Voyons comment les utiliser.

Colonnes

Si vous souhaitez spécifier le nombre de colonnes à afficher, vous pouvez le faire. Dans l’exemple ci-dessus, si nous ajoutons l’attribut «columns» et spécifions le nombre 6, les 6 produits seront affichés dans une colonne. Cela signifie, avec le shortcode [products limit="6" columns="6"], le résultat sera comme la capture d’écran ci-dessous:

Pagination

Cet attribut aidera à diviser les produits en différentes pages. Vous pouvez l’utiliser avec l’attribut limit pour spécifier le nombre de produits à afficher sur une page. Définissez paginate = “true” pour que cela fonctionne. Donc, pour le shortcode [products limit="6" columns="6" paginate="true"], le résultat sera comme la capture d’écran ci-dessous:

Changer l’ordre d’affichage

Lorsque vous utilisez des shortcode WooCommerce, vous pouvez également modifier l’affichage des produits. Il existe différentes conditions que vous pouvez spécifier en association avec l’attribut ‘orderby’. Elles sont:

• identifiant – trie les produits affichés par ID de produit.
• Titre – organiser les produits par leur titre. C’est l’attribut order by orderby par défaut.
• popularité – crée une commande de produits en fonction du nombre d’achats effectués dans votre magasin. Le plus populaire sera affiché en premier.
• rendez-vous amoureux – Vous pouvez également commander des produits à la date à laquelle ils ont été publiés. Par défaut, le produit le plus ancien sera affiché en premier.
• menu_order – Si vous avez défini des commandes de menu, cet attribut commandera les produits en fonction de cela. Le numéro le plus bas sera affiché en premier.
• évaluation – Vous pouvez trier les produits en fonction de leur valeur d’évaluation moyenne en utilisant cet attribut.
• rand – Cet attribut modifiera l’ordre des produits à chaque rechargement de la page. Veuillez noter que cela peut ne pas fonctionner sur les sites qui ont activé la mise en cache, puisqu’un ordre spécifique de produits est enregistré dans de tels cas.

Vous pouvez même utiliser ces options ensemble en les ajoutant avec un espace entre elles. Par exemple, le shortcode [products limit="6" columns="6" orderby="popularity"] vous donnera les produits dans un ordre basé sur leur popularité.

Vous pouvez choisir de trier les produits dans une condition donnée en ordre croissant ou décroissant en utilisant une autre option avec orderby. C’est «ordre». Ainsi, tout en affichant les produits en fonction de la date, le produit le plus ancien sera prioritaire par défaut.

[products limit="6" columns="6" orderby="date"] vous donne ceci:

Vous pouvez changer cela et laisser le dernier produit apparaître en premier dans la liste en utilisant le shortcode ci-dessous:

[products limit="6" columns="6" orderby="date" order="DESC"]

Quelques autres attributs du produit

Voyons maintenant quelques attributs de produit supplémentaires, que vous pouvez utiliser avec [products] petit code. Vous pouvez afficher des produits en fonction de ces attributs sur une page ou une publication.

sku – Affiche une liste de produits en fonction de leur SKU. Vous pouvez séparer les SKU par des virgules.

Catégorie – Vous pouvez fournir les slugs des catégories pour afficher les produits. Si vous souhaitez inclure plusieurs catégories, séparez les slugs par une virgule.

classe – Celui-ci ajoute une classe d’encapsulation HTML, ce qui vous aide à modifier l’affichage à l’aide de CSS personnalisé.

en soldes – Cela vous aidera à afficher tous les produits en vente dans votre magasin.

plus vendu – Vous pouvez répertorier tous vos produits les plus vendus en utilisant cet attribut.

top_rated – Tous vos articles les mieux notés seront affichés si vous utilisez cet attribut.

Lorsque vous utilisez des produits on_sale, best_selling et top_rated, veuillez noter que vous devez les utiliser individuellement pour que cela fonctionne. N’utilisez pas trois de ces attributs conjointement.

Attributs du produit contenu

Vous pouvez également utiliser un ensemble d’attributs de produit de contenu pour récupérer des produits sur une page ou une publication spécifique. Examinons maintenant ces options plus en détail.

Les attributs

Vous pouvez récupérer des produits en fonction des attributs disponibles ou de leurs termes. Vous pouvez le faire en incluant le slug d’attributs, en spécifiant les termes des attributs, ainsi qu’en combinant différents attributs et termes.

attribut – Cela aidera à afficher les produits en mentionnant les slugs de leurs attributs.

termes – Maintenant, après avoir spécifié un attribut, vous pouvez également mentionner les termes d’attribut que vous souhaitez inclure. Vous pouvez spécifier plusieurs termes séparés par une virgule.

terms_operator – Celui-ci vous donnera plus de contrôle pour l’affichage des termes d’attribut. Il y a trois opérateurs comme mentionné ci-dessous:

• ET – Cela affichera les produits de tous les attributs choisis.
• DANS – Affiche les produits avec l’attribut choisi.
• PAS DEDANS – Ceci affichera les produits qui ne sont pas dans les attributs choisis.

Ainsi, par exemple, le shortcode [products columns="6" attribute="color" terms="red", "green" terms_operator="IN"] donne tous les produits de votre magasin qui ont des variations rouges et vertes.

D’autre part, le shortcode [products columns="6" attribute="color" terms="red", "green" terms_operator="NOT IN"], exclura les produits comportant des variations de rouge et de vert et affichera le reste.

Visibilité

En fonction des paramètres de visibilité de vos produits, vous pouvez les récupérer sur une page ou les publier à l’aide de shortcode. Vous pouvez choisir plusieurs options disponibles pour obtenir des produits de cette façon. L’attribut que vous pouvez utiliser avec [products] Le shortcode est «visibilité». Les options disponibles sont les suivantes:

• visible – Cela permettra de récupérer les produits visibles sur la boutique et les résultats de recherche. C’est l’option par défaut lorsque vous utilisez l’attribut de visibilité.
• catalogue – Ici, vous pouvez récupérer des produits visibles uniquement sur la page du magasin et non sur les résultats de recherche.
• chercher – Cette option vous aidera à récupérer les produits visibles uniquement sur les pages de recherche et non sur la page du magasin.
• caché – Avec cette option, vous ne pouvez récupérer que les produits accessibles directement par une URL. Ces produits ne seront pas visibles sur votre boutique ou vos pages de recherche.
• En vedette – Si vous souhaitez afficher tous vos produits marqués comme étant en vedette, utilisez cette option.

Par exemple, voyons comment afficher tous les produits présentés dans votre magasin. Pour cela, vous pouvez utiliser le shortcode [products columns="6" visibility="featured"]. Maintenant, vous pouvez voir que tous vos produits en vedette seront affichés sur la page ou la publication souhaitée.

Les catégories

De la même manière que nous avons vu avec les attributs, vous pourrez également afficher les produits en fonction de leurs catégories. Vous pouvez spécifier les catégories, puis également spécifier une condition pour l’afficher en fonction de vos besoins.

Les options et attributs que vous pouvez utiliser pour cela sont les suivants:

Catégorie – Vous pouvez spécifier la ou les catégories que vous souhaitez afficher.

opérateur de chat – Cela vous fournira des options pour spécifier les combinaisons que vous devez appliquer dans l’option d’affichage du produit. La zone d’options comme suit:

• ET – Cela affichera les produits qui appartiennent à toutes les catégories choisies.
• DANS – En utilisant cette option, vous pouvez afficher les produits dans les catégories choisies.
• PAS DEDANS – Cela affichera des produits qui ne font pas partie des catégories choisies.

Comment afficher les produits de manière sélective en fonction des catégories?

Pour expliquer les options de catégorie, prenons un exemple de scénario pour mieux comprendre la situation.

Si un produit fait partie de deux catégories et que vous avez spécifié les deux catégories dans le shortcode et que vous utilisez l’opérateur AND, seul ce produit sera affiché. Par exemple, nous avons le produit Beanie est inclus dans deux catégories – vêtements et accessoires. Avec le shortcode suivant, vous ne pouvez afficher que ce produit.

[products columns="6" category="clothing, accessories" cat_operator="AND"]

Maintenant, dans le même scénario, si vous utilisez l’opérateur IN, tous les produits de l’une ou l’autre de ces catégories s’afficheront. Donc avec le shortcode [products columns=”6″ category=”clothing, accessories” cat_operator=”IN”], voyons le résultat. Tous les produits de notre magasin, qui appartiennent à la catégorie «vêtements» ou «accessoires», sont apparus.

Basé sur l’ID de produit ou le SKU

Vous pouvez également afficher les produits par ID de produit ou par SKU lors de l’utilisation de shortcode. Voici les options disponibles.

identifiants – Vous pouvez spécifier les ID de produit des produits que vous souhaitez afficher. Plusieurs identifiants doivent être séparés par des virgules.

Comment trouver les ID de produit?

Vous pouvez trouver l’identifiant d’un produit sur votre page de liste de produits (WooCommerce> Produits). Faites simplement défiler un produit et vous pouvez voir son identifiant.

skus – Avec shortcode, vous pouvez également afficher des produits en fonction de leurs skus. Spécifiez simplement le sku, tout en utilisant cet attribut en conjonction avec le shortcode du produit. Lorsque vous fournissez plusieurs skus, veillez à les séparer par une virgule.

Catégorie de produit Shortcodes

Lorsque vous souhaitez afficher des produits d’une catégorie particulière, vous pouvez utiliser plusieurs options. Ceux-ci sont:

[product_category] – Ceci affichera les produits dans la catégorie spécifiée.

[product_categories] – Vous pouvez utiliser celui-ci pour afficher toutes vos catégories de produits.

Scénarios de combinaison

Examinons maintenant quelques scénarios de combinaison, dans lesquels nous combinons différents attributs pour afficher les produits de manière sélective sur un message ou une page.

1. Affichez les 5 derniers produits visibles sur la boutique et les pages de recherche.

Pour cela, vous pouvez utiliser le shortcode suivant:

[products limit="5" columns="5" orderby="date" order="DESC" visibility="visible"]

2. Affichez les 4 produits les plus récents avec les termes d’attribut bleu, rouge et vert.

Pour afficher ceci, nous utilisons le shortcode [products limit="4" columns="4" attribute="color" terms="blue, red, green" orderby="date"]. Cela vous donnera tous les produits qui ont des variations de ces couleurs et les trie par ordre de date de publication.

Tri des produits par méta-champs personnalisés

Pour afficher les produits triés par méta-champs personnalisés, vous pouvez ajouter l’extrait de code ci-dessous recommandé dans la documentation WooCommerce. Les extraits de code peuvent être placés dans le fichier functions.php de votre dossier de thèmes.

add_filter ('woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby');
fonction woocommerce_shortcode_products_orderby ($ args)
{
$ standard_array = array ('menu_order', 'title', 'date', 'rand', 'id');
if (isset ($ args['orderby'] ) &&! in_array ($ args['orderby'], $ standard_array)) {
$ args['meta_key'] = $ args['orderby'];
$ args['orderby'] = 'meta_value_num';
}
retourne $ args;
}


Affichage d’une page de produit individuelle

Vous pouvez également afficher des pages de produit individuelles sur un message ou une page à l’aide de shortcode WooCommerce. Pour cela, vous pouvez utiliser deux attributs: ID de produit et SKU.

Le shortcode pour cela est [product_page].

Vous pouvez spécifier le mode de sélection que vous souhaitez en spécifiant l’id ou le SKU du produit.

Par exemple, vous pouvez afficher une page individuelle en utilisant à la fois le shortcode ci-dessous:

[product_page id="243"] ou [product_page sku="woo-hoodie"]

Produits connexes

Il existe un shortcode qui vous aidera également à afficher les produits associés. Le shortcode pour cela est [related_products]. Vous pouvez définir une limite du nombre de produits que vous souhaitez afficher à l’aide de l’attribut limit.

Par exemple, le shortcode permettant d’afficher trois produits liés serait [related_products limit="3"]

Ajouter au panier bouton ou url

Vous pouvez également simplement ajouter le bouton Ajouter au panier et le prix d’un produit sur un message ou une page à l’aide de shortcode WooCommerce. De nouveau, cela peut être spécifié par l’ID du produit ou par sku.

Par exemple, si nous voulons afficher le prix du produit ci-dessus et le bouton Ajouter au panier sur un message ou une page, nous utiliserons le shortcode comme ci-dessous:

[add_to_cart sku="woo-hoodie"]

Et l’affichage sera:

Si, au lieu d’un bouton Ajouter au panier, vous redirigez les clients vers une autre page à l’aide d’une URL, celle-ci peut également être récupérée à l’aide d’un code abrégé. Ici, pour modifier l’apparence du bouton et du prix, vous devrez peut-être également utiliser des codes CSS.

Par exemple, pour récupérer l’URL d’ajout au panier sur une page ou une publication, vous pouvez utiliser le shortcode ci-dessous.

[add_to_cart_url id="256"]

L’URL que vous avez spécifiée au lieu du bouton Ajouter au panier sera reflétée sur une page ou une publication en tant que capture d’écran ci-dessous:

J’espère que vous avez bien compris les shortcode de WooCommerce et quelques scénarios pour les utiliser. S’il vous plaît laissez-nous un commentaire si vous avez des questions.