Comment afficher les produits mis en avant de WooCommerce (+ produits associés) 

Dans une boutique WooCommerce que je gérais, je laissais la disposition par défaut décider de ce que les clients voyaient. Les clients partaient sans explorer quoi que ce soit au-delà du produit sur lequel ils avaient atterri.

Deux petits changements ont résolu ce problème : les produits mis en avant de WooCommerce pour placer les meilleurs articles là où les gens regardent réellement, et les produits associés pour suggérer un prochain achat judicieux. Ensemble, ils ont conduit à plus de clics et à des commandes plus importantes.

Dans ce guide, je vais vous montrer 3 façons d'afficher les produits mis en avant, puis comment configurer et personnaliser les produits associés, les ventes incitatives et les ventes croisées.

Que sont les produits mis en avant WooCommerce ?

Un produit mis en avant est un produit que vous marquez manuellement dans WooCommerce pour le mettre en valeur. Une fois qu'un produit est défini comme « Mis en avant », vous pouvez l'afficher dans des sections spéciales de votre site, séparément de votre catalogue habituel.

Les meilleurs produits à mettre en avant sont généralement vos meilleures ventes, les nouveautés ou les articles à forte marge. De nombreux propriétaires de boutiques font tourner les produits mis en avant de manière saisonnière, mettant en avant les articles d'hiver en décembre ou les articles de rentrée en août.

Les produits mis en avant ne sont pas les mêmes que les produits associés. Vous choisissez vous-même les produits mis en avant, tandis que WooCommerce choisit automatiquement les produits associés en fonction des catégories et des étiquettes partagées. Je vais expliquer comment configurer les produits associés plus loin dans ce guide.

Comment ajouter des produits mis en avant dans WooCommerce

Avant de pouvoir afficher les produits mis en avant, vous devez d'abord les marquer dans WooCommerce. Vous pouvez le faire en modifiant n'importe quel produit existant.

Accédez à Produits » Tous les produits depuis votre zone d'administration WordPress. Ensuite, survolez un produit avec votre souris et cliquez sur l'option Modifier.

Ensuite, trouvez le panneau « Publication » sur le côté droit de l'éditeur WordPress. De là, cliquez sur Modifier à côté de l'en-tête « Visibilité du catalogue ».

Cochez la case « Ceci est un produit mis en avant » et sélectionnez OK. Cliquez ensuite sur Mettre à jour pour enregistrer vos modifications.

Répétez ce processus pour chaque produit que vous souhaitez définir comme mis en avant. Pour accélérer les choses, vous pouvez cliquer sur l'option Édition rapide et trouver la case à cocher « Produit mis en avant » dans ce panneau.

Alternativement, vous pouvez cliquer sur l'icône en étoile à côté de chaque produit pour le mettre en avant.

Vous ne savez pas quels articles présenter ? Commencez par vos meilleures ventes ou vos offres saisonnières sur vos pages de produits.

Une fois que vous avez marqué vos produits comme mis en avant, voici trois façons de les afficher sur votre boutique.

Méthode 1 : Afficher les produits mis en avant de WooCommerce avec SeedProd

Cette première méthode utilise SeedProd pour afficher plusieurs produits mis en avant sur votre boutique à la fois.

SeedProd est l'un des meilleurs constructeurs de sites Web WordPress, avec plus d'un million d'utilisateurs. Vous pouvez créer un thème WordPress personnalisé avec son constructeur glisser-déposer, sans aucun codage requis.

Pour les propriétaires de boutiques, la partie utile est l'intégration WooCommerce. Vous pouvez afficher des données de produits en direct n'importe où sur votre site, et les grilles de produits flexibles facilitent la création de mises en page personnalisées sans code.

Voici comment utiliser SeedProd pour afficher vos produits mis en avant WooCommerce.

Étape 1. Installer et activer SeedProd

Commencez par installer et activer SeedProd sur votre site WordPress.

Vous pouvez suivre ce guide sur comment installer un plugin WordPress si vous avez besoin d'aide.

Après avoir activé SeedProd, allez dans SeedProd » Paramètres et entrez votre clé de licence SeedProd.

