Code court principal WooCommerce pour l'affichage dynamique des produits

Le monde du e-commerce repose sur la flexibilité. Une boutique en ligne performante doit pouvoir modifier, adapter et mettre en avant des produits spécifiques instantanément. Si de nombreux commerçants pensent qu'il faut faire appel à un développeur, WooCommerce qui simplifie la tâche : le shortcode produit. Cet outil simple et polyvalent permet d'afficher des produits, de créer des grilles personnalisées et de concevoir des pages dynamiques sans écrire une seule ligne de code.

Ce guide complet vous apprendra à maîtriser le [products] . Vous découvrirez comment utiliser ses attributs pour créer des présentations de produits personnalisées et attrayantes pour n'importe quelle page, article ou zone de widget. Que vous soyez débutant et souhaitiez ajouter quelques produits à votre page d'accueil, ou utilisateur avancé et ayez besoin de créer une page de destination complexe avec filtres, cet article est votre référence complète.

Les fondamentaux : votre liste de shortcodes WooCommerce essentiels

Avant d'aborder le [products] , voyons ce qu'est un shortcode et son rôle dans WordPress. Un shortcode est un petit fragment de code entre crochets, comme [shortcode] . WordPress le remplace par du contenu dynamique ou une fonctionnalité lors de l'affichage de la page. Vous pouvez utiliser des shortcodes partout où vous pouvez ajouter du texte, notamment dans l'éditeur classique, les blocs Gutenberg et les constructeurs de pages comme Elementor .

Bien que nous nous concentrions sur le [products] , WooCommerce propose une liste complète de shortcodes pour les pages essentielles de votre boutique. Ces shortcodes sont généralement placés sur les pages créées automatiquement par WooCommerce lors de la configuration.

• [woocommerce_cart] – Affiche le contenu de la page du panier.
• [woocommerce_checkout] – Affiche le formulaire de paiement.
• [woocommerce_my_account] – Affiche le tableau de bord du compte client.
• [woocommerce_order_tracking] – Fournit un formulaire permettant aux clients de suivre leurs commandes.

Le [products] est le plus polyvalent. Il est essentiel pour afficher des produits sur les pages et articles autres que la page principale de la boutique. Sa structure de base est simplement [products] . Ce shortcode affiche à lui seul une grille de vos derniers produits. Mais sa véritable puissance réside dans ses attributs.

Pour en savoir plus : Comment configurer un panier d’achat WordPress pour des ventes en ligne fluides

Anatomie du shortcode [produits]

La véritable flexibilité du shortcode produit WooCommerce réside dans ses attributs. Les attributs sont des paramètres que vous ajoutez entre crochets pour contrôler les produits affichés et leur apparence. On peut les considérer comme des commandes qui donnent des instructions spécifiques au shortcode.

Voici un aperçu rapide des attributs les plus courants que vous utiliserez. Il s'agit de la liste essentielle des shortcodes de produits WooCommerce.

Attribut	Fonction	Valeurs possibles
limite	Définit le nombre de produits à afficher.	Tout entier positif (par exemple, 8, 12)
colonnes	Définit le nombre de colonnes de la grille.	1 à 6
trier par	Spécifie le mode de tri des produits.	date , titre , identifiant , popularité , note , aléatoire
commande	Définit l'ordre de tri.	ASC (Ascendant) ou DESC (Descendant)
identifiants	Affiche les produits spécifiques par leur identifiant.	Liste d'identifiants de produits séparés par des virgules (par exemple, "1,2,3")
références	Affiche les produits spécifiques par leur référence.	Liste des références produits séparées par des virgules (ex. : « hoodie-01,tee-02 » )
catégorie	Filtrer par identifiant ou slug de catégorie de produit.	Liste de noms de catégories séparés par des virgules (ex. : « vêtements,accessoires » )
en solde	Affiche les produits actuellement en promotion.	vrai
visibilité	Filtres par visibilité des produits.	visible , catalogue , recherche , en vedette
paginer	Permet la pagination d'une liste de produits.	vrai
classe	Ajoute une classe CSS personnalisée à la grille.	N'importe quel nom de classe CSS (par exemple, « my-custom-grid » )

N'oubliez pas d'utiliser systématiquement des guillemets droits ( « » ) autour des valeurs de vos attributs. L'utilisation de guillemets courbes est une erreur fréquente, car elle invalide le shortcode.

À lire également : Comment résoudre le problème d’affichage des produits WooCommerce sur la page boutique : solutions rapides

Maîtriser la sélection de produits : cas d’utilisation pratiques et avancés des codes courts

