Créer des onglets de produits WooCommerce personnalisés avec des champs personnalisés avancés

Lors de la visualisation d’un produit dans WooCommerce, les informations sur le produit sont affichées dans des onglets. Ces onglets sont fixes et générés par WooCommerce, hors de votre contrôle. Cet article vous montrera comment ajouter du code permettant aux auteurs d’ajouter des onglets personnalisés avec un contenu personnalisé aux produits.

Avertissement: Il existe une extension WooCommerce appelée WooCommerce Tab Manager qui fournit cette fonctionnalité. Ce n’est pas gratuit, cependant. Je ne l’ai pas testé moi-même, mais pour autant que je sache, il ne prend en charge qu’un éditeur 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 écrire le code vous-même sans payer pour un autre plugin.

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

Si vous n’êtes pas déjà familiarisé avec ACF, ce qu’ACF nous aide à faire, c’est la configuration facile des champs post-méta – de toutes sortes. Vous pouvez facilement ajouter un éditeur, un sélecteur de fichiers, un sélecteur de date ou de couleur, un sélecteur de publication ou de catégorie avec prise en charge des choix multiples et de la réorganisation, etc. Nous pouvons obtenir la même chose sans ACF, mais nous aurions alors besoin de coder nous-mêmes l’affichage et la sauvegarde du contenu des métaboxes.

Ce que nous ferons

Pour le dire simplement, nous voulons autoriser l’ajout d’onglets personnalisés à la vue du produit. Chaque onglet prend en charge un titre qui s’affiche en tant qu’étiquette d’onglet et le contenu qui s’affiche lorsque vous cliquez sur l’onglet. Les onglets personnalisés dépendent vraiment du type de projet ou des besoins que vous avez ; peut-être avez-vous besoin d’onglets pour les spécifications techniques, d’un onglet avec des fichiers (par exemple, des manuels d’utilisation, etc.), d’informations supplémentaires ou d’une requête personnalisée qui affiche les produits associés.

Dans ce didacticiel, nous allons faire simple en ajoutant un éditeur WYSIWYG pour le contenu des onglets. Comme mentionné ci-dessus, il est facile d’implémenter d’autres types de champs (par exemple, des fichiers ou une requête de publication), c’est juste une différence dans le code que vous écrivez pour afficher le contenu de l’onglet – qui n’est pas lié à ce tutoriel.

Si vous avez ACF Pro et que vous souhaitez utiliser le répéteur pour ajouter facilement plusieurs onglets ; passez à la section suivante. Si vous n’avez que la version gratuite d’ACF, continuez. L’inconvénient de ne pas avoir de champ de répéteur est que vous devez définir un nombre fixe d’onglets. Ainsi, l’auteur ne peut pas créer un nombre illimité d’onglets comme il le peut avec le répéteur. Mais cette solution gratuite fonctionnera très bien dans les boutiques en ligne où vous voulez juste un (nombre d’) onglets personnalisés spécifiques.

Tutoriel pour la version gratuite d’ACF

Ajout des champs ACF

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 à suivre. Mais si vous devez vous assurer que les champs existent dans plusieurs sites WordPress (par exemple, développement localhost, serveur de test et serveur en direct), vous pourriez bénéficier de l’ajout des champs par code dans votre thème ou plugin.

Vous devez configurer les éléments suivants :

• Un groupe qui s’affiche lorsque le type de publication correspond aux produits WooCommerce
• Une entrée de texte pour le titre de l’onglet
• Quel que soit le ou les champs que vous souhaitez pour le contenu de l’onglet. À titre d’exemple, nous ajouterons un éditeur WYSIWYG.
• (Facultatif) Titres et contenus d’onglet supplémentaires pour autant d’onglets que nous souhaitons prendre en charge.

Veuillez prendre note de ne pas oublier les noms des champs car vous devrez vous y référer plus tard. J’ai défini le titre de l’onglet comme tab_titleet le champ WYSIWYG comme tab_contents.

Si vous préférez ajouter les champs par code, voici un exemple. Ajoutez ceci dans le fichier de votre thème functions.phpou plugin :

Si vous voulez plus d’un onglet, ajoutez simplement un autre ensemble de titre d’onglet et de contenu d’onglet après line #19. N’oubliez pas de rester nameunique.

Lorsque nous éditons un produit, nous devrions voir apparaître cette métabox :

Sortie de vos onglets personnalisés

WooCommerce nous permet de filtrer woocommerce_product_tabspour manipuler les onglets. Comme argument de ce filtre, vous obtenez un tableau pour tous les onglets. Le tableau se compose de tableaux pour chaque onglet avec des clés uniques. Mais le tableau de chaque onglet ne contient pas la sortie réelle du contenu de l’onglet. Au lieu de cela, il attend un rappel – le nom d’une fonction que WooCommerce exécutera pour afficher le contenu de l’onglet.

