Comment supprimer l'onglet Informations supplémentaires dans WooCommerce

Ce n'est un secret pour personne que l'optimisation de votre boutique en ligne augmentera vos ventes et vos conversions. Si vous avez tout essayé et que vous cherchez quelque chose de différent pour améliorer votre entreprise, cet article est pour vous. Dans cet article, nous vous montrerons comment supprimer l'onglet d'informations supplémentaires dans WooCommerce et modifier les pages de produits individuelles.

Pourquoi supprimer l'onglet Informations supplémentaires ?

L'onglet Informations supplémentaires est principalement utilisé pour afficher des détails supplémentaires sur vos produits, tels que le poids, la longueur, la taille et la taille. Cela aide les clients à se faire une idée de la taille et du poids de l'article, afin qu'ils choisissent la bonne taille d'emballage lorsqu'ils passent une commande.

Cet onglet est important lorsque vous vendez des produits physiques, mais n'a pas beaucoup de sens si vous proposez des produits ou services numériques qui n'impliquent aucune expédition. Dans ces cas, l'onglet Informations supplémentaires n'est pas nécessaire.

Compte tenu de la concurrence actuelle dans le commerce électronique, vous devez supprimer les champs inutiles et garder votre boutique aussi propre que possible. Si quelque chose n'aide pas votre entreprise, il vaut mieux s'en débarrasser. Par exemple, si vous vendez des produits numériques, vous n'avez probablement pas besoin du champ du code postal, il est donc préférable de le désactiver ou de le rendre facultatif.

De même, vous devez supprimer l'onglet Informations supplémentaires s'il n'ajoute aucune valeur à vos clients ou à votre entreprise. Dans la section suivante, nous vous montrerons exactement comment procéder.

Comment supprimer l'onglet Informations supplémentaires dans WooCommerce

Dans cette section, nous vous montrerons deux façons de supprimer correctement l'onglet Informations supplémentaires dans WooCommerce .

1. Avec PHP
2. Utiliser CSS

Nous allons utiliser un peu de code, mais ne vous inquiétez pas. Même si vous êtes débutant, vous pourrez suivre chaque étape pour vous assurer de ne pas faire d'erreur.

REMARQUE : Comme nous allons modifier les fichiers du thème principal et ajouter du code supplémentaire au modèle, avant de commencer, assurez-vous d'avoir généré une sauvegarde complète de votre site Web. Nous vous recommandons également de créer un thème enfant et de modifier ces fichiers. De cette façon, vous ne perdrez aucune personnalisation lorsque vous mettrez à jour votre thème parent.

Pour éditer des fichiers avec du code, vous pouvez directement personnaliser le thème enfant ou utiliser un plugin. Dans ce guide, nous utiliserons des extraits de code. C'est un outil très utile pour les débutants car il facilite l'ajout de code. Au lieu d'ajouter les extraits au fichier functions.php de votre thème enfant, le plugin gère cela pour vous.

Maintenant, sans plus tarder, examinons les deux méthodes.

1) Supprimer l'onglet Informations supplémentaires avec PHP

Pour supprimer l' onglet Informations supplémentaires dans WooCommerce à l'aide de PHP, la première chose à faire est d'installer et d'activer le plugin Code Snippets sur votre site Web. De cette façon, vous pourrez ajouter des extraits personnalisés sans modifier vos fichiers de thème principaux.

Dans votre tableau de bord, accédez à Plugins > Add New , recherchez le plugin et installez-le.

Une fois que vous l'avez installé et activé, vous devez créer un nouvel extrait. Accédez à Extraits > Tous les extraits et appuyez sur Ajouter nouveau .

Maintenant, copiez le code suivant, collez-le dans la section extrait et activez-le.

 // Suppression de l'onglet informations complémentaires
 function quadlayers_remove_product_tabs( $tabs ) {
 unset( $tabs['informations_supplémentaires'] );
 retourner $tabs ;
 }
 add_filter('woocommerce_product_tabs', 'quadlayers_remove_product_tabs', 98); 

Ensuite, vérifiez votre page produit à partir du front-end et vous verrez que l'onglet Informations supplémentaires a disparu.

Voici comment vous pouvez utiliser PHP pour supprimer l'onglet Informations supplémentaires.

Pour supprimer d'autres onglets, vous pouvez simplement changer le nom de l'onglet dans cette ligne :

 unset( $tabs['onglet que vous voulez supprimer'] );

Comme vous pouvez le voir, cette méthode est assez simple mais ce n'est pas la seule. Dans la section suivante, nous vous montrerons comment supprimer l'onglet Informations supplémentaires de votre boutique WooCommerce à l'aide de CSS .

2) Supprimer l'onglet Informations supplémentaires avec CSS