Découvrez maintenant des exemples concrets de shortcodes de produits WooCommerce et apprenez à les utiliser efficacement. Ces exemples vous aideront à créer des sections de produits dynamiques et personnalisées sur n'importe quelle page.

Affichage des produits vedettes

Le shortcode WooCommerce pour les produits phares est idéal pour mettre en avant vos meilleures ventes ou vos articles en promotion sur la page d'accueil. Pour l'utiliser, vous devez d'abord marquer les produits comme « phares » dans le tableau de bord WooCommerce. Rendez-vous dans « Produits », survolez un article et cliquez sur l'icône en forme d'étoile. L'étoile deviendra bleue, indiquant que le produit est mis en avant.

Code court : [products visibility="featured"]

Ce code court affiche tous les produits que vous avez marqués comme produits phares. Vous pouvez le combiner avec d'autres attributs pour affiner l'affichage.

Exemple : Afficher 8 produits phares dans une grille à 4 colonnes, triés aléatoirement. [products visibility="featured" limit="8" columns="4" orderby="rand"]

Produits spécifiques par ID ou SKU

Il arrive que vous deviez afficher un ou deux produits spécifiques, par exemple dans un article de blog ou une page de destination . C'est là que le shortcode d'identifiant de produit WooCommerce s'avère utile. Vous pouvez utiliser l' `ids` avec une liste d'identifiants de produits séparés par des virgules.

Code court : [products ids="12, 35, 78"]

Vous pouvez également utiliser les références produits (SKU), qui sont souvent plus faciles à mémoriser.

Code court : [produits skus="chemise-01, pantalon-02"]

Comment trouver les identifiants et les références : Dans votre tableau de bord WordPress, accédez à WooCommerce → Produits. L’identifiant du produit apparaît dans une petite colonne à côté de son nom. Vous pouvez également survoler le titre du produit pour afficher l’identifiant dans l’URL. La référence se trouve sur la page d’édition du produit, dans la section « Données produit ».

Filtrer par catégorie

Le shortcode de catégorie de produits WooCommerce est l'un des attributs les plus puissants. Il vous permet de créer des sections dédiées à un type de produit spécifique, comme une section « Nouveaux T-shirts » ou une page « Accessoires ».

Code court : [produits catégorie="t-shirts"]

Pour trouver le slug d'une catégorie, accédez à WooCommerce → Produits → Catégories . Le slug est un nom convivial pour l'URL de la catégorie.

Exemple : Afficher 9 produits des catégories « sweats à capuche » et « t-shirts » sur 3 colonnes. [products category="hoodies, t-shirts" limit="9" columns="3"]

Affichage des produits en promotion et des meilleures ventes

Créer une page dédiée aux ventes est une excellente stratégie marketing. Vous pouvez facilement le faire avec un code court.

Code court pour les produits en promotion : [products on_sale="true"]

De même, vous pouvez mettre en avant vos produits les plus performants.

Code court pour les meilleures ventes : [products best_selling="true"]

Combinaison de filtres pour des affichages personnalisés

La véritable magie opère lorsque vous combinez plusieurs attributs. Cela vous permet de créer des grilles de produits précises et attrayantes.

Exemple : Afficher les 12 produits les plus populaires et en promotion de la catégorie « vêtements » sur 4 colonnes. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]

Ce contrôle précis vous permet de créer une expérience d'achat unique qui fidélise vos clients.

Options d'affichage avancées : pagination, tri et style personnalisé

Le shortcode produit WooCommerce permet de sélectionner les produits et de contrôler leur apparence et leur comportement sur une page.

Pagination pour les listes de produits longues

Pour les pages contenant de nombreux produits, la pagination est indispensable afin d'éviter des temps de chargement et une expérience utilisateur . L' attribut `paginate`

Code court : [products paginate="true" per_page="12"]

L' per_page, associé à la pagination, permet de spécifier le nombre d'éléments affichés sur chaque page. Il s'agit d'un élément essentiel du shortcode produit WooCommerce avec fonctionnalité de pagination.

Tri et classement

Vous pouvez définir l'ordre de vos produits à l'aide des attributs orderby et order

• orderby="price" : Trie les produits par leur prix.
• orderby="rating" : Trie par note moyenne des clients.
• orderby="popularity" : Trie par nombre d'achats.
• orderby="rand" : Mélange aléatoirement les produits à chaque chargement de page.

L' order détermine le sens du tri. order="ASC" pour un tri ascendant (par exemple, du prix le plus bas au plus élevé) et order="DESC" pour un tri descendant (par exemple, du prix le plus élevé au plus bas).

