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 allons vous montrer deux façons de supprimer l’onglet Informations supplémentaires dans WooCommerce dans le bon sens.
- Avec PHP
- 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 functions.php
fichier 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 le Onglet Informations supplémentaires dans WooCommerce en utilisant PHP, la première chose que vous devez 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> Ajouter un nouveaurecherchez le plugin et installez-le.
Une fois que vous l’avez installé et activé, vous devez créer un nouvel extrait. Aller à Extraits > Tous les extraits et appuyez sur Ajouter nouveau.
Maintenant, copiez le code suivant, collez-le dans la section extrait et activez-le.
// Remove the additional information tab function quadlayers_remove_product_tabs( $tabs ) { unset( $tabs['additional_information'] ); return $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['tab you want to remove'] );
Comme vous pouvez le voir, cette méthode est assez simple mais ce n’est pas la seule. Dans la section suivante, nous allons vous montrer comment supprimez 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 le CSS supplémentaire fonctionnalité disponible dans le Personnalisateur WordPress pour terminer la tâche. Voyons comment faire.
Dans votre Tableau de bord WordPressaller à Apparence > Personnaliser.
Une fois dans le Customizer, allez dans le CSS supplémentaire section.
Copiez maintenant le code CSS suivant et collez-le dans l’éditeur. Consultez l’aperçu et vous verrez les modifications instantanément.
/* Hide additional information tab */ li.additional_information_tab { display: none !important; }
Si vous êtes satisfait du résultat, n’oubliez pas de publier les mises à jour.
C’est ça! C’est comme ça que tu peux supprimez 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 tu veux supprimer l’onglet Informations supplémentaires de la page de paiement WooCommercecette rubrique 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 le CSS supplémentaire partie de la Personnalisateur, et appuyez sur Publier.
.woocommerce-additional-fields { display: none; }
Actualisez ensuite la page de paiement et vous verrez que les informations supplémentaires ont disparu.
C’est ça! C’est comme ça que tu peux 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 :
/** * Rename Additional Information tab */ add_filter( 'woocommerce_product_tabs', 'quadlayers_rename_tabs', 98 ); function quadlayers_rename_tabs( $tabs ) { $tabs['additional_information']['title'] = __( 'Product Information' ); // Rename the Additional Information tab return $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'] = __( 'Product Information' ); // Rename the Additional Information tab
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.
/** * Add a new product data tab */ add_filter( 'woocommerce_product_tabs', 'quadlayers_new_product_tab' ); function quadlayers_new_product_tab( $tabs ) { // Add the tab $tabs['test_tab'] = array( 'title' => __( 'Custom Product Tab', 'woocommerce' ), 'priority' => 50, 'callback' => 'quadlayers_new_product_tab_content' ); return $tabs; } function quadlayers_new_product_tab_content() { // Tab content echo '<h2>Custom Product Tab</h2>'; echo '<p>Your new product tab.</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 :
- La description
- Informations Complémentaires
- Commentaires
Supposons que vous souhaitiez mettre en évidence les avis et le mettre en premier. Pour réorganiser les onglets, vous utiliseriez ce code :
/** * Re-order tabs */ add_filter( 'woocommerce_product_tabs', 'quadlayers_reorder_tabs', 98 ); function quadlayers_reorder_tabs( $tabs ) { $tabs['reviews']['priority'] = 5; // Reviews first $tabs['description']['priority'] = 10; // Description second $tabs['additional_information']['priority'] = 15; // Additional information third return $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.
- PHP
- 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!