Vous pouvez trouver la clé de licence dans la section « Téléchargements » de votre tableau de bord de compte sur le site Web de SeedProd.

Après avoir entré votre clé de licence, cliquez sur le bouton Vérifier la clé pour enregistrer les informations de votre compte.

Étape 2. Créer un thème WooCommerce

Ensuite, configurez votre boutique WooCommerce.

SeedProd vous offre deux façons de le faire :

• Thème WooCommerce pré-conçu : importez un modèle de thème WooCommerce prêt à l'emploi, et SeedProd crée automatiquement toutes vos pages de boutique.
• Éléments de thème individuels : construisez chaque partie de votre boutique une par une en utilisant le bouton Modèles de thème.

Nous utiliserons le thème prédéfini pour ce guide car il configure tout en un clic.

Pour créer un nouveau thème WooCommerce, allez dans SeedProd » Constructeur de thèmes et cliquez sur le bouton Thèmes.

Cela ouvre la bibliothèque de thèmes de SeedProd. Chaque thème est adapté aux mobiles et vous pouvez modifier le design dans le constructeur par glisser-déposer.

Survolez n'importe quelle conception et cliquez sur la coche pour l'importer. Nous utilisons ici le « Thème de démarrage WooCommerce ».

Après l'importation, vous verrez tous les modèles qui composent votre site. Vous pouvez modifier chacun d'eux dans le constructeur de SeedProd, comme la personnalisation de la page Boutique.

Étape 3. Ajouter la grille de produits vedettes WooCommerce

Dans cette étape, vous modifierez la page Boutique et ajouterez une grille de produits qui affiche uniquement vos produits vedettes.

Trouvez le modèle de page Boutique dans le constructeur de thèmes et cliquez sur Modifier la conception.

Le constructeur de pages de SeedProd affiche les blocs et les sections à gauche et un aperçu en direct à droite.

Cliquez sur n'importe quel élément pour modifier ses paramètres.

Cliquez sur un produit pour ouvrir le panneau Grille de produits, où vous pouvez :

• Changer le nombre de colonnes
• Afficher les produits par type ou catégorie pour des mises en page de produits plus ciblées
• Afficher la pagination
• Changer l'ordre des produits

Vous pouvez personnaliser les polices, les tailles de police, les couleurs, l'espacement, et plus encore dans l'onglet Avancé.

L'ajout de contenu fonctionne de la même manière. Faites glisser un bloc du panneau de gauche et déposez-le sur la page.

Faites défiler vers le bas jusqu'au panneau des blocs WooCommerce dans la barre latérale gauche. Trouvez ensuite le bloc Produits en vedette et faites-le glisser sur votre page.

Cliquez sur le bloc pour ouvrir ses paramètres. Il filtre automatiquement vos produits par statut Vedette.

Il ne reste plus qu'à personnaliser la grille de produits selon vos besoins. Vous pouvez faire ressortir les produits en vedette en modifiant la couleur de l'étiquette, la bordure de l'image ou en ajoutant un titre au-dessus de la grille.

Lorsque vous êtes satisfait de la mise en page, cliquez sur le bouton vert Enregistrer.

Vous pouvez répéter ce processus pour personnaliser le reste de votre thème, y compris :

• Archives des produits
• Page produit
• En-tête et pied de page
• Page de blog
• Barre latérale
• Page d'accueil

Étape 4. Publier votre thème WooCommerce

Une fois que vous avez terminé la configuration de vos produits vedettes, vous êtes prêt à publier.

Pour ce faire, allez dans SeedProd » Constructeur de thèmes et activez le bouton Activer le thème SeedProd sur « On ».

C'est tout ! Vous pouvez maintenant prévisualiser votre boutique et voir vos produits en vedette en direct.

Méthode 2 : Utiliser le bloc Produit mis en avant WooCommerce

WooCommerce dispose d'un bloc intégré Produits en vedette que vous pouvez ajouter à n'importe quelle page ou publication de votre boutique en ligne. Aucun plugin supplémentaire n'est nécessaire.

Il a moins d'options que SeedProd, mais il est rapide à configurer si vous avez juste besoin d'un affichage de base.

