Comment personnaliser l'onglet « Informations supplémentaires » de WooCommerce 

Si votre page produit a un onglet qui apparaît vide, semble déplacé, ou dit simplement « Informations supplémentaires » sans rien dire d'utile aux acheteurs, vous n'êtes pas coincé avec. L'onglet informations supplémentaires de WooCommerce est entièrement personnalisable, et la plupart des modifications ne prennent que quelques minutes.

Dans ce guide, je vais vous expliquer comment modifier les informations supplémentaires dans WooCommerce pour changer son nom, le retoucher, le déplacer ou le supprimer entièrement, selon ce qui convient le mieux à votre boutique.

Qu'est-ce que l'onglet Informations supplémentaires de WooCommerce ?

L'onglet informations supplémentaires de WooCommerce est un onglet de page produit qui affiche automatiquement le poids, les dimensions et les attributs personnalisés de votre produit. Il n'apparaît que lorsqu'un produit a au moins un attribut ou un détail d'expédition assigné, donc si vous voyez un onglet vide, c'est généralement pourquoi.

Mais l'onglet informations supplémentaires peut faire plus que lister les spécifications. C'est l'un des premiers endroits où les acheteurs regardent lorsqu'ils ont besoin de confirmer qu'un produit leur convient. Le laisser générique ou vide peut vous coûter la vente.

Comment ajouter des informations supplémentaires aux produits WooCommerce

Avant d'explorer les options de personnalisation, regardons comment ajouter des détails produit à l'onglet informations supplémentaires dans WooCommerce. La fonctionnalité d'attributs intégrée de WooCommerce est le bon point de départ pour ajouter des éléments 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 un nom descriptif à votre attribut, tel que « Autonomie de la batterie », « Matériau » ou « Informations sur la garantie ». C'est ce que les clients verront sur le site.

Cliquez ensuite sur Ajouter un attribut.

Maintenant, modifiez le produit auquel vous souhaitez ajouter ces informations, faites défiler jusqu'à la section Données 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).

Maintenant, cliquez sur Enregistrer les attributs, puis sur Mettre à jour votre produit.

Votre nouvel attribut apparaîtra maintenant soigneusement organisé dans l'onglet Informations supplémentaires sur la page produit.

Comment personnaliser l'onglet Informations supplémentaires de WooCommerce

Vous avez ajouté des détails précieux sur le produit à votre onglet Informations supplémentaires. Rendons-le plus efficace pour votre boutique. Un onglet générique ne guide pas les acheteurs vers un achat. Ces méthodes vous donnent un contrôle réel sur ce qu'il affiche et sur son apparence.

Modifier le style de l'onglet Informations supplémentaires

L'éditeur visuel de SeedProd vous permet de personnaliser les onglets de produits WooCommerce sans toucher au code. Vous pouvez modifier les couleurs, la typographie, l'espacement et les bordures pour correspondre à votre marque, le tout à partir d'une interface glisser-déposer.

Lorsque vous êtes prêt à styliser l'onglet Informations supplémentaires, accédez à SeedProd » Theme Builder depuis votre tableau de bord WordPress et cliquez sur « Modifier le design » dans le modèle Page Produit.

Une fois dans l'éditeur visuel, recherchez le bloc appelé Onglets de données produit. Cela 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, qui vous donnent un contrôle complet sur :

• Couleurs des onglets : Changez les couleurs d'arrière-plan, de texte et de bordure pour les états actif et inactif.
• Typographie : Ajustez la police, la taille, le poids et le style du texte de l'onglet.
• Espacement et remplissage : Contrôlez l'espacement autour et à l'intérieur du contenu de l'onglet.
• Bordures : Ajoutez ou personnalisez des bordures pour que l'onglet se démarque.
• Styles de tableau : Stylisez le tableau de données produit, y compris les couleurs du texte, le remplissage, et même ajoutez un effet d'ombre.

Lorsque vous êtes satisfait du design, cliquez sur « Enregistrer » et prévisualisez vos modifications. Voici à quoi ressemblent mes modifications lorsque je prévisualise la page produit :

Nouveau sur SeedProd ? Consultez ce guide pour apprendre comment configurer une boutique en ligne sur WordPress.

Déplacer les informations supplémentaires vers la description

Vous souhaitez simplifier votre page produit et rendre les informations clés faciles à trouver ? Vous pouvez déplacer le contenu des Informations supplémentaires directement sous votre description de produit WooCommerce dans SeedProd.

