Comment créer des onglets personnalisés pour les produits WooCommerce

How to Create Custom WooCommerce Product Tabs

Les clients de votre boutique en ligne ont besoin d’informations – plus il y en a, mieux c’est. Grâce à la solution de commerce électronique actuelle WooCommerce pour WordPress, vous pouvez déjà ajouter des informations supplémentaires à vos produits. En plus des éléments standard tels que le nom, le prix, l’image ou la description courte, vous pouvez ajouter jusqu’à 3 onglets de produit standard :

  1. Onglet Description comprenant la description longue du produit
  2. Informations supplémentaires sur les caractéristiques de votre produit
  3. Avis affichant les avis des clients sur votre produit

Mais qu’en est-il si vous avez besoin de plus d’onglets de produits WooCommerce personnalisés ? Deux possibilités s’offrent alors à vous. Soit vous êtes capable de programmer en PHP et de développer du code, que vous pouvez placer dans vos fonctions.php de votre thème enfant. Ou bien vous vous procurez un plugin pour WooCommerce qui vous permet de créer des onglets comme vous le souhaitez sans programmation personnalisée. Nous vous montrons comment vous pouvez ajouter des onglets de produits personnalisés de deux manières différentes.

Ajout d’onglets personnalisés à l’aide de PHP

Si vous êtes familier avec PHP et WordPress, vous pouvez développer votre propre solution pour ajouter des onglets personnalisés à vos produits. Il suffit de créer un thème enfant si vous n’en avez pas, puis d’aller dans vos fonctions.php et lancer le travail. The WooCommerce core offers a custom filter hook to add own tabs with the namewoocommerce_product_tabs. Vous pouvez facilement vous connecter à ce filtre.À titre d’exemple, nous allons ajouter un nouvel onglet intitulé “Expédition et délais de livraison”. Nous voulons ainsi donner au client plus d’informations sur le processus d’expédition, comme la date d’arrivée de mon colis ou les sociétés de transport utilisées.Nous commençons par nous connecter au filtre :add_filter(‘woocommerce_product_tabs’, ‘my_shipping_tab’ ) ;function my_shipping_tab( $tabs ) { // Ajoute le nouvel onglet $tabs=array( ‘title’ => __(‘Expédition et livraison’, ‘child-theme’ ), priorité” => 50, ‘callback’ => ‘my_shipping_tab_callback’ ) ; return $tabs ;}Les éléments les plus importants sont le titre, la priorité et la fonction de rappel. Si vous souhaitez modifier la position de l’onglet, e.g. en faire le premier onglet, modifier la priorité à 1. Le rappel est la fonction que nous définissons maintenant. Cette fonction renvoie le contenu de l’onglet :function my_shipping_tab_callback() {// Le contenu du nouvel ongletecho ‘

Shipping & Delivery

‘ ;echo ‘

We ship for free within USA using UPS.

‘ ;}Voilà, chaque produit contient désormais cet onglet. Vous pouvez également supprimer des onglets ou renommer des onglets existants.Mais qu’en est-il si vous avez besoin d’onglets WooCommerce spécifiques à un produit ou à une catégorie ? Par exemple, vous devez afficher un guide des tailles, mais uniquement pour les produits de la catégorie “vêtements”. Dans ce cas, vous devriez prendre un plugin!

Créer des onglets de catégorie WooCommerce

Grâce au plugin WooCommerce Ultimate Custom Product Tabs, vous pouvez créer des onglets comme vous le souhaitez :

  • Créer des onglets spécifiques personnalisés
  • Ajouter des onglets réservés aux catégories
  • Afficher les onglets de produits globaux
  • Placer une icône devant les onglets
  • Ajouter du style et plus encore

Ce ne sont là que quelques-unes des fonctionnalités les plus importantes que ce plugin offre pour une gestion ultime des onglets de produits. Reprenons l’exemple ci-dessus pour créer un onglet spécifique à une catégorie. Allez dans wp-admin > WooCommerce > Ultimate Tabs. Là, vous activez 1. par exemple, ajouter un titre, un contenu et une priorité à l’onglet. Vient ensuite l’étape de la demande. Vous pouvez définir ici l’endroit où vous souhaitez que cet onglet apparaisse.Et c’est tout. L’onglet ne s’appliquera plus qu’à la section des sweats à capuche – c’est simple comme bonjour. Que peut faire d’autre ce plugin ? Il permet de renommer, de désactiver et de réorganiser les onglets standard. Vous pouvez également désactiver la fonctionnalité des onglets.

Comment désactiver la fonctionnalité de l’onglet WooCommerce

Il est parfois préférable, pour le référencement sur Google ou pour vos clients, qu’ils voient tout le contenu directement. Il pourrait donc être judicieux de supprimer la fonction de tabulation pour afficher directement la description, les données techniques et les commentaires. Si vous souhaitez supprimer totalement la fonctionnalité du tabulateur, ajoutez ce script personnalisé :wp_dequeue_script( ‘wc-single-product’ ) ;Ajoutez ensuite cette feuille de style CSS personnalisée pour masquer les onglets des produits :.woocommerce-tabs ul.onglets {affichage : aucun !important ;}

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close Popup

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Close Popup
Paramètres de confidentialité sauvegardés !
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

Technical Cookies
In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Decline all Services
Save
Accept all Services