Une fois à l’intérieur de la fonction, vous pouvez utiliser global $postpour accéder à l’objet de publication actuel, ou si vous voulez que l’objet produit que WooCommerce génère, faites simplement global $product. Nous avons besoin de l’ID de publication pour récupérer la valeur de nos champs personnalisés avec la fonction ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). Dans l’exemple de code ci-dessous, nous récupérons uniquement le titre de l’onglet et vérifions s’il est vide ou non. Si ce n’est pas le cas, il ajoute un nouvel onglet au tableau. Il est logique de ne pas ajouter d’onglets où le titre de l’onglet est vide.

Notez que vous pouvez utiliser ‘ priority‘ pour contrôler la position de l’onglet. Par exemple, le définir sur 1 fera apparaître votre onglet en premier, avant tous les onglets de WooCommerce. Définissez un nom de fonction pour l’ callbackélément ‘ ‘. En ligne, #17nous définissons la fonction que WooCommerce exécutera pour afficher le contenu de l’onglet.

Ces fonctions de rappel d’onglet obtiendront deux paramètres ; la clé et l’élément de tableau de toutes les valeurs de l’onglet en cours. Dans notre fonction de rappel, nous affichons à nouveau le titre de l’onglet, en nous référant au $tabtableau fourni. WooCommerce fait écho à leurs titres d’onglets dans un h2afin que nous fassions de même. Et puis nous utilisons get_field()pour obtenir la valeur du contenu de l’onglet et répercutons simplement la valeur. Ajustez la ligne #23pour s’adapter à tous les types de champs que vous avez ajoutés (par exemple, sélecteur d’objet de publication, images ou autre).

Notez que j’ai tout enveloppé dans un if-check qui vérifie si WooCommerce et ACF sont activés ou non. C’est une bonne pratique pour empêcher votre site de se casser.

Et c’est tout! Vous avez maintenant créé avec succès du code pour ajouter des onglets WooCommerce personnalisés !

Si vous souhaitez le faire avec le champ répéteur d’ACF Pro pour prendre en charge un nombre illimité d’onglets, lisez la suite.

Tutoriel pour ACF Pro et répéteur

Ajout des champs ACF

Ajoutez votre groupe à l’aide de l’interface utilisateur d’administration d’ACF ou en les ajoutant par code dans vos fichiers de thème ou de plug-in. Nous devons mettre en place les éléments suivants :

• Un groupe qui s’affiche lorsque le type de publication est égal au produit WooCommerce
• Un répéteur avec les sous-champs suivants :
  • Une entrée de texte pour le titre de l’onglet
  • Quel que soit le ou les champs que vous souhaitez pour le contenu de l’onglet.

Voici comment vous le configureriez à l’aide de l’administrateur ACF :

Ou vous pouvez ajouter le groupe par code comme ceci :

Dans tous les cas, vous devriez vous retrouver avec cette métabox lors de la modification des produits :

Sortie de vos onglets personnalisés

La sortie de vos onglets personnalisés est très similaire à ce que nous avons fait ci-dessus pour la version gratuite. Nous filtrons woocommerce_product_tabs, mais ici nous parcourons chaque élément répété du répéteur. Nous avons besoin d’un moyen d’identifier chaque élément du répéteur avec des clés, nous générons donc nous-mêmes une clé en utilisant la position de la boucle et une version slug du titre de l’onglet. Dans la fonction de rappel, nous extrayons la position de la boucle de la clé et l’utilisons pour faire référence au tableau de notre répéteur.

Dans notre fonction de filtre, nous récupérons la valeur du répéteur et vérifions s’il n’est pas vide. Nous définissons ensuite une variable compteur, commençant à 0 (les tableaux commencent toujours par la position 0), que nous incrémentons de 1 pour chaque élément à l’intérieur de la boucle (à la ligne #18). Dans la boucle de chaque élément de répéteur, nous les attribuons tous à la même fonction de rappel. Nous utilisons la fonction de WordPress [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()pour convertir le titre de l’onglet en une version slug de celui-ci et l’ajoutons à la clé.

Dans notre fonction de rappel à la ligne, #31 - 32nous effectuons quelques manipulations de chaîne simples pour extraire la valeur du compteur (qui commence à 0 et incrémente de 1 pour chaque élément). Nous l’utilisons ensuite simplement comme index pour le tableau de répéteurs afin de récupérer le champ de contenu d’onglet correct.

Et c’est tout! Vous avez maintenant implémenté un nombre illimité d’onglets personnalisés dans WooCommerce !

N’oubliez pas que vous pouvez remplacer WYSIWYG par n’importe quel type de champ. Vous avez juste besoin de changer la façon dont vous affichez le champ à la ligne #23.

Conclusion

Écrire votre propre code pour ajouter des onglets WooCommerce personnalisés est vraiment facile lorsque vous avez compris le concept de base de la façon dont WooCommerce le fait. Il ne nécessite même pas beaucoup de code. C’est une solution parfaite pour vous qui ne voulez pas ou ne pouvez pas investir dans des licences d’extension ou qui ont juste besoin d’une solution simple pour votre boutique en ligne.