Pour utiliser cette méthode, créez ou modifiez une page et cliquez sur l'icône plus (+) dans l'éditeur de blocs WordPress pour ajouter un nouveau bloc. Tapez ensuite « WooCommerce » dans le champ de recherche et cliquez sur le bloc Produit en vedette.

À partir de là, choisissez un produit à afficher et cliquez sur Terminé.

Votre produit apparaît immédiatement sur la page.

Les paramètres du bloc vous permettent de contrôler :

• Description
• Prix
• Superposition
• Opacité de la superposition

Le bloc Produit en vedette affiche un produit à la fois. Pour une grille de plusieurs articles en vedette, ajoutez plutôt le bloc Collection de produits et choisissez sa collection « Produits en vedette », qui filtre par statut de vedette pour vous.

Cliquez sur Publier ou Mettre à jour lorsque vous avez terminé. Prévisualisez ensuite votre page pour voir les produits en direct.

Si votre boutique utilise un thème classique, vous pouvez utiliser le même bloc pour afficher les produits en vedette dans votre barre latérale WooCommerce. Allez dans Apparence » Widgets, cliquez sur l'icône plus dans n'importe quelle barre latérale et ajoutez le bloc là.

Enregistrez vos modifications, puis visitez n'importe quelle page avec cette barre latérale pour voir le widget.

Méthode 3 : Utiliser le shortcode Produit mis en avant de WooCommerce

La troisième méthode utilise un shortcode. Il fonctionne dans l'éditeur WordPress classique, ou si vous souhaitez ajouter des produits en vedette directement dans un modèle de thème WordPress.

Modifiez ou créez une page et collez ce shortcode dans l'éditeur.

[featured_products]

Lorsque vous prévisualisez la page, vous verrez tous vos produits en vedette dans une grille.

Vous pouvez contrôler le nombre de produits à afficher et le nombre de colonnes à utiliser. Par exemple :

[featured_products limit="2" columns="2"]

Vous pouvez également filtrer par catégorie en utilisant category="slug", modifier l'ordre de tri avec orderby="date" ou orderby="popularity", et définir la direction avec order="ASC" ou order="DESC".

La documentation actuelle de WooCommerce ne liste que [products visibility="featured"], ce qui fait le même travail. Les deux shortcodes fonctionnent, mais la version products est celle qui est documentée.

Essayez différentes valeurs jusqu'à ce que vous trouviez une mise en page qui fonctionne. Les options sont limitées par rapport à SeedProd, mais c'est le moyen le plus rapide d'afficher des produits en vedette sans aucune configuration.

Comment configurer les produits associés dans WooCommerce (aucun plugin nécessaire)

Les produits en vedette mettent vos meilleurs articles devant les acheteurs. Les produits connexes font le travail inverse : ils suggèrent ce que quelqu'un pourrait vouloir ensuite, en fonction du produit qu'il est déjà en train de regarder.

WooCommerce génère sa section « Produits connexes » automatiquement à partir des catégories et des étiquettes partagées, vous ne pouvez donc pas choisir ces suggestions sans un plugin. Ce que vous pouvez contrôler, ce sont les ventes incitatives et les ventes croisées, que vous définissez par produit.

Une vente incitative est une version plus chère du produit que quelqu'un consulte. Une vente croisée est un produit qui s'associe à celui qui se trouve dans son panier, comme un étui suggéré à côté d'un téléphone.

Voici comment la configuration par défaut se compare à la personnalisation de vos produits associés avec SeedProd :

Fonctionnalité	WooCommerce par défaut	Constructeur SeedProd
Difficulté de configuration	Modéré (produit par produit)	Facile (glisser-déposer)
Contrôle de la conception	Limité	Contrôle visuel complet
Options de placement	Page produit uniquement	Produit, panier ou n'importe où
Mises en page personnalisées	Non pris en charge	Entièrement personnalisable
Ventes incitatives et ventes croisées	Oui	Oui
Aperçu mobile	Non	Oui
Plugin requis ?	Non	Oui (SeedProd)

Commençons par la méthode intégrée.

Étape 1. Ajouter des produits liés dans l'éditeur WooCommerce

Accédez à Produits » Tous les produits depuis votre administration WordPress et modifiez n'importe quel produit WooCommerce. Dans les options du produit, faites défiler jusqu'à la section Données du produit et trouvez l'onglet Produits liés.

