Comment obtenir et afficher les descriptions de produits dans WooCommerce 

WooCommerce stocke les descriptions de produits dans deux champs : la description complète du produit et la description courte. Vous pouvez ajouter ou récupérer les deux via l'administration WordPress, avec PHP en utilisant $product->get_description(), ou en personnalisant la mise en page de votre boutique avec un constructeur de pages comme SeedProd.

Dans ce guide, je vais vous montrer comment obtenir et afficher les descriptions de produits dans WooCommerce, y compris comment :

• Rédiger et ajouter des descriptions de produits WooCommerce de la bonne manière
• Utiliser la description courte de WooCommerce sur votre page de boutique
• Personnaliser les pages de produits avec SeedProd, sans code

Pourquoi les descriptions de produits WooCommerce sont-elles importantes ?

Les acheteurs visitent votre boutique en ligne pour plusieurs raisons :

1. Rechercher ce que vous avez à offrir
2. Chercher un produit spécifique
3. Vous comparer à des alternatives
4. Faire du lèche-vitrine

Si les visiteurs ont du mal à obtenir les informations dont ils ont besoin, ils quitteront votre site avant d'acheter. Pourtant, si vous offrez aux acheteurs des descriptions de produits uniques et détaillées, ils peuvent rapidement trouver ce qu'ils cherchent.

Les descriptions de produits WooCommerce incitent également les clients potentiels à cliquer pour en savoir plus sur vos produits.

Par exemple, si les utilisateurs voient une courte description de produit sur votre page de boutique, ils peuvent cliquer pour lire la description complète. À partir de là, ils peuvent :

• Connaître le prix
• Voir les images du produit
• Explorer les spécifications du produit
• Lire les avis et les notes

Ces informations peuvent persuader les utilisateurs d'acheter le produit sur-le-champ.

Votre prochaine question est probablement : « comment ajouter des descriptions de produits dans WooCommerce ? ». Continuez à lire pour le découvrir.

Comment obtenir les descriptions de produits WooCommerce avec PHP

WooCommerce fournit deux méthodes PHP pour récupérer les descriptions de produits par programme : get_description() pour la description complète et get_short_description() pour la description courte. Vous les utiliserez dans des modèles personnalisés, des fonctions de thème enfant ou des hooks.

Voici le code complet pour récupérer les deux descriptions pour n'importe quel produit :

// Get the WooCommerce product object
$product = wc_get_product( $product_id );

// Get the full product description
$description = $product->get_description();

// Get the short product description
$short_description = $product->get_short_description();

Les deux méthodes retournent des chaînes HTML.

Par exemple : <p>Votre texte de description.</p>.

WooCommerce stocke les descriptions via l'éditeur WordPress. Affichez-les avec echo $description directement dans les modèles. N'utilisez pas esc_html() ici, car cela imprimerait les balises HTML littéralement au lieu de les rendre.

Si vous travaillez à l'intérieur d'une boucle ou d'un hook où vous avez déjà la variable globale $product, vous pouvez appeler ces méthodes directement sans wc_get_product(). Le modèle ci-dessus est pour récupérer les descriptions en dehors de la boucle par ID de produit.

Ensuite, faites défiler vers le bas et saisissez les détails de votre produit dans la section Données produit, notamment :

• Type de produit
• Prix normal et prix soldé
• Inventaire
• Expédition
• Produits liés
• Attributs
• Avancé

Sous cette section se trouve la Description courte du produit. Il s'agit d'une version plus courte de votre description complète du produit que vous pouvez afficher pour inciter les utilisateurs à cliquer.

N'oubliez pas d'ajouter la catégorie du produit et de télécharger des images pour vos produits. Vous pouvez ensuite cliquer sur Mettre à jour ou Publier pour rendre vos modifications publiques.

Comment obtenir et afficher les descriptions de produits dans WooCommerce avec SeedProd

Ajouter des descriptions de produits personnalisées à WooCommerce est très facile avec SeedProd.

SeedProd est le meilleur constructeur de sites web et plugin de page de destination pour WordPress. Il vous permet de créer des thèmes WordPress personnalisés, des sites WooCommerce et des mises en page flexibles sans code.

Il est facile de commencer avec plus de 180 modèles de pages de destination et plus de 25 thèmes WordPress préconçus. Vous pouvez personnaliser chaque design dans le constructeur de pages visuel par glisser-déposer de SeedProd.

La personnalisation de votre boutique en ligne ne prend pas de temps avec les blocs et sections personnalisables de SeedProd. Vous pouvez afficher facilement les produits WooCommerce avec les balises de modèle WooCommerce et les personnaliser en pointant et en cliquant. 

Vous pouvez même utiliser SeedProd pour créer des sites de commerce électronique entiers avec des pages de produits uniques, des paniers d'achat, une page de paiement, des archives et des pages de boutique. Le plugin est ultra-rapide et sans bloatware, garantissant que votre site fonctionne rapidement pour les visiteurs.

Suivez les étapes ci-dessous pour obtenir les descriptions de produits dans WooCommerce et les afficher avec SeedProd.

Étape 1. Installer le constructeur de site SeedProd

