Guide complet des codes courts WooCommerce

WooCommerce est la principale extension de commerce électronique pour WordPress, permettant à des millions d’entreprises de transformer leurs sites web en boutiques en ligne robustes. Cependant, de nombreuses personnes ignorent l’existence de ses codes courts.

Ce guide explique tout ce que vous devez savoir sur les codes courts de WooCommerce, des codes courts essentiels qui affichent les produits et gèrent les paniers aux personnalisations avancées pour des expériences utilisateur sur mesure.

Voyons comment ces petits bouts de code peuvent avoir un impact significatif sur votre site de commerce électronique.

Que sont les codes courts ?

Les codes courts ont été introduits dans WordPress 2.5 en 2008. Il s’agit de petits morceaux de code placés entre crochets, comme par exemple : [shortcode]. Ils agissent comme des espaces réservés qui indiquent à WordPress d’exécuter une fonction spécifique ou d’afficher un certain contenu de manière dynamique.

Par exemple, au lieu de coder manuellement une grille de produits complexe, vous pouvez utiliser un code court pour la créer et l’afficher instantanément sur votre site web. Cela permet de gagner du temps et de réduire le risque d’erreurs, ce qui facilite la maintenance et la mise à jour de votre site.

Au fil des années, les codes courts ont évolué, devenant plus puissants et plus polyvalents. WooCommerce tire parti de cette caractéristique, en proposant une gamme de codes courts spécifiquement adaptés aux fonctionnalités du commerce électronique.

Débuter avec les codes courts de WooCommerce

Pour utiliser les codes courts WooCommerce sur votre site WordPress, assurez-vous que l’extension WooCommerce est installée et activée.

Pour cela, connectez-vous à votre tableau de bord WordPress, naviguez vers Extensions > Ajouter, et recherchez « WooCommerce » Ensuite, cliquez sur Installer maintenant sur l’extension WooCommerce et activez-la.

Enfin, vous pouvez suivre l’assistant d’installation de WooCommerce pour configurer les réglages de base tels que les détails de la boutique, les moyens de paiement et les options d’expédition.

Lorsque vous installez l’extension WooCommerce, votre site WordPress est automatiquement mis à jour avec les pages Panier, Commande et Mon compte. Cependant, vous pouvez faire plus avec vos produits, et c’est ce que nous allons explorer avec les codes courts.

La syntaxe de base des codes courts

Les codes courts de WooCommerce incluent souvent des attributs supplémentaires pour personnaliser leur sortie. Voici la structure de base :

[shortcode attribute1="value1" attribute2="value2"]

Par exemple, le code court [products limit="4" columns="2"] affiche quatre produits sur deux colonnes.

Comment ajouter des codes courts dans les articles, les pages et les widgets ?

Les codes courts peuvent être ajoutés presque partout dans WordPress. Vous pouvez les ajouter à un article ou à une page en les saisisant ou en les collant simplement dans n’importe quel éditeur de texte de WordPress ou dans un bloc de code court si vous utilisez Gutenberg ou n’importe quel constructeur de pages.

Pour ce guide, nous allons utiliser Gutenberg :

1. Naviguez vers les articles ou les pages dans le tableau de bord de WordPress.
2. Ouvrez l’article ou la  page où vous souhaitez ajouter le code court.
3. Cliquez sur l’icône + pour ajouter un nouveau bloc.

   

4. Recherchez et sélectionnez le bloc Code court.
5. Collez votre code courtdans le bloc.

Par exemple, disons que vous souhaitez afficher une grille de vos derniers produits sur votre page d’accueil. En utilisant l’éditeur de blocs, vous devez saisir le code court : [products limit="3" columns="3"] et mettre à jour ou publier votre page.

Cela créera une grille avec trois produits affichés dans une colonne, offrant une manière dynamique et attrayante de présenter vos dernières offres.

Vous pouvez également ajouter des codes courts aux widgets en naviguant dans Apparence > Widgets. Ajoutez un widget Texte dans la zone de widget de votre choix (barre latérale, pied de page, etc.). Saisissez votre shortcode dans la zone de texte du widget et enregistrez le widget.

Raccourcis essentiels de WooCommerce

WooCommerce fournit une variété de shortcodes qui vous permettent d’afficher des produits, de gérer le panier d’achat et d’améliorer le processus de paiement.

Nous allons explorer les codes courts WooCommerce les plus essentiels, leurs attributs et des exemples détaillés pour vous aider à les utiliser efficacement dans votre boutique.

Codes courts d’affichage des produits

Le code court [products] est l’un des codes courts WooCommerce les plus polyvalents. Il vous permet d’afficher une liste de produits en fonction de différents critères.

Il possède de nombreux attributs qui vous permettent d’afficher les produits comme vous le souhaitez :