Étape 2. Choisir les ventes incitatives et les ventes croisées pour chaque produit

La section Produits liés comporte 2 options : Ventes incitatives et Ventes croisées.

Commencez à taper les noms des produits dans le champ que vous souhaitez utiliser et cliquez sur les bons articles lorsqu'ils apparaissent.

Étape 3. Prévisualiser les produits liés sur la page produit

Après avoir ajouté des ventes croisées ou des ventes incitatives à vos produits WooCommerce, faites défiler la page vers le haut et cliquez sur le bouton Prévisualiser les modifications. Vous verrez les produits associés sous la description de votre produit actuel.

Cette méthode n'offre pas beaucoup d'options de personnalisation, mais c'est un moyen rapide de commencer à proposer des ventes incitatives et croisées. Si vous souhaitez contrôler où apparaissent les suggestions et à quoi elles ressemblent, la section suivante couvre cela.

Comment personnaliser les produits liés WooCommerce avec SeedProd

La section par défaut des produits associés ne se trouve que sur vos pages de produits, et vous ne pouvez pas changer son apparence. Avec SeedProd, vous pouvez placer des recommandations de produits sur votre page de panier, vos pages de produits, ou n'importe où ailleurs, et les styliser pour qu'elles correspondent à votre boutique.

Vous aurez besoin de SeedProd installé avec un thème WooCommerce importé pour cela. Si vous ne l'avez pas encore fait, suivez les étapes 1 et 2 de la Méthode 1 d'abord.

Étape 1. Ajouter des produits liés à la mise en page de votre page panier

La page du panier est un endroit judicieux pour les recommandations car les acheteurs ont déjà décidé d'acheter. Pour modifier la vôtre, accédez au tableau de bord du Theme Builder, trouvez le modèle de Panier, survolez-le et cliquez sur Modifier le design.

Votre page de panier s'ouvre dans le même éditeur visuel que celui que vous avez utilisé précédemment. Cliquer n'importe où sur l'aperçu vous permet de personnaliser les paramètres de ce bloc, tels que la typographie du bloc Panier, les styles des boutons et les couleurs des champs.

Faites maintenant défiler jusqu'à l'en-tête WooCommerce Template Tags dans la barre latérale gauche et trouvez le bloc Produits associés. Cliquez et faites glisser le bloc à sa place sur l'aperçu de votre page.

Dans les paramètres du bloc, vous pouvez ajuster les colonnes et modifier le nombre de produits associés. Vous pouvez également trier les produits par date, popularité, note, titre, et plus encore.

Dans l'onglet des paramètres Avancé, vous pouvez ajuster le style de votre bloc de produits associés, tels que la typographie, les couleurs, les boutons et les ombres d'image.

Lorsque vous êtes satisfait de l'apparence de tout, cliquez sur le bouton Enregistrer en haut à droite de votre écran.

Étape 2. Afficher les offres de ventes incitatives sur les pages de produits uniques

Pour proposer des ventes incitatives de produits WooCommerce, utilisez le bloc Ventes incitatives de SeedProd. Il puise dans les ventes incitatives que vous avez liées précédemment dans vos paramètres de produit WooCommerce, alors configurez-les d'abord.

Le bloc Ventes incitatives ne fonctionne que sur les modèles de page de produit unique, alors retournez au tableau de bord du Theme Builder et modifiez votre modèle de Page produit.

Le modèle que nous utilisons présente déjà des recommandations de produits. Supprimons donc ces produits associés en cliquant sur l'icône de la corbeille, faisant ainsi de la place pour les ventes incitatives.

Ensuite, trouvez le bloc Ventes incitatives dans la section WooCommerce Template Tags et faites-le glisser sur votre page.

Vous ne verrez pas d'aperçu en direct de ce bloc, mais vous pouvez le personnaliser comme le bloc de produits connexes. N'oubliez pas de cliquer sur Enregistrer lorsque vous avez terminé.

Étape 3. Publier et prévisualiser vos produits liés