Tout d'abord, modifiez la page produit pour afficher l'éditeur visuel. Selon le bloc que vous utilisez, faites glisser les Onglets de données produit de leur emplacement actuel vers le dessous de votre description produit.

Cliquez maintenant sur « Enregistrer » et prévisualisez votre page produit pour voir à quoi elle ressemble.

Masquer les informations supplémentaires de WooCommerce

Si un produit n'a pas d'attributs ou de détails d'expédition pertinents, masquer l'onglet informations supplémentaires permet de garder la page produit propre. C'est un meilleur choix que de laisser un onglet vide ou peu rempli visible pour les acheteurs.

Si vous utilisez SeedProd pour personnaliser votre page produit WooCommerce, vous pouvez supprimer le bloc Onglets de données produit en quelques clics.

Survolez le bloc Onglets de données produit et cliquez sur l'icône de la corbeille pour le supprimer.

Et voilà. Vos pages produit sont maintenant débarrassées de l'encombrement inutile.

Besoin de masquer l'onglet pour des catégories de produits spécifiques ? L'approche par extrait PHP (abordée dans la section Supprimer ci-dessous) peut être étendue pour cibler uniquement les produits de certaines catégories. Ainsi, vous masquez les informations supplémentaires pour les produits où elles ne sont pas pertinentes, sans affecter le reste de votre catalogue.

Supprimer les informations supplémentaires de WooCommerce

Vous voulez un contrôle plus granulaire ? Vous pouvez supprimer les informations supplémentaires sur une base produit par produit. Cette option est utile si vous souhaitez uniquement désencombrer des pages produit 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 ». Ensuite, cliquez sur supprimer pour les attributs que vous souhaitez supprimer.

Lorsque vous consultez la page de ce produit, l'onglet Informations supplémentaires aura disparu.

Remarque : Cette méthode supprime les attributs, pas seulement leur affichage sur le front-end. Si vous avez besoin de ces informations plus tard, il est préférable d'utiliser SeedProd pour masquer l'onglet plutôt que de supprimer les données.

Renommer l'onglet Informations supplémentaires

« Informations supplémentaires » est un peu long. Si vous souhaitez modifier l'onglet informations supplémentaires de WooCommerce pour mieux refléter le contenu de votre produit, vous pouvez changer le nom de l'onglet avec un court extrait de code.

Note : Pour cette méthode, j'utiliserai WPCode pour ajouter des extraits de code personnalisés au lieu de modifier directement les fichiers du thème. Voici un guide sur comment utiliser WPCode. Avant de continuer, faites une sauvegarde de votre site web pour vous assurer de ne rien perdre en cas de problème.

Si ce n'est pas déjà fait, installez et activez le plugin WPCode.

Après l'activation, allez dans Extraits de code » Ajouter nouveau et choisissez « Ajouter votre code personnalisé (Nouvel extrait) ».

Ensuite, donnez un titre à votre extrait : Quelque chose comme « Renommer l'onglet Informations supplémentaires » conviendra. 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;
}

