Shortcodes WooCommerce : Le guide ultime pour 2021

Si vous avez une entreprise WooCommerce, vous avez probablement entendu parler des shortcodes. Ce sont de petits extraits qui vous permettent d'ajouter et de personnaliser différents aspects de votre boutique en ligne sans écrire de longues lignes de code. Dans ce guide, nous verrons ce que sont les shortcodes WooCommerce, pourquoi vous devriez les utiliser et comment en tirer le meilleur parti .

Shortcodes WooCommerce : tout ce que vous devez savoir

Si vous travaillez avec WordPress, vous connaissez probablement WooCommerce. Actuellement, 93,7% de tous les sites Web de commerce électronique WordPress utilisent le célèbre plugin WooCommerce. Cette plate-forme open source entièrement personnalisable développée par WooThemes a commencé comme n'importe quel autre addon mais a rapidement décollé avec des millions de téléchargements, ce qui a attiré l'attention du conseil d'administration WordPress. À ce jour, il a déjà été téléchargé 70 millions de fois et est devenu le premier plugin de commerce électronique, alimentant au total 28 % des boutiques en ligne.

Malgré sa grande réputation et son succès, l'équipe WooCommerce travaille en permanence pour le rendre encore meilleur. Tout au long de son parcours de développement, il a distribué plusieurs codes abrégés de différents types aux utilisateurs pour personnaliser leurs sites. Avec de tels codes abrégés, ils peuvent transformer leurs magasins et personnaliser leur interface, leur paiement, leurs fonctionnalités, le processus de référencement des produits, etc.

Donc, pour vous aider à tirer le meilleur parti des shortcodes, dans ce guide, nous examinerons :

• Une brève explication des shortcodes
• Pourquoi ils sont nécessaires pour votre entreprise
• Une liste de codes abrégés WooCommerce
• Comment les utiliser pleinement

Que sont les codes courts WooCommerce ?

Commençons par les bases. Les shortcodes WooCommerce sont de petits extraits qui vous aident à obtenir une fonctionnalité ou à afficher du contenu sur votre site de commerce électronique sans écrire une longue portion de code. En d'autres termes, ce sont des macros qui permettront une interaction dynamique avec le contenu de votre site .

Vous pouvez utiliser des codes abrégés n'importe où sur votre boutique pour la personnaliser, montrer des produits ou simplement des boutons d'appel à l'action. Et la meilleure partie est que vous n'avez besoin d'aucune connaissance en codage pour commencer à les utiliser. Vous avez juste besoin d'une passion brûlante pour les affaires en ligne et d'une compréhension approfondie de ce que vous voulez pour votre magasin. Les shortcodes feront le reste proprement et proprement.

En un mot, les shortcodes WooCommerce sont bénéfiques de trois manières :

• Ils permettent de gagner du temps car vous n'avez pas à écrire de longues lignes de code, ce qui vous laisse plus de temps pour travailler sur d'autres choses.
• Puisqu'ils n'ajoutent pas de balisage au contenu de la publication, les propriétaires de magasins pourront modifier le style de la page ultérieurement.
• Plus de flexibilité. Même si cela dépendra des paramètres définis par l'utilisateur, ils peuvent appliquer le même shortcode pour différentes situations.

Pourquoi avez-vous besoin de codes courts WooCommerce ?

Toujours pas convaincu ? Détrompez-vous, les shortcodes WooCommerce peuvent faire beaucoup plus que vous ne l'imaginez.

Tout d'abord, avec les shortcodes, vous aurez le contrôle total de votre site . Cela signifie que vous pouvez librement afficher des produits, ajouter des boutons d'appel à l'action ou des boutons de tout type n'importe où sur votre boutique sans demander l'aide d'un développeur. Cela signifie également que vous n'avez pas non plus à travailler avec des portions de code longues et complexes.

C'est parfait pour ceux qui veulent essayer diverses stratégies dans leurs boutiques en ligne. Par exemple, plutôt que de guider vos clients à travers un processus de vente standard comme n'importe quel autre magasin, vous pouvez afficher un bouton d'ajout au panier sur l'un de vos messages populaires pour encourager les conversions. Et la meilleure partie est que les shortcodes vous permettent de choisir parmi de nombreux boutons d'appel à l'action que vous placez sur votre site.