Si votre thème SeedProd n'est pas encore actif, activez le bouton Activer le thème SeedProd, de la même manière que vous l'avez fait dans la méthode 1. Prévisualisez ensuite vos pages de produits et de panier pour voir les recommandations.

Voici un exemple de produits connexes sur la page du panier :

Et voici les ventes incitatives sur la page du produit :

Si vous souhaitez masquer les produits connexes, supprimez le bloc de votre modèle et enregistrez à nouveau.

FAQ sur les produits mis en avant et associés de WooCommerce

Comment supprimer le statut de produit en vedette dans WooCommerce ?

Allez dans Produits » Tous les produits dans votre tableau de bord WordPress et cliquez sur l'icône étoile à côté du produit pour désactiver le statut de produit en vedette. Vous pouvez également utiliser la modification rapide et décocher la case Produit en vedette, puis enregistrer. Le produit n'apparaîtra plus dans les affichages de produits en vedette ou les shortcodes.

Comment afficher uniquement les produits en vedette sur ma page de boutique WooCommerce ?

Le moyen le plus simple est d'utiliser SeedProd pour personnaliser votre page de boutique WooCommerce et d'ajouter un bloc de produits en vedette qui filtre automatiquement par statut de mise en vedette. Si vous préférez la boucle de produits par défaut, vous aurez besoin d'un plugin ou d'un extrait de code qui filtre les produits par l'indicateur de mise en vedette.

Puis-je limiter le nombre de produits en vedette affichés ?

Oui. Avec la méthode du shortcode, ajoutez limit="4" pour définir le nombre : [featured_products limit="4"]. Avec le bloc de grille de produits de SeedProd, vous définissez le nombre de produits directement dans le panneau des paramètres du bloc, aucun code requis.

Les produits en vedette de WooCommerce apparaissent-ils automatiquement sur ma page d'accueil ?

Non. Marquer un produit comme en vedette lui donne seulement ce statut dans WooCommerce. Vous devez toujours ajouter un bloc, un shortcode ou un widget à une page pour qu'ils s'affichent. La plupart des propriétaires de boutiques ajoutent manuellement des produits en vedette à leur page de boutique ou à leur page d'accueil en utilisant l'une des trois méthodes de ce guide.

Quelle est la différence entre les ventes incitatives (upsells) et les ventes croisées (cross-sells) dans WooCommerce ?

Les ventes incitatives sont des versions haut de gamme ou améliorées du produit actuel, et elles s'affichent sur la page du produit unique. Les ventes croisées sont des produits complémentaires qui apparaissent sur la page du panier lors du paiement. Vous pouvez ajouter les deux dans la section Produits liés lors de la modification d'un produit.

Y a-t-il une limite aux produits liés dans WooCommerce ?

Il n'y a pas de limite stricte, mais il est préférable de s'en tenir à 3 à 5 articles. Trop d'articles peuvent submerger les acheteurs et encombrer la page. Avec des outils comme SeedProd, vous pouvez choisir exactement combien de produits connexes afficher et où les afficher.

Plus de façons de personnaliser WooCommerce

Vous voulez faire plus avec votre boutique WooCommerce ?

Voici quelques guides qui peuvent vous aider :

• Comment personnaliser l'onglet Informations supplémentaires de WooCommerce
• Comment personnaliser votre page de panier WooCommerce
• Comment ajouter des évaluations par étoiles aux pages produits WooCommerce
• Comment afficher les catégories et les tags de produits dans WooCommerce
• Comment obtenir et afficher les descriptions de produits dans WooCommerce
• Comment ajouter des boutons personnalisés « Ajouter au panier » dans WooCommerce
• Comment créer une page de remerciement WooCommerce (facilement)
• Comment corriger le problème « Voir le panier » de WooCommerce qui ne fonctionne pas
• Comment masquer les produits hors stock dans WooCommerce

Vous savez maintenant comment afficher les produits en vedette de trois manières et comment placer les produits connexes, les ventes incitatives et les ventes croisées exactement là où les acheteurs les verront. Choisissez la méthode qui convient à votre boutique.

Prêt à donner un look personnalisé à vos recommandations de produits ? Vous n'avez pas besoin de toucher une ligne de code. Obtenez SeedProd et commencez à concevoir votre boutique dès aujourd'hui.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.