{"id":700,"date":"2018-11-20T12:00:34","date_gmt":"2018-11-20T11:00:34","guid":{"rendered":"https:\/\/www.welaunch.io\/fr\/?p=700"},"modified":"2024-05-15T11:39:56","modified_gmt":"2024-05-15T09:39:56","slug":"custom-woocommerce-product-tabs","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/fr\/2018\/11\/custom-woocommerce-product-tabs\/","title":{"rendered":"Comment cr\u00e9er des onglets personnalis\u00e9s pour les produits WooCommerce"},"content":{"rendered":"<p>Les clients de votre boutique en ligne ont besoin d&#8217;informations &#8211; plus il y en a, mieux c&#8217;est. Gr\u00e2ce \u00e0 la solution de commerce \u00e9lectronique actuelle WooCommerce pour WordPress, vous pouvez d\u00e9j\u00e0 ajouter des informations suppl\u00e9mentaires \u00e0 vos produits. En plus des \u00e9l\u00e9ments standard tels que le nom, le prix, l&#8217;image ou la description courte, vous pouvez ajouter jusqu&#8217;\u00e0 3 onglets de produit standard :<\/p>\n<ol>\n<li>Onglet Description comprenant la description longue du produit<\/li>\n<li>Informations suppl\u00e9mentaires sur les caract\u00e9ristiques de votre produit<\/li>\n<li>Avis affichant les avis des clients sur votre produit<\/li>\n<\/ol>\n<p>Mais qu&#8217;en est-il si vous avez besoin de plus d&#8217;onglets de produits WooCommerce personnalis\u00e9s ? Deux possibilit\u00e9s s&#8217;offrent alors \u00e0 vous. Soit vous \u00eates capable de programmer en PHP et de d\u00e9velopper du code, que vous pouvez placer dans vos fonctions.php de votre th\u00e8me enfant. Ou bien vous vous procurez un plugin pour WooCommerce qui vous permet de cr\u00e9er des onglets comme vous le souhaitez sans programmation personnalis\u00e9e. Nous vous montrons comment vous pouvez ajouter des onglets de produits personnalis\u00e9s de deux mani\u00e8res diff\u00e9rentes.<\/p>\n<h2>Ajout d&#8217;onglets personnalis\u00e9s \u00e0 l&#8217;aide de PHP<\/h2>\n<p>Si vous \u00eates familier avec PHP et WordPress, vous pouvez d\u00e9velopper votre propre solution pour ajouter des onglets personnalis\u00e9s \u00e0 vos produits. Il suffit de cr\u00e9er un th\u00e8me enfant si vous n&#8217;en avez pas, puis d&#8217;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 \u00e0 ce filtre.\u00c0 titre d&#8217;exemple, nous allons ajouter un nouvel onglet intitul\u00e9 &#8220;Exp\u00e9dition et d\u00e9lais de livraison&#8221;. Nous voulons ainsi donner au client plus d&#8217;informations sur le processus d&#8217;exp\u00e9dition, comme la date d&#8217;arriv\u00e9e de mon colis ou les soci\u00e9t\u00e9s de transport utilis\u00e9es.Nous commen\u00e7ons par nous connecter au filtre :add_filter(&#8216;woocommerce_product_tabs&#8217;, &#8216;my_shipping_tab&#8217; ) ;function my_shipping_tab( $tabs ) {    \/\/ Ajoute le nouvel onglet    $tabs=array(        &#8216;title&#8217; => __(&#8216;Exp\u00e9dition et livraison&#8217;, &#8216;child-theme&#8217; ),        priorit\u00e9&#8221; => 50,        &#8216;callback&#8217; => &#8216;my_shipping_tab_callback&#8217;    ) ;    return $tabs ;}Les \u00e9l\u00e9ments les plus importants sont le titre, la priorit\u00e9 et la fonction de rappel. Si vous souhaitez modifier la position de l&#8217;onglet, e.g. en faire le premier onglet, modifier la priorit\u00e9 \u00e0 1. Le rappel est la fonction que nous d\u00e9finissons maintenant. Cette fonction renvoie le contenu de l&#8217;onglet :function my_shipping_tab_callback() {\/\/ Le contenu du nouvel ongletecho &#8216;<\/p>\n<h2>Shipping &#038; Delivery<\/h2>\n<p>&#8216; ;echo &#8216;<\/p>\n<p>We ship for free within USA using UPS.<\/p>\n<p>&#8216; ;}Voil\u00e0, chaque produit contient d\u00e9sormais cet onglet. Vous pouvez \u00e9galement supprimer des onglets ou renommer des onglets existants.Mais qu&#8217;en est-il si vous avez besoin d&#8217;onglets WooCommerce sp\u00e9cifiques \u00e0 un produit ou \u00e0 une cat\u00e9gorie ? Par exemple, vous devez afficher un guide des tailles, mais uniquement pour les produits de la cat\u00e9gorie &#8220;v\u00eatements&#8221;. Dans ce cas, vous devriez prendre un plugin!<\/p>\n<h2>Cr\u00e9er des onglets de cat\u00e9gorie WooCommerce<\/h2>\n<p>Gr\u00e2ce au plugin WooCommerce Ultimate Custom Product Tabs, vous pouvez cr\u00e9er des onglets comme vous le souhaitez :<\/p>\n<ul>\n<li>Cr\u00e9er des onglets sp\u00e9cifiques personnalis\u00e9s<\/li>\n<li>Ajouter des onglets r\u00e9serv\u00e9s aux cat\u00e9gories<\/li>\n<li>Afficher les onglets de produits globaux<\/li>\n<li>Placer une ic\u00f4ne devant les onglets<\/li>\n<li>Ajouter du style et plus encore<\/li>\n<\/ul>\n<p>Ce ne sont l\u00e0 que quelques-unes des fonctionnalit\u00e9s les plus importantes que ce plugin offre pour une gestion ultime des onglets de produits. Reprenons l&#8217;exemple ci-dessus pour cr\u00e9er un onglet sp\u00e9cifique \u00e0 une cat\u00e9gorie. Allez dans wp-admin > WooCommerce > Ultimate Tabs. L\u00e0, vous activez 1. par exemple, ajouter un titre, un contenu et une priorit\u00e9 \u00e0 l&#8217;onglet. Vient ensuite l&#8217;\u00e9tape de la demande. Vous pouvez d\u00e9finir ici l&#8217;endroit o\u00f9 vous souhaitez que cet onglet apparaisse.Et c&#8217;est tout. L&#8217;onglet ne s&#8217;appliquera plus qu&#8217;\u00e0 la section des sweats \u00e0 capuche &#8211; c&#8217;est simple comme bonjour. Que peut faire d&#8217;autre ce plugin ? Il permet de renommer, de d\u00e9sactiver et de r\u00e9organiser les onglets standard. Vous pouvez \u00e9galement d\u00e9sactiver la fonctionnalit\u00e9 des onglets.<\/p>\n<h2>Comment d\u00e9sactiver la fonctionnalit\u00e9 de l&#8217;onglet WooCommerce<\/h2>\n<p>Il est parfois pr\u00e9f\u00e9rable, pour le r\u00e9f\u00e9rencement sur Google ou pour vos clients, qu&#8217;ils voient tout le contenu directement. Il pourrait donc \u00eatre judicieux de supprimer la fonction de tabulation pour afficher directement la description, les donn\u00e9es techniques et les commentaires. Si vous souhaitez supprimer totalement la fonctionnalit\u00e9 du tabulateur, ajoutez ce script personnalis\u00e9 :wp_dequeue_script( &#8216;wc-single-product&#8217; ) ;Ajoutez ensuite cette feuille de style CSS personnalis\u00e9e pour masquer les onglets des produits :.woocommerce-tabs ul.onglets {affichage : aucun !important ;}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les clients de votre boutique en ligne ont besoin d&#8217;informations &#8211; plus il y en a, mieux c&#8217;est. Gr\u00e2ce \u00e0 la solution de commerce \u00e9lectronique actuelle WooCommerce pour WordPress, vous pouvez d\u00e9j\u00e0 ajouter des informations suppl\u00e9mentaires \u00e0 vos produits. En plus des \u00e9l\u00e9ments standard tels que le nom, le prix, l&#8217;image ou la description courte,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/posts\/700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/comments?post=700"}],"version-history":[{"count":5,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/posts\/700\/revisions"}],"predecessor-version":[{"id":9015,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/posts\/700\/revisions\/9015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/media?parent=700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/categories?post=700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/fr\/wp-json\/wp\/v2\/tags?post=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}