L'onglet Informations complémentaires de WooCommerce est un endroit pratique pour ajouter des détails supplémentaires sur les produits que les acheteurs apprécient, comme des spécifications détaillées, des informations sur la livraison et des instructions d'entretien. Mais il y a un hic : WooCommerce dispose déjà de fonctionnalités intégrées pour cela.
Dans ce guide, je vais vous montrer comment débloquer le véritable pouvoir de l'onglet Informations complémentaires. Nous nous débarrasserons des éléments redondants, nous personnaliserons ce qui reste et nous créerons une page produit qui convertit.
L'onglet Informations complémentaires est lié aux données de votre produit WooCommerce, mais cela ne signifie pas que vous devez vous contenter de son apparence ou de ce qu'il affiche. Dans ce guide, je vous expliquerai comment le modifier, le renommer, le remodeler ou le supprimer, en fonction de ce qui convient à votre boutique.
Table des matières
- Qu'est-ce que l'onglet Informations complémentaires de WooCommerce ?
- Comment ajouter des informations supplémentaires aux produits WooCommerce
- Comment personnaliser l'onglet Informations complémentaires de WooCommerce
- Modifier le style de l'onglet Informations complémentaires
- Déplacer des informations supplémentaires dans la description
- Cacher les informations supplémentaires de WooCommerce
- Supprimer les informations complémentaires de WooCommerce
- Renommer l'onglet Informations complémentaires
- Ajouter un contenu personnalisé à l'onglet Informations complémentaires
Qu'est-ce que l'onglet Informations complémentaires de WooCommerce ?
L'onglet Informations complémentaires apparaît à côté de l'onglet Description sur la page du produit, et fait partie de la présentation que les acheteurs voient avant d'atteindre la page du panier de WooCommerce. Par défaut, WooCommerce utilise cet onglet pour afficher les attributs de base du produit tels que la taille, le poids et le matériau.
Mais l'onglet Informations complémentaires peut faire bien plus. Au lieu de se contenter d'indiquer des détails de base, il faut considérer cet espace comme un bien immobilier de premier ordre pour stimuler les ventes.
Pourquoi ? Parce que 87 % des consommateurs n'achèteront plus jamais chez vous si leur premier achat est entaché d'informations inexactes ou incomplètes sur le produit.(source)
Ce guide vous montrera comment transformer votre onglet "Informations complémentaires" en un élément clé d'un parcours client positif.
Comment ajouter des informations supplémentaires aux produits WooCommerce
Avant d'explorer les options de personnalisation, examinons comment ajouter les détails d'un produit à l'onglet des informations complémentaires dans WooCommerce.
La fonction d'attributs intégrée de WooCommerce est un excellent point de départ pour des ajouts simples tels que le matériau, les dimensions ou les instructions d'entretien.
Dans votre tableau de bord WordPress, allez dans Produits " Attributs. C'est ici que vous gérerez tous les attributs de vos produits.
Donnez à votre attribut un nom descriptif, tel que "Durée de vie de la batterie", "Matériau" ou "Informations sur la garantie". C'est ce que les clients verront au premier abord.
Cliquez ensuite sur Ajouter un attribut.
Modifiez maintenant le produit dans lequel vous souhaitez ajouter ces informations, descendez dans la section Données du produit et cliquez sur l'onglet Attributs.
Choisissez votre nouvel attribut dans le menu déroulant, puis ajoutez les informations pertinentes dans le champ Valeur(s).
Cliquez ensuite sur Enregistrer les attributs, puis sur Mettre à jour votre produit.
Votre nouvel attribut sera désormais bien organisé dans l'onglet Informations complémentaires de la page du produit.
Comment personnaliser l'onglet Informations complémentaires de WooCommerce
Vous avez ajouté de précieux détails sur le produit dans votre onglet Informations complémentaires. Mais un onglet générique n'a pas vraiment l'air de crier "Regardez-moi !". Il est temps de vous approprier cet onglet et de l'utiliser pour guider les clients vers l'achat.
Modifier le style de l'onglet Informations complémentaires
L'onglet Informations complémentaires est un espace de premier choix sur votre page produit - ne le laissez pas se fondre dans l'arrière-plan. Avec SeedProd, vous pouvez facilement personnaliser son style pour qu'il corresponde à votre marque et attire l'attention sur ces informations précieuses.
SeedProd est le meilleur constructeur de site web WordPress pour créer des boutiques WooCommerce étonnantes et axées sur la conversion. Son interface drag-and-drop et ses blocs préconstruits vous donnent une liberté totale de conception, même si vous n'êtes pas un codeur.
Nouveau sur SeedProd ? Consultez ce guide pour apprendre à créer une boutique en ligne avec WordPress.
Lorsque vous êtes prêt à styliser l'onglet Informations supplémentaires, rendez-vous sur SeedProd " Theme Builder depuis votre tableau de bord WordPress et cliquez sur "Edit Design" sur le modèle de la page produit.
Une fois dans l'éditeur visuel, cherchez le bloc appelé Onglets de données de produit. Il contrôle la mise en page de vos onglets de produits WooCommerce, y compris la section Informations supplémentaires.
Cliquez sur le bloc pour ouvrir ses paramètres de conception, ce qui vous permet de contrôler entièrement son design :
- Couleurs des onglets: Modifier les couleurs de l'arrière-plan, du texte et de la bordure pour les états actifs et inactifs.
- Typographie : Ajuster la police, la taille, la graisse et le style du texte de l'onglet.
- Espacement et remplissage : Contrôle l'espacement autour et à l'intérieur du contenu de l'onglet.
- Bordures : Ajoutez ou personnalisez des bordures pour faire ressortir l'onglet.
- Styles de tableau : Modifiez le tableau des données produit, y compris les couleurs du texte, le remplissage, et ajoutez même un effet d'ombre.
Lorsque vous êtes satisfait de la conception, cliquez sur "Enregistrer" et prévisualisez vos modifications. Voici ce que donnent mes modifications lorsque je prévisualise la page produit :
Déplacer des informations supplémentaires dans la description
Vous souhaitez simplifier votre page produit et faire en sorte que les informations essentielles soient faciles à trouver ? Vous pouvez directement déplacer le contenu des informations supplémentaires dans votre description de produit dans SeedProd.
Commencez par modifier la page du produit pour afficher l'éditeur visuel. En fonction du bloc que vous utilisez, faites glisser l'onglet Données produit de son emplacement actuel vers le dessous de la description du produit.
Cliquez maintenant sur "Enregistrer" et prévisualisez votre page produit pour voir à quoi elle ressemble.
Cacher les informations supplémentaires de WooCommerce
Votre produit est tellement génial qu'il n'a pas besoin de détails supplémentaires ? Je comprends. Parfois, moins, c'est mieux. Si vous n'utilisez pas l'onglet Informations complémentaires, il est préférable de le supprimer complètement et de créer une page produit super épurée.
Si vous utilisez SeedProd pour personnaliser votre page produit WooCommerce, vous pouvez simplement supprimer le bloc Product Data Tabs en quelques clics.
Survolez le bloc Onglets de données produit et cliquez sur l'icône de la corbeille pour le supprimer.
Voilà, c'est fait. Vos pages produits sont désormais exemptes de tout encombrement inutile.
Supprimer les informations complémentaires de WooCommerce
Vous souhaitez un contrôle plus précis ? Vous pouvez supprimer les informations complémentaires produit par produit. Cette option est intéressante si vous souhaitez désencombrer des pages produits spécifiques.
Pour ce faire, allez dans "Produits" dans votre tableau de bord WordPress et choisissez le produit que vous souhaitez modifier.
Dans le panneau "Données produit", cliquez sur l'onglet "Attributs". Cliquez ensuite sur les attributs que vous souhaitez supprimer.
Lorsque vous consultez la page du produit, l'onglet "Informations complémentaires" disparaît.
Renommer l'onglet Informations complémentaires
"Informations supplémentaires" - c'est un peu fort, n'est-ce pas ? Si vous souhaitez modifier l'onglet Informations complémentaires dans WooCommerce pour mieux refléter le contenu de votre produit, vous pouvez modifier le nom de l'onglet à l'aide d'un extrait de code rapide.
Si ce n'est pas déjà fait, installez et activez le plugin WPCode.
Après l'activation, allez dans Code Snippets " Add New et choisissez "Add Your Custom Code (New Snippet)" (Ajouter votre code personnalisé (nouveau snippet)).
Ensuite, donnez un titre à votre extrait : Quelque chose comme "Renommer l'onglet Informations complémentaires" fera l'affaire. Collez ensuite le code suivant dans l'éditeur de code :
add_filter( 'woocommerce_product_tabs', 'rename_additional_information_tab', 10, 1 );
function rename_additional_information_tab( $tabs ) {
$tabs['additional_information']['title'] = __( 'Your New Tab Name', 'your-theme-textdomain' ); // Customize the tab name here
return $tabs;
}
Remplacez ensuite "Nom de votre nouvel onglet" par le nom de l'onglet de votre choix (par exemple, "Spécifications du produit", "Plus d'informations", etc.) J'ai utilisé "Informations sur le produit".
Si vous n'êtes pas sûr du domaine de texte de votre thème, vous pouvez laisser "your-theme-textdomain" à "woocommerce".
Sous "Code Type", sélectionnez "PHP Snippet".
Cliquez ensuite sur le bouton "Enregistrer l'extrait", puis faites basculer le commutateur "Inactif" sur "Actif".
Voilà, c'est fait. Consultez votre page produit : l'onglet Informations complémentaires porte désormais un tout nouveau nom.
Ajouter un contenu personnalisé à l'onglet Informations complémentaires
Prêt à aller au-delà des attributs de base des produits ? Vous pouvez transformer votre onglet "Informations complémentaires" en un centre de contenu complet. Examinons deux façons d'ajouter du contenu dynamique : en utilisant des extraits PHP pour la flexibilité ou des plugins WordPress pour la facilité d'utilisation.
Méthode 1 : Utilisation de snippets PHP
Si vous êtes à l'aise avec un peu de code, les extraits PHP vous permettent de mieux contrôler le contenu qui apparaît sur votre onglet. Nous utiliserons le fidèle plugin WPCode pour organiser les choses.
Créez un nouvel extrait avec un titre descriptif (par exemple, "Ajouter un contenu personnalisé à l'onglet Informations complémentaires").
Collez ensuite le code suivant dans l'éditeur de snippets :
add_action( 'woocommerce_product_additional_information', 'add_custom_content_to_additional_info' );
function add_custom_content_to_additional_info() {
// Add your custom content here!
echo '<p>This is some custom content added to the Additional Information tab!</p>';
echo '<ul>';
echo '<li>You can add text, HTML, shortcodes...</li>';
echo '<li>...even output content from custom fields!</li>';
echo '</ul>';
}Vous pouvez remplacer le contenu de l'exemple dans les instructions echo par le contenu de votre choix. Dans mon exemple, j'ajouterai des détails sur les informations d'expédition.
Ensuite, enregistrez votre extrait, réglez son "Type de code" sur "Extrait PHP" et activez-le.
Vous pouvez maintenant consulter la page de votre produit pour voir les nouvelles informations :
Méthode 2 : Utilisation de plugins WordPress
Vous préférez une approche plus visuelle ? Plusieurs plugins WooCommerce facilitent l'ajout de contenu personnalisé dans l'onglet Informations complémentaires de WooCommerce :
- Plugins de gestion d'onglets : Des plugins comme YITH WooCommerce Tab Manager et WooCommerce Product Tabs vous permettent de créer des onglets entièrement nouveaux (et pas seulement de personnaliser les onglets existants) par simple glisser-déposer.
- Plugins de champs personnalisés : Si vous utilisez déjà un plugin comme Advanced Custom Fields (ACF) pour gérer les données personnalisées des produits, vous pouvez également utiliser ses fonctionnalités pour afficher ce contenu dans l'onglet Additional Info.
Prêt à créer des pages de produits qui convertissent ?
Vous êtes maintenant sur la bonne voie pour maîtriser l'onglet Informations complémentaires de WooCommerce. Vous avez appris à ajouter du contenu utile, à supprimer le désordre, à personnaliser le style et même à déplacer des éléments pour créer une expérience d'achat plus fluide et plus convaincante.
C'est maintenant à vous de jouer. Utilisez SeedProd pour rendre ridiculement facile la construction de belles pages produits axées sur la conversion.
Voici d'autres conseils, astuces et tutoriels WooCommerce qui pourraient vous être utiles :
- Comment ajouter un bouton "Voir le panier" dans WooCommerce
- Comment changer le titre de la page de la boutique dans WooCommerce
- Comment créer une superbe galerie d'images de produits dans WooCommerce
- Comment ajouter un classement par étoiles aux pages produits de WooCommerce
- Comment masquer les produits en rupture de stock dans WooCommerce
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