Exemple : Afficher 10 produits triés par note décroissante. [products limit="10" orderby="rating" order="DESC"]

Style personnalisé avec cours

Pour les designers et les développeurs, l' `class` est un outil puissant pour la personnalisation des shortcodes produits WooCommerce. Il permet d'ajouter une classe CSS unique à l'élément conteneur de la grille de produits. Ainsi, vous pouvez appliquer un style personnalisé au rendu de votre shortcode sans affecter les autres grilles de produits de votre site.

Code court : [products class="hero-products"]

Ensuite, dans votre CSS personnalisé, vous pouvez cibler cette classe : .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }

Conseils de compatibilité

Le shortcode produit WooCommerce fonctionne avec l'éditeur classique, l'éditeur de blocs Gutenberg (via un bloc « Shortcode » dédié) et la plupart des principaux constructeurs de pages. Il est également conçu pour être adaptatif, c'est-à-dire qu'il s'ajuste à la taille de l'écran. Toutefois, il est toujours recommandé de tester vos shortcodes sur ordinateur et mobile afin de vérifier leur affichage correct.

Cas d'utilisation stratégiques : où et pourquoi utiliser les codes courts de produits

Connaître la syntaxe est une chose ; l’utiliser de manière stratégique en est une autre. Voici quelques idées pour améliorer votre boutique grâce au shortcode produit WooCommerce .

• Page d'accueil : Créez des sections dédiées aux « Nouveautés », aux « Meilleures ventes » et aux articles « En promotion » afin de guider immédiatement les visiteurs vers vos produits les plus essentiels.

• Articles de blog : Intégrez un produit unique ou une petite grille de produits dans un article de blog. Par exemple, si vous rédigez un article sur le style d’une nouvelle veste, utilisez un code court pour afficher cette veste et d’autres produits complémentaires directement sous l’article.

• Pages de destination par catégorie : Créez des pages de destination personnalisées pour une catégorie spécifique. Vous pouvez ajouter un texte unique, puis utiliser un code court pour afficher uniquement les produits de cette catégorie.

• Pages de destination marketing : Pour une nouvelle campagne, vous pouvez créer une page de destination présentant des produits avec une étiquette spécifique ou issus d’une nouvelle collection, en utilisant un shortcode produit WooCommerce personnalisé pour générer des conversions.

Lire la suite : Comment ajouter une option de pourboire sur la page de paiement WooCommerce

Meilleures pratiques de dépannage et d'optimisation

Même avec un outil simple comme un shortcode, des problèmes peuvent survenir. Voici comment résoudre les problèmes courants et garantir le bon fonctionnement de votre site.

• Vérifiez les fautes de frappe : une parenthèse manquante, une faute de frappe dans un nom d’attribut ou des guillemets incorrects peuvent entraîner l’affichage du shortcode en texte brut. Relisez attentivement votre code.

• Trouvez les identifiants et les slugs : assurez-vous d’utiliser les identifiants de produit, les références et les slugs de catégorie corrects. Le moyen le plus simple de les vérifier est d’utiliser le tableau de bord WordPress.

• Mise en cache et performances : afficher trop de produits avec un seul shortcode peut ralentir votre site. Utilisez les `limit` et `paginate` pour contrôler le nombre de produits. Utilisez un bon plugin de cache pour accélérer le chargement des pages.

• Besoins avancés : Si vous avez besoin d’un filtrage dynamique, d’une pagination AJAX ou d’autres fonctionnalités complexes, un plugin dédié peut s’avérer nécessaire. Des outils comme WooCommerce Product Table ou WooCommerce Product Filters peuvent étendre considérablement les fonctionnalités du shortcode.

Conclusion : Votre boîte à outils pour l’affichage dynamique des produits WooCommerce

Le shortcode produit WooCommerce révolutionne le commerce en ligne. Il offre une solution simple et performante pour créer des présentations de produits dynamiques, attrayantes et hautement personnalisées sur votre site web. En maîtrisant le [products] et ses attributs, vous pouvez transformer vos pages statiques en outils de merchandising performants.

Commencez par les bases, comme une section dédiée aux produits phares sur votre page d'accueil, puis expérimentez des combinaisons plus avancées pour créer des pages de destination uniques et intégrer stratégiquement vos produits dans le contenu de votre blog. Ce code court vous permet de créer une boutique en ligne professionnelle et conviviale sans écrire une seule ligne de code. Ajoutez ce guide à vos favoris et commencez dès aujourd'hui à créer des présentations de produits plus attrayantes !

FAQ sur le shortcode produit WooCommerce