• limit – Nombre de produits à afficher. La valeur par défaut est -1 (afficher tout).
• columns – Nombre de colonnes. La valeur par défaut est 4.
• orderby – Ordonner les produits selon des critères spécifiques tels que date, title, price, popularity, etc.
• order – Ordre des produits. Peut être ASC (croissant) ou DESC (décroissant).
• category – Slug de la catégorie du produit.
• tag – Slug de l’étiquette du produit.
• paginate – Permet la pagination. Peut être true ou false. La valeur par défaut est false.

Par exemple, si vous souhaitez afficher les huit derniers produits dans une disposition en quatre colonnes, triés par ordre décroissant de la date à laquelle ils ont été ajoutés. Vous pouvez utiliser le code court suivant.

[products limit="8" columns="4" orderby="date" order="DESC"]

Si vous souhaitez également activer la pagination afin que l’utilisateur puisse accéder à d’autres produits tout en affichant la limite, vous pouvez utiliser l’attribut paginate.

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

Vous pouvez également vouloir afficher les produits d’une catégorie spécifique. L’attribut category vous permet de le faire. Le code court ci-dessous affiche six produits de la catégorie « accessories » sur trois colonnes :

[products category="accessories" limit="6" columns="3"]

Cinq produits sont affichés parce qu’il n’y en a que cinq dans la catégorie. Sept produits seront disponibles lorsque deux autres seront ajoutés à cette catégorie, mais seuls six produits s’afficheront en raison de la limite fixée.

Le code court [product] peut également être utilisé pour afficher un seul produit en fonction de son ID ou SKU en ajoutant l’attribut id ou sku. Par exemple, le code court ci-dessous affiche le produit avec l’ID 22.

[product id="22"]

Vous pouvez l’ajouter à un article de blog ou à tout autre endroit de votre choix.

Si vous souhaitez afficher plusieurs produits de manière sélective, vous pouvez utiliser les attributs ids et skus.

[products columns="3" ids="22,35,26"]

Ce code court affiche les produits avec les ID 22, 35, et 26.

Un autre code court dont vous pourriez avoir besoin est le code court [product_page]. Ce code court est similaire à [product] mais affiche la page entière du produit, y compris les onglets, les produits apparentés et les commentaires. Par exemple, affichons la page complète du produit portant l’ID 22.

[product_page id="22"]

Cela peut s’avérer utile pour une section de produit caractéristique dans une page ou un article.

Vous avez également accès à un attribut cat_operator qui vous permet de contrôler la manière dont les produits sont filtrés en fonction des catégories. Les options disponibles pour cet attribut sont les suivantes :

• AND – Afficher les produits dans les catégories choisies.
• IN – Afficher les produits appartenant à n’importe quelle catégorie choisie (valeur par défaut).
• NOT IN – Afficher les produits n’appartenant pas aux catégories choisies.

Par exemple, si vous souhaitez afficher les produits des catégories « clothing » et « accessories », vous pouvez utiliser l’opérateur AND:

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

Vous pouvez également exclure les produits d’une catégorie spécifique à l’aide de l’opérateur NOT In. Par exemple, si vous souhaitez afficher tous les produits à l’exception de ceux de la catégorie « clothing ».

[products category="clothing" cat_operator="NOT IN"]

Codes courts pour le panier et la commande

WooCommerce fournit des codes courts spécifiques pour les pages essentielles du commerce électronique telles que le panier, la commande et le compte utilisateur.

Par exemple, le code court [woocommerce_cart] peut afficher la page du panier d’achat, y compris tous les articles du panier, les quantités et le prix total.

Ce code court doit être placé sur la page désignée comme votre page de panier.

De même, le code court [woocommerce_checkout] affiche la page de commande où les clients peuvent saisir leurs coordonnées de facturation et de livraison et passer leur commande.

Ce code court doit être placé sur la page désignée comme page de commande.

Le code court [woocommerce_my_account] peut être utilisé pour afficher le compte de l’utilisateur, y compris les sections relatives aux commandes, aux téléchargements, aux adresses et aux détails du compte.

Enfin, le code court [woocommerce_order_tracking] vous permet d’afficher un formulaire dans lequel les clients peuvent saisir leur numéro de commande et leur adresse électronique pour suivre leurs commandes.

Ce code court peut être placé sur n’importe quelle page où vous souhaitez que les clients puissent suivre leurs commandes.

Codes courts pour les catégories de produits

Lorsque vous souhaitez afficher une liste ou une grille de catégories de produits, vous pouvez utiliser le code court [product_categories]. Il possède les attributs suivants qui peuvent être utilisés pour personnaliser son apparence :

• number – Nombre de catégories à afficher.
• columns – Nombre de colonnes.
• orderby – Ordre des catégories selon des critères spécifiques.
• order – Ordre des catégories. Il peut s’agir de ASC ou DESC.
• hide_empty – Masquer les catégories vides. Il peut s’agir de 1 (true) ou 0 (false).

Par exemple, si vous souhaitez afficher les catégories de produits dans une grille, vous pouvez utiliser le code court suivant :

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Ce code court affiche 12 catégories de produits dans une grille à quatre colonnes, triées par nom dans l’ordre croissant.

