Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce
Code

Ajouter des champs personnalisés au produits WooCommerce

by
Difficulty:BeginnerLength:MediumLanguages:

French (Français) translation by Thomas Triboult (you can also view the original English article)

WooCommerce est certainement le plugin WordPress le plus connu pour vendre des produits. WordPress propulse à peu près 25% de l'Internet et Woocommerce 39% des boutiques en ligne, utiliser ces deux solutions pour vendre des produits est donc un bon choix.

Mais, comme pour beaucoup de logiciels, à certains moments nous ou nos clients avons besoin d'étendre les fonctionnalités de ce qui est proposé par défaut.

Exemple concret : Avec WooCommerce, partons d'un produit basique que vous souhaitez vendre mais pour lequel vous souhaiteriez ajouter quelques informations à afficher sur la page produit.

En utilisant les hooks de WooCommerce et du code personnalisé nous allons voir comment nous pouvons implémenter cette fonctionnalité.

Outils requis

Avant de commencer, je suppose que vous avez la configuration suivante (ou équivalente) sur votre machine :

  • Le système d'exploitation de votre choix (j'utilise macOS)
  • Au minimum PHP 5.6.25, cependant j'utiliserais PHP 7
  • MySQL 5.6.33
  • Apache ou Nginx
  • WordPress 4.7
  • WooCommerce 3.9
  • Votre IDE préféré

Dans la suite du tutoriel je suppose que tout ceci est installé, activé et démarré.

Setting up WooCommerce

Si vous téléchargez WooCommerce spécialement pour ce tutoriel, vous avez pas besoin de vous préoccuper des pages de paiement, des CGV et autres. En effet nous allons nous concentrer sur la meta-box Produit.

Ajout des champs personnalisés

Dans l'univers WordPress, la notion de champs personnalisés peut prendre différentes définitions :

WordPress permet aux auteurs d'articles d'ajouter des champs personnalisés à leurs articles. Cette information supplémentaire est connue sous le nom meta-donnée.

Pour les non-développeurs, ce type d'information peut paraître plus complexe et superflue. Mais si vous avez l'habitude de les utiliser, il est important de noter que, dans ce tutoriel, lorsque je fais référence aux champs personnalisés je parle de quelque chose de complètement différent.

Je parle en fait d'un champs texte que nous allons ajouter dans l'onglet Produit lié du type Produit.

The initial Simple Product type

Nous reviendrons sur ce point plus loin dans ce tutoriel. Pour l'instant, commencons.

1. Les hooks

Comme dans WordPress, WooCommerce dispose d'une API qui nous permet d'insérer du code dans le cycle de vie d'une page. Même si vous avez déjà utilisé l'API meta-donnée de WordPress, faire de même avec WooCommerce est différent.

Deux hooks sont importants à connaitre :

  1. woocommerce_product_options_grouping. Nous utiliserons cette fonction pour créer un champs texte qui recevra nos valeurs ainsi que sa description.
  2. woocommerce_process_product_meta. Nous utiliserons ce hook pour traiter, nettoyer et enregistrer la valeur de notre champ.

Comme pour les hooks WordPress, nous devrons définir ces hooks et implémenter leurs fonctionnalités. Même s'il est possible de le faire en programmation procédurale, ce tutoriel le fera en utilisant la programmation orientée objet.

2. La fonctionnalité

Tout d'abord, nous créons une classe qui contient une variable qui représentera l'ID du champ texte tel qu'il apparaîtra dans l'interface utilisateur :

En suite, nous initialisons cette variable dans le constructeur de la classe :

À ce stage, nous pouvons utiliser les hooks listés plus haut. Pour ce faire, nous ajoutons une fonction d'initialisation qui enregistre deux fonctions sur le hook.

Dans les deux sections suivantes nous verrons comment implémenter la fonctionnalité.

1. Ajouter le champ texte

Tout d'abord, nous allons ajouter une fonction liée au hook woocommerce_product_options_grouping. Ce qui a été fait dans la fonction d'initialisation de la section précédente.

Remarquez que j'ai nommé la fonction product_options_grouping. Je trouve que ce nom rend le code plus lisible. Le nom de la fonction, en tant que tel, ne permet pas de décrire ce qu'elle fait mais permet de l'associer à son hook.

Ensuite, nous devons implémenter la fonction. Pour ce faire, nous avons besoin de plusieurs informations :

  • Il nous faudra un ID qui nous permettra d'identifier uniquement notre champ texte. Nous allons utiliser la variable définie dans le constructeur.
  • Un libellé nous permettra de décrire notre champ texte.
  • Nous pouvons aussi définir un placeholder, et dans le but de notre exemple, nous le ferons.
  • Il existe une option pour afficher une infobulle lorsque l'utilisateur survole un icone. 
  • Et nous avons une option qui permet de donner le contenu de l'infobulle.