Tout d'abord, téléchargez le fichier du plugin SeedProd sur votre ordinateur.

Remarque : Il existe une version gratuite de SeedProd, mais nous utiliserons le plan Elite de SeedProd pour les fonctionnalités WooCommerce.

Ensuite, installez et activez SeedProd sur votre site WordPress. Vous pouvez suivre ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide.

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

Vous pouvez trouver votre clé de licence en vous connectant à votre compte SeedProd et en cliquant sur l'onglet Téléchargements.

Maintenant, entrez votre clé dans le champ de texte et cliquez sur le bouton Vérifier la clé.

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

Pour utiliser les fonctionnalités WooCommerce de SeedProd, vous devrez créer un nouveau thème WordPress avec SeedProd. Cela remplacera votre thème existant par un design personnalisé, et c'est facile à faire, même pour les débutants.

Pour ce faire, allez dans SeedProd » Theme Builder et cliquez sur le bouton Thèmes.

Ensuite, vous verrez la bibliothèque de modèles de sites web préconçus de SeedProd. Lorsque vous trouvez un modèle qui vous plaît, survolez-le et cliquez sur l'icône de coche.

Après avoir importé votre thème, SeedProd mettra à disposition toutes les parties de la démo du thème.

Note : Nous appelons les parties individuelles d'un thème des « modèles ».

Cliquer sur chaque modèle l'ouvrira dans l'éditeur glisser-déposer de SeedProd, où vous pourrez personnaliser le contenu et le design.

Le premier modèle que nous allons modifier dans ce tutoriel est la Page Produit. Lorsque les visiteurs cliquent sur un produit de votre boutique, ils verront la page produit avec les détails de cet article.

Étape 3. Modifier le modèle de page produit

Pour personnaliser votre page produit, survolez votre souris sur le modèle de page produit et cliquez sur le lien Modifier le design.

Le modèle s'ouvrira dans l'éditeur visuel glisser-déposer de SeedProd, où vous pourrez cliquer pour modifier le design et la mise en page.

Tout d'abord, regardons comment ajouter une courte description du produit à votre page.

Sur le côté gauche de votre écran, trouvez la section Balises de modèle WooCommerce et faites glisser le bloc Description courte sur votre design.

La sortie WooCommerce pour ce bloc utilise par défaut la balise de description courte, mais vous pouvez la personnaliser pour répondre aux besoins de votre boutique. Vous pouvez également personnaliser l'apparence de la description dans les paramètres du bloc.

Par exemple, vous pouvez modifier l'alignement de la description, la taille de la police et insérer du texte dynamique.

Dans l'onglet Avancé, vous pouvez personnaliser les styles du bloc, y compris les couleurs, les polices, l'espacement, etc.

Vous pouvez suivre des étapes similaires pour ajouter de longues descriptions aux pages produits. Faites simplement glisser le bloc Contenu du produit du panneau de gauche et déposez-le à sa place.

Comme précédemment, vous pouvez personnaliser le contenu, le style et les couleurs en quelques clics.

Note : Vous ne verrez pas d'aperçu du bloc Contenu du produit dans l'éditeur en direct.

Étape 4. Personnaliser le reste de votre site WooCommerce

Après avoir ajouté les descriptions de produits à votre page, vous pouvez continuer à personnaliser le reste de votre boutique. Cliquez simplement sur le lien Modifier le design sur n'importe quel modèle pour changer le contenu qu'il affiche et son apparence.

Par exemple, vous pouvez :

• Personnaliser les pages de catégories de produits
• Afficher les produits en vedette
• Ajouter une barre latérale WordPress personnalisée

Vous aurez une boutique WooCommerce entièrement personnalisée, prête à transformer les acheteurs en clients une fois que vous aurez terminé.

Étape 5. Publiez votre site Web WooCommerce

Lorsque vous êtes satisfait de votre nouvelle conception, il est temps de la mettre en ligne.

Pour ce faire, accédez à la page SeedProd » Theme Builder et, dans le coin supérieur droit, cliquez sur le bouton Activer le thème SeedProd jusqu’à ce qu’il soit en position « activé ».

Vous pouvez maintenant prévisualiser n’importe quel produit sur votre site et voir les descriptions courtes et longues en action.

Voici à quoi ressemblera votre description courte :

Et voici à quoi ressemblera la description longue en fonction de votre mise en page :

Comment afficher les descriptions de produits sur la page de la boutique WooCommerce

WooCommerce n’affiche pas les descriptions courtes ou complètes sur la page de la boutique, les pages de catégories ou les pages d’archives par défaut. Pour afficher les descriptions sur ces pages, vous avez trois options.

Option 1 : SeedProd (sans code)

Les modèles d’archives de produits de SeedProd vous permettent de personnaliser vos pages de boutique et de catégories dans l’éditeur visuel.

Ajoutez le bloc Description courte à votre modèle de page de boutique et il s’affichera sous chaque produit dans la grille, sans code requis.

C’est la même approche que celle couverte dans la section SeedProd ci-dessus, appliquée aux modèles de pages d’archives au lieu des pages de produits individuels.