Maintenant, remplacez 'Votre Nouveau Nom d'Onglet' par le nom d'onglet souhaité (par exemple, 'Spécifications Produit', 'Plus d'infos', etc.). J'ai utilisé « Informations Produit ».

Si vous n'êtes pas sûr du domaine de texte de votre thème, vous pouvez laisser 'your-theme-textdomain' comme 'woocommerce'.

Sous « Type de code », sélectionnez « Extrait PHP ».

Maintenant, cliquez sur le bouton « Enregistrer l'extrait », puis basculez le commutateur « Inactif » sur « Actif ».

C'est tout. Consultez votre page produit. Votre onglet Informations supplémentaires a maintenant un tout nouveau nom.

Comment réorganiser les onglets produit de WooCommerce

Si l'onglet Informations supplémentaires n'a pas sa place à la fin de votre page produit, vous pouvez le déplacer. L'éditeur visuel de SeedProd rend cela simple, sans nécessiter de code.

Depuis SeedProd » Theme Builder, ouvrez votre modèle Page Produit. Dans l'éditeur visuel, trouvez le bloc Onglets de données produit et faites-le glisser à l'endroit où vous souhaitez que le groupe d'onglets apparaisse sur la page.

Pour réorganiser les onglets individuels au sein du groupe d'onglets, WooCommerce utilise un système de priorité. L'onglet Informations supplémentaires a une priorité par défaut de 20, tandis que l'onglet Description est à 10 et Avis à 30. Un nombre plus bas apparaît en premier.

Vous pouvez ajuster l'ordre des onglets avec un extrait PHP via WPCode. Ajoutez ce code pour modifier la priorité de l'onglet Informations supplémentaires :

add_filter( 'woocommerce_product_tabs', 'reorder_additional_information_tab', 98 );

function reorder_additional_information_tab( $tabs ) {
  $tabs['additional_information']['priority'] = 5; // Lower number = appears first
  return $tabs;
}

Modifiez le numéro de priorité pour contrôler l'ordre. Une valeur de 5 place Informations supplémentaires avant l'onglet Description, tandis que 25 le place entre Description et Avis.

Ajouter du contenu personnalisé à l'onglet Informations supplémentaires

Prêt à aller au-delà des attributs de produit de base ? Vous pouvez transformer votre onglet Informations supplémentaires en un centre de contenu. Voici deux façons d'ajouter des champs et du contenu dynamique à l'onglet informations supplémentaires de WooCommerce.

Méthode 1 : Utilisation d'extraits PHP

Si vous êtes à l'aise avec un peu de code, les extraits PHP vous donnent plus de contrôle sur le contenu qui apparaît dans votre onglet. J'utiliserai le plugin WPCode pour garder les choses organisées.

Créez un nouvel extrait avec un titre descriptif (par exemple, « Ajouter du contenu personnalisé à l'onglet Informations supplémentaires »).

Ensuite, collez le code suivant dans l'éditeur d'extrait :

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 d'exemple dans les instructions echo par le contenu souhaité. Dans mon exemple, j'ajouterai des détails sur les informations d'expédition.

Ensuite, enregistrez votre extrait, définissez 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é à l'onglet informations supplé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 (pas seulement de personnaliser celui existant) avec 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 produit personnalisées, vous pouvez également utiliser ses fonctionnalités pour afficher ce contenu dans l'onglet Informations supplémentaires.

Questions fréquemment posées

Comment ajouter des informations supplémentaires aux produits WooCommerce ?

Allez dans Produits » Attributs dans votre tableau de bord WordPress et créez un nouvel attribut avec un nom descriptif. Ensuite, modifiez le produit, ouvrez l'onglet Attributs dans le panneau Données produit, et assignez votre attribut avec les valeurs pertinentes. Cliquez sur Enregistrer les attributs et mettez à jour le produit. L'attribut apparaîtra dans l'onglet Informations supplémentaires sur la page produit.

Comment masquer l'onglet informations supplémentaires de WooCommerce ?

Si vous utilisez SeedProd, ouvrez votre modèle de Page Produit dans Theme Builder et supprimez le bloc Onglets de données produit. Cela supprime l'onglet globalement pour tous les produits.

Pour le masquer uniquement pour certaines catégories de produits, vous pouvez étendre l'approche par extrait PHP à l'aide de WPCode pour cibler les produits par catégorie, laissant l'onglet visible pour les produits où il est utile.

Comment renommer l'onglet d'informations supplémentaires de WooCommerce ?

Utilisez WPCode pour ajouter un extrait PHP qui filtre le hook woocommerce_product_tabs. Dans l'extrait, définissez $tabs['additional_information']['title'] sur votre libellé préféré, tel que « Spécifications du produit » ou « Plus d'infos ». Enregistrez et activez l'extrait, et vos pages produit afficheront immédiatement le nouveau nom de l'onglet.

Pourquoi mon onglet d'informations supplémentaires WooCommerce ne s'affiche-t-il pas ?

L'onglet Informations supplémentaires n'apparaît que lorsqu'un produit possède au moins un attribut ou un champ d'expédition (poids ou dimensions) assigné. Si l'onglet est manquant, vérifiez l'onglet Attributs dans le panneau Données produit et confirmez qu'au moins un attribut a une valeur enregistrée.

Si vous utilisez SeedProd et que l'onglet n'apparaît toujours pas, vérifiez que le bloc Onglets de données produit est présent dans votre modèle de page produit et qu'il n'a pas été supprimé.

Prêt à créer des pages produits qui convertissent ?

La personnalisation de l'onglet d'informations supplémentaires WooCommerce est l'un des gains les plus rapides disponibles pour toute page produit. Utilisez SeedProd pour créer facilement de belles pages produit axées sur la conversion sans écrire de code.

Voici quelques autres astuces, conseils et tutoriels WooCommerce qui pourraient vous être utiles :

• 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 masquer les produits hors stock dans WooCommerce

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