La bonne chose à propos de la méthode CSS est que vous n'avez pas besoin de plugins. Vous pouvez simplement utiliser la fonctionnalité CSS supplémentaire disponible dans WordPress Customizer pour terminer la tâche. Voyons comment faire.

Dans votre tableau de bord WordPress , allez dans Apparence > Personnaliser .

Une fois dans le Customizer, rendez-vous dans la section CSS supplémentaire .

Copiez maintenant le code CSS suivant et collez-le dans l'éditeur. Consultez l'aperçu et vous verrez les modifications instantanément.

 /* Masquer l'onglet des informations supplémentaires */
 li.additional_information_tab {
 affichage : aucun ! important ;
 } 

Si vous êtes satisfait du résultat, n'oubliez pas de publier les mises à jour.

C'est ça! C'est ainsi que vous pouvez supprimer l'onglet Informations supplémentaires de votre boutique WooCommerce à l'aide de CSS .

Supprimer l'onglet Informations supplémentaires de la page de paiement

Jusqu'à présent, nous avons vu comment supprimer l'onglet Informations supplémentaires de la page du produit. Cependant, cet onglet apparaît également sur la page de paiement. Dans ce cas, il permet aux acheteurs de fournir plus d'informations et de notes sur leurs commandes.

Si vous souhaitez supprimer l'onglet Informations supplémentaires de la page de paiement WooCommerce , cette section est pour vous.

Avant de commencer, voyons à quoi ressemble l'onglet Informations supplémentaires sur la page de paiement :

Maintenant, pour supprimer cet onglet, nous allons utiliser un peu de CSS.

Copiez simplement le code suivant, collez-le dans la section CSS supplémentaire du personnalisateur et appuyez sur Publier .

 .woocommerce-additional-fields {
 affichage : aucun ;
 } 

Actualisez ensuite la page de paiement et vous verrez que les informations supplémentaires ont disparu.

C'est ça! C'est ainsi que vous pouvez supprimer l'onglet Informations supplémentaires de la page de paiement avec un peu de CSS .

Comment personnaliser l'onglet Informations supplémentaires

Supposons maintenant qu'au lieu de supprimer directement l'onglet Informations supplémentaires de votre boutique, vous souhaitiez le personnaliser. Dans cette section, nous allons vous montrer quelques options différentes pour personnaliser l'onglet Informations supplémentaires.

Renommer l'onglet Informations supplémentaires

Si vous souhaitez clarifier le contenu de l'onglet Informations supplémentaires, vous pouvez le renommer. En plus de décrire ce qu'il contient, vous vous démarquerez de vos concurrents car la plupart des magasins en ligne ne le font pas.

À l'aide du plug-in Code Snippets, créez un nouvel extrait et collez le code suivant :

 /**
 * Renommer l'onglet Informations supplémentaires
 */
 add_filter( 'woocommerce_product_tabs', 'quadlayers_rename_tabs', 98 );
 function quadlayers_rename_tabs( $tabs ) {
 $tabs['additional_information']['title'] = __( 'Informations sur le produit' ); // Renommer l'onglet Informations complémentaires
 retourner $tabs ;
 }

Si vous regardez attentivement le code, vous verrez que nous utilisons cette ligne pour changer le nom de l'onglet :

 $tabs['additional_information']['title'] = __( 'Informations sur le produit' ); // Renommer l'onglet Informations complémentaires

Dans cet exemple, nous avons changé le nom en Informations sur le produit, mais n'hésitez pas à prendre le code et à l'ajuster en fonction de vos préférences.

Après avoir saisi le code, publiez les modifications et vous verrez comment l'onglet Informations supplémentaires a changé son nom en Informations sur le produit.

Jusqu'à présent, nous avons vu comment supprimer l'onglet Informations supplémentaires et comment le renommer dans WooCommerce. Mais vous pouvez faire plus. Voyons comment vous pouvez ajouter un nouvel onglet à votre page produit.

Comment ajouter un nouvel onglet

Si vous vendez quelque chose d'unique ou un produit nouveau ou qui a beaucoup de spécifications, vous voudrez peut-être ajouter des onglets supplémentaires à la page du produit. Dans cette section, nous allons vous montrer comment vous pouvez ajouter un onglet à une seule page de produit à l'aide de certains extraits de code PHP.