Toutes ces informations seront définies dans une tableau associatif puis passée à woocommerce_wp_text_input. C'est une fonction de l'API WooCommerce qui affiche un champ texte.

Dès à présent, nous avons terminé la première partie du plugin. Nous devons maintenant écrire le code qui enregistrera ces informations dans la base de données et rendra fonctionnel notre plugin.

2. Enregistrer l'information

Ensuite, ajoutez le code suivant dans la méthode init :

Puis, ajouter la fonction add_custom_linked_field_save.

Je détaillerais l'implémentation de cette fonction dans la section suivante.

Nettoyer les données

La fonction ci-dessus est constituée de trois étapes :

  1. Nous vérifions que toutes les valeurs ont bien été définies. Si ce n'est pas le cas nous retournons false. C'est une vérification de sécurité standard. Les valeurs nulles sont détectée en vérifiant les valeurs fournies par WooCommerce.
  2. Nettoyage des données dans la collection $_POST qui contient les données saisies par l'utilisateur.
  3. Enrgistrement des données dans la table meta-donnée des articles.
Our teaser field on the Linked Products

Remarquez que nous ne faisons encore rien pour afficher l'information dans la partie publique, c'est pourquoi il n'y a pas d'appel à la fonction get_post_meta. C'est comme ça que nous afficherons la donnée dans la partie publique.

3. Afficher l'accroche dans la partie publique

Pour afficher la donnée nous avons besoin d'une classe qui fera sensiblement le même travail que la précédente. Nous aurons besoin :

  • d'un ID pour le champ texte
  • d'initialiser cet ID dans le constructeur
  • d'une fonction d'initialisation pour insérer notre code dans la partie frontale.
  • d'afficher la valeur.

La mise en place de ceci n'est pas difficile vu que nous l'avons déjà fait, je vais donc vous fournir la classe dans son intégralité. Je vais quand même faire quelques commentaires sur son fonctionnement ensuite :

Le résultat final doit être :

Displaying the result of the teaser

Maintenant nous avons du code redondant. Particulièrement les classes de la partie administration et frontale utilisent toutes les deux un champ textfield_ID et le définissent dans leur constructeur. C'est un indice qui permet d'identifié une violation de l'unicité du code en programmation orientée objet.

Il y a plusieurs façons d'atténuer ce phénomène, comme passer la valeur dans le constructeurs de chaque classe en utilisant un patron de conception simple d'instanciation des deux classes.

Dans le fichier accompagnant ce tutoriel, qui peut être téléchargé en utilisant le lien de l'encart, vous pouvez voir comment j'ai passé la valeur dans le constructeur pour améliorer la maintenabilité du code.

Deuxièmement, remarquez que j'utilise le hook woocommerce_product_thumbnails pour afficher la donnée. WooCommerce fournit beaucoup de hooks, j'ai simplement choisi celui-ci pour l'affichage. Vous pouvez consulter la documentation pour trouver quel hook correspond le mieux à vos besoins.

4. Réunir toutes les parties

Enfin, notre dernière étape est de créer un fichier de définition du plugin. Nous l'avons fait dans un certain nombre de mes précédents tutoriels ; je ne vais donc pas passer trop de temps à insister sur ce point.

Voici ma façon de décomposer le code :

J'ai d'abord ajouté les dépendances puis, lorsque la fonction est appelée, je vérifie si la page du tableau de bord est affichée ou non. Si c'est le cas la partie concernée du plugin est chargée sinon c'est l'affichage standard que vous pouvez voir sur la page produit.

Conclusion

Nous avons couvert tout ce que nous avions conçu dans l'introduction du tutoriel :

  • Nous avons ajouté le champ personnalisé.
  • Nous l'avons nettoyé et enregistré.
  • Nous avons défini la partie frontale du plugin.
  • Et nous avons récupéré et affiché le contenu.

N'oubliez pas de télécharger la démonstration fonctionnelle dans l'encart de cette page. C'est le gros bouton bleu dans l'encart. De plus, si vous vous intéressez à WooCommerce, n'oubliez pas de consulter nos autres tutoriels ou nos produits disponibles sur notre marketplace.

Comme d'habitude, si vous recherchez d'autres ressources en lien avec WordPress, vous pouvez trouver tous mes tutoriels précédents sur mon profil et vous pouvez me suivre sur mon blog ou sur Twitter.

N'hésitez pas à poser vos questions ou laisser un commentaire dans le flux ci-dessous.

Ressources

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.