Si vous ajoutez des miniatures, elles apparaîtront ici, ce qui améliorera l’aspect de votre site. Vous pouvez ajouter des miniatures en accédant à Produits > Catégories > en modifiant une catégorie particulière, puis en faisant défiler jusqu’au champ Miniatures pour téléverser l’image.

De même, si vous souhaitez afficher les produits d’une catégorie spécifique, vous pouvez utiliser le code court [product_category]. Celui-ci accepte l’attribut per_page, qui spécifie le nombre de produits à afficher par page. Il accepte également l’attribut category pour spécifier le nom de la catégorie de produits et l’attribut columns pour le nombre de colonnes.

Par exemple, ce code court affiche huit produits de la catégorie « clothing » sur quatre colonnes.

[product_category category="clothing" per_page="8" columns="4"]

Codes courts avancés de WooCommerce

Au-delà des codes courts de base pour l’affichage des produits, WooCommerce propose des codes courts avancés qui offrent davantage de contrôle et d’options de personnalisation. Ces codes courts vous permettent d’adapter l’affichage et les fonctionnalités de votre boutique WooCommerce à vos besoins spécifiques.

Personnalisation de l’affichage des produits

Le code court [products] est très flexible et permet diverses combinaisons d’attributs pour filtrer et afficher les produits différemment.

Voici quelques autres attributs que vous pouvez utiliser :

• on_sale – Afficher ou non les produits en promotion. true ou false.
• best_selling – Afficher les produits les plus vendus. true ou false.
• top_rated – Afficher les produits les mieux notés. true ou false.

Vous pouvez ainsi afficher les produits en promotion.

[products on_sale="true" limit="8" columns="4"]

Vous pouvez également afficher les produits les plus vendus dans une catégorie en utilisant le code court ci-dessous :

[products category="accessories" best_selling="true" limit="6" columns="3"]

Ce code court affiche six produits les plus vendus de la catégorie « accessories » dans une présentation en trois colonnes.

Codes courts pour des cas d’utilisation spécifiques

Les codes courts de WooCommerce peuvent être adaptés pour répondre à des cas d’utilisation spécifiques, en fournissant un contenu dynamique basé sur différents critères. Par exemple, le code court [recent_products] peut être utilisé pour afficher les produits récemment ajoutés à votre boutique WooCommerce.

[recent_products limit="5" columns="5"]

Ce code court affiche les cinq produits les plus récemment ajoutés dans une disposition en cinq colonnes.

De même, le code court [featured_products] peut être utilisé pour afficher les produits marqués comme étant mis en avant dans votre boutique WooCommerce.

[featured_products limit="6" columns="3"]

Ce code court permet d’afficher six produits en vedette dans une présentation en trois colonnes.

Vous pouvez marquer un produit comme étant mis en avant en naviguant vers la page des produits et en les mettant en avant, comme le montre l’image ci-dessous.

Supposons que vous organisiez des promotions pour certains produits. Vous pouvez utiliser le code court [sale_products] pour afficher les produits actuellement en promotion.

[sale_products limit="8" columns="3"]

Pour définir un prix de promotion pour vos produits, allez dans Produits > Tous les produits et cliquez sur l’article que vous souhaitez proposer à la promotion. Faites ensuite défiler la page jusqu’à la section Données du produit.

Si vous saisissez une valeur dans le champ Prix de promotion WooCommerce ($), ce sera le prix que les visiteurs verront sur la page d’accueil de la boutique. Ce champ remplace la valeur du prix normal ($). Si vous n’organisez pas de promotion, laissez ce champ vide afin de ne pas réduire accidentellement les prix des produits.

Si vous disposez d’une extension qui vous aide à définir les produits les plus vendus, vous pouvez également utiliser le code court [best_selling_products] pour afficher les produits les plus vendus dans votre boutique WooCommerce.

[best_selling_products limit="10" columns="4"]

Le code court [top_rated_products] peut également afficher les produits les mieux notés dans votre boutique WooCommerce.

[top_rated_products limit="4" columns="2"]

Résumé

Les codes courts WooCommerce sont des outils puissants qui améliorent les fonctionnalités de votre boutique en ligne. La maîtrise de ces codes courts vous permet de personnaliser l’affichage des produits, de gérer le panier d’achat et d’optimiser le processus de paiement.

N’hésitez pas à expérimenter différentes combinaisons de codes courts pour trouver la configuration parfaite pour votre boutique. Grâce à ces outils, vous pouvez créer un site WooCommerce dynamique et attrayant qui répond aux besoins de vos clients.

Après avoir mis en place la boutique en ligne idéale pour votre entreprise, vous voudrez éviter que votre boutique soit attaquée, qu’elle soit lente ou qu’elle se déconnecte occasionnellement, ce qui nuirait à votre activité.

L’extension WooCommerce peut parfois ralentir les sites WordPress, en particulier pour les grandes boutiques avec de nombreux produits. Heureusement, avec Kinsta comme fournisseur d’hébergement pour votre boutique WooCommerce, vous n’aurez pas à vous inquiéter de cela.