De plus, les codes abrégés WooCommerce vous permettent d'ajouter des produits à la page d'accueil, de créer une grille d'articles en vente pour les montrer aux clients et d'afficher vos produits populaires où vous le souhaitez. Même créer une page de suivi de commande est possible ! Et c'est la magie des shortcodes, ils vous offrent une infinité d'options pour personnaliser votre boutique .

Quels types de codes courts WooCommerce existe-t-il ?

Comme il est difficile de dire combien de shortcodes WooCommerce propose, nous les listerons en fonction de leur catégorie. Voici un bref aperçu des shortcodes WooCommerce que nous aborderons dans ce guide :

• Codes abrégés de page
• Shortcodes de produits (c'est la catégorie la plus robuste)
• Codes abrégés de la page produit
• Produits associés Shortcodes
• Bouton d'ajout au panier ou codes abrégés d'URL

Comment tirer le meilleur parti des Shortcodes WooCommerce ?

Voyons maintenant ce que chaque type de shortcode peut faire et comment en tirer le meilleur parti :

1. Codes abrégés des pages

Normalement, WordPress est livré avec 4 pages par défaut avec les codes abrégés inclus, vous n'aurez donc pas besoin de les ajouter manuellement. Cependant, si pour une raison quelconque ce n'était pas le cas, vous pouvez recréer les pages avec les shortcodes et les clarifier dans les paramètres.

Dans les shortcodes de la page, vous trouverez :

Chariot

 [ woocommerce_cart ]

Il est utilisé pour la page du panier et permet d'afficher le contenu du panier une fois que vos clients ont ajouté des produits à leur panier. De plus, il affiche également l'interface pour les codes de coupon, les morceaux de panier et d'autres éléments pour une page de panier standard. Il s'agit d'un simple shortcode, vous n'y ajoutez donc plus de conditions ou de paramètres.

Vérifier

 [ woocommerce_checkout ]

Une fois que vos clients ont collecté tous les produits/services qu'ils souhaitent, ils cliqueront sur le paiement, et c'est à ce moment que le shortcode de paiement entre en action. Il affichera toutes les informations nécessaires que l'acheteur doit voir avant de passer à la caisse, telles que le mode de paiement, les informations de facturation, les informations d'expédition, etc. Il s'agit également d'un simple shortcode qui n'accepte aucun argument supplémentaire.

Mon compte

 [ woocommerce_my_account ]

Les clients doivent pouvoir voir et modifier les détails de leur profil, tels que le nom, l'adresse e-mail, le mot de passe, ainsi que les détails de leur commande tels que l'adresse de livraison et de facturation. Avec ce shortcode, les utilisateurs pourront afficher, modifier et mettre à jour ces détails. De plus, il contient un argument qui affichera des informations sur l'acheteur actuel.

Formulaire de suivi de commande

 [ woocommerce_order_tracking ]

Contrairement aux codes abrégés de trois pages précédents, celui-ci n'est pas généré automatiquement par défaut, mais vous pouvez l'ajouter afin que vos clients puissent voir et suivre l'état de leurs commandes en cours. S'ils souhaitent vérifier l'état d'une commande, les acheteurs doivent saisir les détails de leur commande dans le formulaire de suivi de commande.

Vous pouvez utiliser ce shortcode WooCommerce pour une page individuelle ou le combiner avec d'autres shortcodes pour afficher le formulaire de suivi. Par exemple, vous pouvez utiliser ce shortcode sur la page Mon compte pour permettre à vos clients d'accéder au formulaire de suivi.

2. Codes abrégés du produit

Veuillez garder à l'esprit que pour utiliser les Product Shortcodes, vous aurez besoin de WooCommerce 3.2 et des versions ultérieures. Ces versions vous permettent d'utiliser le shortcode du produit pour tous les types d'affichage de produits. Si vous avez une version précédente, consultez ce document car vous devrez utiliser des shortcodes différents pour chaque type de regroupement de produits.

 [ products ]

2.1 Attributs de code court du produit

Lorsque vous utilisez des shortcodes de produits, vous devrez spécifier les produits que vous souhaitez afficher en fonction de différentes conditions qui vous permettront de filtrer les produits par ID de publication, SKU, catégories, attributs, etc. Ils prennent également en charge la pagination, le tri aléatoire et les balises de produit.

Passons en revue quelques shortcodes de produits :

Limiter la quantité de produit

Avec l'attribut limit, vous pouvez établir une limite au nombre de produits affichés. Par exemple, vous pouvez limiter le nombre de produits à afficher à 8 articles avec les éléments suivants :

 [ products limit="12" ]

. Veuillez noter que par défaut, la limite est "-1", ce qui signifie que tous les produits seront affichés.

Modifier la présentation du produit

Avec les shortcodes WooCommerce, vous pouvez également modifier la mise en page pour diversifier l'affichage des produits. Choisissez simplement parmi les attributs suivants en fonction des préférences de vos clients : colonnes, pagination ou ordre par.

une. Colonnes

Si vous souhaitez définir un certain nombre de colonnes, vous devrez ajouter l'attribut 'columns' et préciser le nombre souhaité. Donc si vous voulez 6 colonnes avec un produit différent dans chacune d'elles, vous pouvez utiliser le shortcode :

 [ products limit="12" columns="4" ]

b. Paginer

Un autre exemple est l'attribut paginate, qui divise vos produits en différentes pages. Avec ce shortcode, vous pouvez spécifier le nombre d'éléments affichés dans chaque page.

Pour l'utiliser, définissez paginate = "true", puis entrez le shortcode suivant :

 [ products limit="12" columns="4" paginate="true" ]

c. Trier les produits avec "orderby"

L'attribut orderby ouvre un large panel d'options puisqu'il vous permet de trier vos produits selon de multiples critères pour les afficher comme vous le souhaitez en ajoutant des conditions. Ceux-ci inclus:

• • id : affiche les produits par identifiant de produit.
  • popularité : avec cet attribut, les produits les plus achetés seront affichés en premier.
  • titre : trier les produits par leur titre. Il s'agit de l'ordre par défaut de orderby.
  • note : une autre façon intéressante de trier les produits est basée sur leur valeur de note moyenne.
  • date : pour trier les éléments en fonction de leur date de publication. Par défaut, le produit le plus ancien est affiché en premier. Cependant, vous pouvez modifier cela en utilisant l'attribut date.
  • rand : avec cet attribut, vous pouvez modifier l'ordre des produits lors du rechargement de la page. Néanmoins, avec les sites où la mise en cache est activée et où les produits sont enregistrés dans un ordre fixe, cet attribut peut ne pas fonctionner.
  • menu_order : cela ne fonctionnera que lorsque vous avez défini des ordres de menu et affichera les produits en fonction de cet ordre. Le nombre le plus bas sera affiché en premier.

Si vous souhaitez encore plus de personnalisation, vous pouvez aller plus loin et combiner ces options simplement en ajoutant un espace entre elles. Par exemple, vous pouvez essayer de mélanger les shortcodes pour afficher six colonnes de produits dans un ordre basé sur leur popularité comme ceci :

 [ products limit="12" columns="4" orderby="popularity" ]

Plus d'attributs de produit

Il existe plusieurs autres attributs de produit dans WooCommerce que vous pouvez utiliser en les combinant avec le shortcode " produits" . Certains des principaux sont:

• • SKU : vous pouvez afficher vos produits en fonction de leur SKU (unité de tenue de stock). Si vous souhaitez ajouter plusieurs SKU, séparez-les simplement par des virgules.
  • on_sale : Comme son nom l'indique, cet attribut affichera tous les produits en solde de votre boutique.
  • catégorie : C'est aussi une bonne idée d'afficher les produits par leurs catégories. Vous pouvez avoir plusieurs catégories séparant les slugs par des virgules.
  • best_selling : C'est une bonne option si vous souhaitez afficher en premier vos produits les plus populaires et les plus vendus.
  • top_rated : Suivant la même logique, vous pouvez également afficher vos articles les mieux notés.
  • class : cet attribut vous aide à modifier l'ordre à l'aide de CSS personnalisés en ajoutant une classe wrapper HTML.

Par exemple, si vous souhaitez afficher vos produits les plus vendus, quatre par ligne, avec un maximum de douze articles, vous pouvez utiliser ce shortcode :

 [ products limit="12" columns="4" best_selling="true" ]

Visibilité

Cet attribut vous permet d'afficher les produits en fonction des paramètres de visibilité. Certaines des options sont :

• • • catalogue : Il récupère les produits visibles uniquement sur la page boutique
    • recherche : affiche les produits qui ne sont visibles que sur la page de recherche
    • visible : C'est une combinaison des deux précédents car il récupère les produits qui sont visibles sur la page de la boutique et les résultats de recherche.
    • caché : il affiche les produits qui ne sont accessibles que par une URL directe.
    • en vedette : il ne récupérera que les produits marqués comme en vedette

Par exemple, si vous souhaitez afficher vos produits phares, quatre par ligne, avec un maximum de douze articles, vous pouvez utiliser ce shortcode :

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

Attributs du produit de contenu

Dans les shortcodes de produit, il existe des attributs de produit de contenu que vous pouvez utiliser pour récupérer des produits sur une certaine page ou publication. Plus précisément, il est possible de récupérer des éléments en fonction de l'attribut ou des termes d'attribut disponibles (il s'agit de variations de cet attribut). Vous pouvez le faire en incluant le slug, en spécifiant les termes et en les combinant avec les attributs. Cela peut être un peu déroutant, alors regardons de plus près chacun d'eux :

• • attribut : il aide à afficher les produits en enfermant les limaces
  • termes : Il mentionne les termes d'attribut séparés par des virgules
  • Terms_operator : cela vous donne plus de contrôle sur la façon d'afficher les attributs. Il existe trois opérateurs :
    • ET : Il affichera les produits de tous les attributs que vous avez choisis.
    • IN : Il affiche les produits qui ont cet attribut choisi.
    • NOT IN : Cela montrera les produits qui n'ont pas les attributs choisis.

Catégories

Suivant la même logique que les attributs de produit de contenu, vous pouvez également afficher les articles en fonction de leurs catégories :

• • • catégorie : Pour choisir la catégorie que vous souhaitez afficher
    • cat_operator : vous pouvez appliquer des conditions pour afficher les éléments que vous souhaitez :
      • ET : Les produits affichés doivent appartenir à toutes les catégories choisies
      • IN : Les produits affichés doivent appartenir à au moins une des catégories choisies
      • PAS DANS : Les produits affichés n'ont pas besoin d'être dans l'une des catégories choisies
    • Vous pouvez également afficher les produits selon une liste d'ID de poste séparés par des virgules ou une liste de SKU.
    • Il existe plusieurs autres shortcodes/attributs qui appartiennent aux shortcodes de produit : Attributs spéciaux, Catégorie de produit et Catégorie de produit. La logique est très similaire à ce que vous avez lu ci-dessus, mais au cas où vous voudriez jeter un coup d'œil, vous pouvez vérifier cela.
    • Si vous voulez en savoir plus sur les shortcodes, vous pouvez visiter cette page et jeter un œil aux 8 scénarios.

Par exemple, si vous souhaitez afficher des produits pour des catégories spécifiques, quatre par ligne, avec un maximum de douze articles, vous pouvez utiliser ce shortcode :

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3. Codes abrégés de la page produit

Avec ce type de shortcode WooCommerce, vous pouvez afficher différentes pages de produits à l'aide de deux attributs : les ID de produit et les SKU. Le code pour cela est .

Il est important de noter que vous pouvez même utiliser les deux shortcodes suivants :

 [ product_page ]

ou

 [ product_page sku="hoodie" ]

4. Shortcode des produits connexes

Si vous avez utilisé des magasins de commerce électronique tels qu'Amazon ou Alibaba, vous avez probablement remarqué que lorsque vous regardez un produit, ils vous montrent d'autres articles qui sont liés. Par exemple, si vous recherchez une tente, ils vous montreront d'autres tentes et sacs de couchage similaires. En effet, si vous avez besoin d'une tente, vous serez probablement également intéressé par un sac de couchage.

Par conséquent, montrer à vos acheteurs des produits connexes est une excellente idée pour augmenter vos ventes. Dans WooCommerce, cela est possible avec le shortcode Related Products. Vous pouvez indiquer exactement le nombre de produits que vous souhaitez que les utilisateurs voient. Par exemple, si vous souhaitez afficher 4 produits, le shortcode doit être :

 [ related_products limit="4" ]

5. Bouton Ajouter au panier

Un bouton Ajouter au panier est un autre excellent moyen d'améliorer l'expérience client dans votre magasin et d'augmenter le taux de conversion. Et la meilleure partie est que c'est très simple.

Supposons que vous souhaitiez afficher le prix d'un produit et un bouton Ajouter au panier sur une publication ou une page, le shortcode que vous devez utiliser est

 [ add_to_cart sku="hoodie" ]

Les shortcodes WooCommerce vous permettent également de rediriger vos acheteurs vers une autre URL au lieu d'ajouter un article au panier. Pour ce faire, vous devez écrire

 [ add_to_cart_url ]

pour le produit avec l'identifiant 219.

Liste des Shortcodes utiles pour WooCommerce

Enfin, voici une liste des codes abrégés WooCommerce les plus utiles que vous pouvez utiliser sur votre site.

• Shortcode de la page du panier.

 [ woocommerce_cart ]

• Consulter la page

 [ woocommerce_checkout ]

• Compte d'utilisateur.

 [ woocommerce_my_account ]

• Formulaire de suivi de commande.

 [ woocommerce_order_tracking ]

• Code abrégé des produits.

 [ products ]

• Produits populaires.

 [ featured_products ]

• Produits de vente.

 [ sale_products ]

• Produits les plus vendus.

 [ best_selling_products ]

• Produits recents.

 [ recent_products ]

• Attribut de produit.

 [ product_attribute ]

• Produits les mieux notés.

 [ top_rated_products ]

• Catégorie de produit : pour afficher les produits d'une catégorie spécifique.

 [ product_category ]

• Catégories de produits : affiche toutes vos catégories de produits.

 [ product_categories ]

• Messages de la boutique : pour afficher les messages.

 [ shop_messages ]

• Filtre de produits : affiche un filtre de recherche de produits.

 [ woocommerce_product_filter ]

• Attribut de filtre.

 [ woocommerce_product_filter_attribute ]

• Catégorie de filtre de produit.

 [ woocommerce_product_filter_category ]

• Prix ​​du filtre.

 [ woocommerce_product_filter_price ]

• Balise de filtre de produit.

 [ woocommerce_product_filter_tag ]

• Évaluation du filtre.

 [ woocommerce_product_filter_rating ]

• Vente de filtre de produit : affiche un filtre en direct pour les produits en vente.

 [ woocommerce_product_filter_sale ]

• Product Filter Reset : affiche un bouton pour effacer tous les filtres en direct.

 [ woocommerce_product_filter_reset ]

Shortcodes WooCommerce : conclusion

Dans l'ensemble, les codes abrégés WooCommerce vous aideront à personnaliser votre boutique sans écrire de longues lignes de code. De cette façon, vous pouvez tester différentes dispositions et alternatives pour trouver celle qui convient à votre magasin. Même s'ils peuvent sembler compliqués au début, la vérité est qu'avec un peu de pratique, ils vous faciliteront la vie et vous aideront à faire passer votre entreprise au niveau supérieur.

Pour plus d'alternatives pour personnaliser votre boutique en ligne, vous pouvez consulter nos guides sur :

• Fonction d'ajout au panier par programmation dans WooCommerce
• WooCommerce Ajax ajouter au panier

Que pensez-vous des shortcodes WooCommerce ? Veuillez nous faire part de vos réflexions dans les commentaires ci-dessous.