Tout d'abord, ouvrez les paramètres des extraits de code et créez un nouvel extrait PHP. Ensuite, collez-y le code suivant.

 /**
 * Ajouter un nouvel onglet de données produit
 */
 add_filter( 'woocommerce_product_tabs', 'quadlayers_new_product_tab' );
 function quadlayers_new_product_tab( $tabs ) {

 // Ajout de l'onglet

 $tabs['test_tab'] = tableau(
 'title' => __( 'onglet produit personnalisé', 'woocommerce' ),
 'priorité' => 50,
 'callback' => 'quadlayers_new_product_tab_content'
 );

 retourner $tabs ;

 }
 fonction quadlayers_new_product_tab_content() {

 // Contenu de l'onglet

 echo '<h2>Onglet produit personnalisé</h2>' ;
 echo '<p>Votre nouvel onglet produit.</p>' ;

 }

Après avoir collé le code, enregistrez-le pour appliquer les modifications.

Vérifiez maintenant l'une de vos pages de produits à partir du front-end et vous verrez le nouvel onglet.

En utilisant le même code, vous pouvez le modifier pour ajouter plusieurs onglets si nécessaire. Et c'est tout! C'est ainsi que vous pouvez ajouter des onglets personnalisés à votre page de produit WooCommerce.

Maintenant, avant de terminer le message, voyons une autre chose que vous pouvez faire pour personnaliser l'onglet Informations supplémentaires.

Comment réorganiser les onglets

Une autre astuce utile que vous pouvez utiliser dans votre magasin consiste à réorganiser les onglets sur la page du produit. Sans utiliser de plugins, vous pouvez modifier l'ordre des onglets. Voyons comment le faire en utilisant des extraits de code PHP.

Par défaut, WooCommerce organise les onglets comme suit :

1. La description
2. Information additionnelle
3. Commentaires

Supposons que vous souhaitiez mettre en évidence les avis et le mettre en premier. Pour réorganiser les onglets, vous utiliseriez ce code :

 /**
 * Réorganiser les onglets
 */
 add_filter( 'woocommerce_product_tabs', 'quadlayers_reorder_tabs', 98 );
 function quadlayers_reorder_tabs( $tabs ) {

 $tabs['avis']['priorité'] = 5 ; // Avis d'abord
 $tabs['description']['priorité'] = 10 ; // Description deuxième
 $tabs['additional_information']['priority'] = 15 ; // Informations complémentaires tiers

 retourner $tabs ;
 }

Comme vous pouvez le voir, nous utilisons l'attribut prioritaire pour placer les onglets dans les ordres que nous voulons. Dans ce cas, nous mettrons d'abord les avis, puis la description et enfin l'onglet Informations supplémentaires. Prenez le code comme base et modifiez-le en fonction de vos besoins.

Une fois que vous avez décidé de la commande, collez le code dans les paramètres du plugin Code Snippets et activez-le.

Vérifiez maintenant l'une de vos pages de produits à partir du front-end et vous verrez les onglets réorganisés en fonction de votre nouvelle priorité.

Pour plus d'informations et d'exemples sur la façon d'apporter des modifications à votre page produit, consultez notre guide sur la personnalisation de la page produit WooCommerce.

Pour plus d'informations et des exemples d'extraits, consultez la page de documentation de WooCommerce.

Conclusion

Dans l'ensemble, l'onglet Informations supplémentaires contient généralement des détails sur vos produits tels que le poids, la longueur, la taille et la taille. Cependant, si vous ne vendez pas de produits physiques, il peut être judicieux de supprimer cet onglet.

Dans ce guide, nous vous avons montré comment supprimer l'onglet d'informations supplémentaires dans WooCommerce en utilisant deux méthodes différentes.

1. PHP
2. CSS

Les deux méthodes sont assez simples et ne nécessitent pas beaucoup de connaissances en programmation. Si vous connaissez PHP, vous pouvez utiliser un plugin spécifique au site pour ajouter l'extrait ou modifier directement le fichier functions.php de votre thème enfant. Alternativement, si vous n'êtes pas à l'aise pour éditer vos fichiers de thème, vous pouvez utiliser la méthode CSS. Il ne nécessite aucun outil supplémentaire et vous pouvez ajouter le code à l'aide de WordPress Customizer. Grâce à l'aperçu en direct de Customizer, vous pourrez voir la modification en temps réel.

De plus, nous avons vu comment supprimer l'onglet Informations supplémentaires de la page de paiement et quelques exemples différents sur la façon de changer le nom de l'onglet, d'ajouter un nouvel onglet et de modifier l'ordre des onglets.

Quelle méthode avez-vous utilisée pour supprimer l'onglet Informations supplémentaires de votre boutique WooCommerce ? Connaissez-vous une autre méthode ? Faites-nous savoir dans la section commentaire ci-dessous!

Pour plus de tutoriels sur la personnalisation de votre boutique, consultez les articles suivants :

• Comment personnaliser la page de la boutique WooCommerce
• Personnalisez la page du produit à l'aide d'Elementor
• Comment modifier la section Produits associés