{"id":234240,"date":"2023-02-19T13:41:00","date_gmt":"2023-02-19T10:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234240"},"modified":"2022-11-12T01:42:26","modified_gmt":"2022-11-11T22:42:26","slug":"creer-des-onglets-de-produits-woocommerce-personnalises-avec-des-champs-personnalises-avances","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-des-onglets-de-produits-woocommerce-personnalises-avec-des-champs-personnalises-avances\/","title":{"rendered":"Cr\u00e9er des onglets de produits WooCommerce personnalis\u00e9s avec des champs personnalis\u00e9s avanc\u00e9s"},"content":{"rendered":"\n

Lors de la visualisation d’un produit dans WooCommerce<\/a>, les informations sur le produit sont affich\u00e9es dans des onglets. Ces onglets sont fixes et g\u00e9n\u00e9r\u00e9s par WooCommerce, hors de votre contr\u00f4le. Cet article vous montrera comment ajouter du code permettant aux auteurs d’ajouter des onglets personnalis\u00e9s avec un contenu personnalis\u00e9 aux produits.<\/p>\n

Avertissement: Il existe une extension WooCommerce appel\u00e9e WooCommerce Tab Manager<\/a> qui fournit cette fonctionnalit\u00e9. Ce n’est pas gratuit, cependant. Je ne l’ai pas test\u00e9 moi-m\u00eame, mais pour autant que je sache, il ne prend en charge qu’un \u00e9diteur WYSIWYG (ce que vous voyez est ce que vous obtenez) pour le contenu des onglets. Cet article est pour vous qui souhaitez affiner le contenu de l’onglet ou qui souhaitez \u00e9crire le code vous-m\u00eame sans payer pour un autre plugin.<\/p>\n

Nous utiliserons le plugin Advanced Custom Fields<\/a> (ACF) pour simplifier le processus. Mais vous devriez pouvoir remplacer assez facilement la partie d’ACF par votre propre code personnalis\u00e9 si vous ne souhaitez pas utiliser le plugin. ACF est disponible en version gratuite<\/a> et en version Pro<\/a>. Dans ACF Pro, il existe un type de champ astucieux: le r\u00e9p\u00e9teur, qui est parfait pour ce genre d’utilisation. Si toutefois vous ne poss\u00e9dez pas ou ne souhaitez pas acheter de licence Pro, ne vous inqui\u00e9tez pas. Le didacticiel de code ci-dessous vous montrera comment ajouter des champs en utilisant \u00e0 la fois la version gratuite et en utilisant le r\u00e9p\u00e9teur dans la version Pro.<\/p>\n

Si vous n’\u00eates pas d\u00e9j\u00e0 familiaris\u00e9 avec ACF, ce qu’ACF nous aide \u00e0 faire, c’est la configuration facile des champs post-m\u00e9ta – de toutes sortes. Vous pouvez facilement ajouter un \u00e9diteur, un s\u00e9lecteur de fichiers, un s\u00e9lecteur de date ou de couleur, un s\u00e9lecteur de publication ou de cat\u00e9gorie avec prise en charge des choix multiples et de la r\u00e9organisation, etc. Nous pouvons obtenir la m\u00eame chose sans ACF, mais nous aurions alors besoin de coder nous-m\u00eames l’affichage et la sauvegarde du contenu des m\u00e9taboxes.<\/p>\n

Ce que nous ferons<\/h2>\n

Pour le dire simplement, nous voulons autoriser l’ajout d’onglets personnalis\u00e9s \u00e0 la vue du produit. Chaque onglet prend en charge un titre qui s’affiche en tant qu’\u00e9tiquette d’onglet et le contenu qui s’affiche lorsque vous cliquez sur l’onglet. Les onglets personnalis\u00e9s d\u00e9pendent vraiment du type de projet ou des besoins que vous avez ; peut-\u00eatre avez-vous besoin d’onglets pour les sp\u00e9cifications techniques, d’un onglet avec des fichiers (par exemple, des manuels d’utilisation, etc.), d’informations suppl\u00e9mentaires ou d’une requ\u00eate personnalis\u00e9e qui affiche les produits associ\u00e9s.<\/p>\n

\"Cr\u00e9er<\/a><\/p>\n

Dans ce didacticiel, nous allons faire simple en ajoutant un \u00e9diteur WYSIWYG pour le contenu des onglets. Comme mentionn\u00e9 ci-dessus, il est facile d’impl\u00e9menter d’autres types de champs (par exemple, des fichiers ou une requ\u00eate de publication), c’est juste une diff\u00e9rence dans le code que vous \u00e9crivez pour afficher le contenu de l’onglet – qui n’est pas li\u00e9 \u00e0 ce tutoriel.<\/p>\n

Si vous avez ACF Pro et que vous souhaitez utiliser le r\u00e9p\u00e9teur pour ajouter facilement plusieurs onglets ; passez \u00e0 la section suivante. Si vous n’avez que la version gratuite d’ACF, continuez. L’inconv\u00e9nient de ne pas avoir de champ de r\u00e9p\u00e9teur est que vous devez d\u00e9finir un nombre fixe d’onglets. Ainsi, l’auteur ne peut pas cr\u00e9er un nombre illimit\u00e9 d’onglets comme il le peut avec le r\u00e9p\u00e9teur. Mais cette solution gratuite fonctionnera tr\u00e8s bien dans les boutiques en ligne o\u00f9 vous voulez juste un (nombre d’) onglets personnalis\u00e9s sp\u00e9cifiques.<\/p>\n

Tutoriel pour la version gratuite d’ACF<\/h2>\n

Ajout des champs ACF<\/h3>\n

Ajouter une nouvelle metabox avec des champs est vraiment facile avec ACF. Vous avez deux options ; utilisez l’interface utilisateur d’ACF pour tout configurer, ou ajoutez les champs par code. Habituellement, la configuration des champs dans l’administration est la voie \u00e0 suivre. Mais si vous devez vous assurer que les champs existent dans plusieurs sites WordPress (par exemple, d\u00e9veloppement localhost, serveur de test et serveur en direct), vous pourriez b\u00e9n\u00e9ficier de l’ajout des champs par code dans votre th\u00e8me ou plugin.<\/p>\n

Vous devez configurer les \u00e9l\u00e9ments suivants\u00a0:<\/p>\n