Option 2 : Plugin WooCommerce Product Description on Shop Page

Le plugin WooCommerce Product Description on Shop Page est un plugin WordPress gratuit qui ajoute des options d’affichage de description aux paramètres de votre page de boutique. Installez-le, activez-le et configurez le type de description qui apparaît dans la grille de produits.

Option 3 : Hook PHP (approche développeur)
Si vous préférez une solution basée sur le code, l’extrait suivant ajoute la description courte sous chaque titre de produit sur la page de la boutique. Familiarisez-vous avec la façon d’ajouter des extraits de code à WordPress avant d’utiliser cette approche, ou utilisez un plugin d’extraits de code pour l’ajouter en toute sécurité.

/**
 * SeedProd - Add short description to products listing on shop page (only)
 */
add_action( 'woocommerce_after_shop_loop_item_title', 'sp_wc_add_short_description' );
function sp_wc_add_short_description() {
    if( is_shop() ){
        global $product;
        ?>
        <div class="woocommerce-loop-product-description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
        </div>
        <?php        
    }
}

Lorsque vous prévisualisez votre page de boutique WooCommerce, vous verrez les descriptions des produits au-dessus du bouton « ajouter au panier ».

Dépannage : la description du produit ne s’affiche pas dans WooCommerce

Si la description de votre produit ne s’affiche pas là où vous l’attendez, les causes les plus courantes sont :

• Utilisation du mauvais type de description (la description complète et la description courte s’affichent à des endroits différents)
• Un thème qui remplace les fichiers de modèle par défaut de WooCommerce,
• Le comportement par défaut de WooCommerce (les descriptions courtes n’apparaissent que sur les pages de produits individuels, pas sur les pages de boutique ou de catégorie prêtes à l’emploi).

Vérifiez quelle description vous avez remplie dans l’éditeur de produit et comparez-la à l’endroit où vous vous attendez à la voir.

Si vous utilisez un thème personnalisé, vérifiez s’il inclut le hook d’action woocommerce_short_description ou le conteneur .woocommerce-product-details__short-description dans le modèle de produit individuel.

Plus de façons de personnaliser WooCommerce

Il existe de nombreuses autres façons de personnaliser l'affichage de vos produits par WooCommerce. Pour plus de personnalisations WooCommerce, veuillez consulter les guides suivants :

• Comment personnaliser l'onglet Informations supplémentaires de WooCommerce
• Comment ajouter un bouton « Voir le panier » dans WooCommerce
• Comment changer le titre de la page Boutique dans WooCommerce
• Comment créer une superbe galerie d'images de produits dans WooCommerce 
• Comment ajouter des évaluations par étoiles aux pages produits WooCommerce
• Comment afficher les produits liés dans WooCommerce
• Comment afficher les catégories et les tags de produits dans WooCommerce 
• Comment corriger le problème « Voir le panier » de WooCommerce qui ne fonctionne pas
• Comment masquer les produits hors stock dans WooCommerce

FAQ sur la description des produits WooCommerce

Quelle est la différence entre la description d'un produit WooCommerce et une description courte ?

WooCommerce dispose de deux champs de description. La description complète du produit apparaît dans l'onglet de l'éditeur principal sous le titre du produit et s'affiche dans un onglet ou une section dédiée sur la page du produit unique. La description courte est un bref résumé saisi dans le champ Description courte du produit. Elle apparaît par défaut sous le titre du produit et au-dessus du bouton Ajouter au panier. Aucune des deux n'apparaît sur les pages de boutique ou de catégorie, sauf si vous les ajoutez avec un plugin, du code ou un constructeur de pages comme SeedProd.

Comment afficher la description du produit sur la page de la boutique WooCommerce ?

WooCommerce n'affiche pas les descriptions sur la page de la boutique par défaut. Vous avez trois options : utiliser les modèles d'archives de produits de SeedProd pour ajouter un bloc de description courte à la mise en page de votre page de boutique sans code, installer le plugin WooCommerce Product Description on Shop Page, ou ajouter un hook PHP à l'aide de l'action woocommerce_after_shop_loop_item_title avec $product->get_short_description().

Pourquoi ma description de produit WooCommerce ne s'affiche-t-elle pas ?

Les raisons les plus courantes sont : vous avez rempli le mauvais champ de description (les descriptions complètes et courtes s'affichent à des endroits différents), votre thème surcharge les modèles par défaut de WooCommerce, ou vous vous attendez à ce qu'une description apparaisse sur une page où WooCommerce ne l'affiche pas par défaut. Vérifiez le champ que vous avez rempli, confirmez où ce champ est censé s'afficher et vérifiez que votre thème ne supprime pas la sortie.

Et voilà !

Nous espérons que cet article vous a aidé à apprendre comment obtenir des descriptions de produits dans WooCommerce et à les afficher pour vos clients. 

SeedProd inclut tout ce dont vous avez besoin pour personnaliser n'importe quelle partie de votre site Web WordPress et de votre boutique WooCommerce. Vous pouvez même utiliser SeedProd pour lancer des sites Web clients comme Mustard Seed l'a fait dans cette étude de cas.

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.