Le blog.

Ajouter des champs meta aux produits WooCommerce.

La célèbre extension e-commerce WordPress propose nativement bon nombre de champs produits. Prix, UGS, stock, attributs, poids, dimensions… De quoi couvrir pas mal de possibilités !

Mais que faire si vous créez une boutique e-commerce où les produits possèdent une donnée très spécifique ? Découvrons ici la deuxième partie de notre tutoriel et ajoutons des champs meta aux produits WooCommerce.

Si vous avez manquez la première partie de ce tutoriel, il est préférable de le lire pour apprendre à ajouter un onglet sur les pages produits WooCommerce.

L’intégralité du thème créé dans cette série de tutoriels est téléchargeable librement sur http://img.saika.li/axEF. Notez que le thème mosaikafifteen est enfant de twentyfifteen, il est donc nécessaire d’avoir ce dernier dans votre dossier /themes.
Créer un onglet WooCommerce et ajouter des champs aux produits
Fonctionnement général de l’outil créé

Pour faire le point, reprenons rapidement notre premier tutoriel. L’idée est de pouvoir enregistrer des « J’aime » et « Je déteste » sur chaque produit. Chaque clic sur un bouton augmentera une valeur meta du produit de 1. Ces valeurs de loves et hates seront enregistrées dans un champ meta du produit créé sur-mesure et affiché dans l’onglet Avancé de WooCommerce.

Pour l’instant, nous avons donc :

  1. ajouté un nouvel onglet sur la page publique (en front-end) d’un produit
  2. relié le contenu de cet onglet à la fonction wc_get_template() afin d’externaliser le template du contenu de l’onglet dans un fichier woocommerce/single-product/tabs/love-product.php
  3. créé le template en question (mais nous l’aborderons plus en détails ci-dessous)

Bref, c’est bien beau d’afficher des données à l’utilisateur, mais encore faut-il que l’administrateur puisse les éditer via l’admin d’une fiche produit. Mais aussi que ces nouvelles données soient enregistrées correctement dans la base de données WordPress.

Procédons alors par étapes. Cette fois, nous aborderons :

  1. les différents endroits où il est possible d’ajouter des champs dans l’administration d’un produit WooCommerce
  2. l’ajout à proprement parlé de champs meta personnalisés
  3. l’enregistrement des valeurs des nouveaux champs
  4. et enfin, la mise en relation entre les boutons J’aime et Je déteste et la base de données WordPress

Prêt ? Bouclez vos ceintures, souquez les artimuses et rentrons dans le vif du sujet !

Comment ajouter des custom metas aux produits WooCommerce

Ajouter des champs custom post meta aux produits WooCommerce

Prenons d’abord le temps de nous pencher un peu sur le cœur de WooCommerce. C’est le fichier includes/admin/meta-boxes/class-wc-meta-box-product-data.php qui contient le code en charge de créer les metaboxes propres à WooCommerce sur la page d’administration d’un produit.

Notez deux choses importantes dans ce fichier.

1. Des fonctions pour générer les tags d’inputs

Plutôt que d’avoir à se répéter et écrire des <input /> en pagaille, WooCommerce simplifie la génération des balises des labels et de leurs inputs de type :

  • text avec woocommerce_wp_text_input()
  • textarea avec woocommerce_wp_textarea_input()
  • checkbox avec woocommerce_wp_checkbox()
  • radio avec woocommerce_wp_radio()
  • select avec woocommerce_wp_select()
  • hidden avec woocommerce_wp_hidden_input()

Le code ci-dessous vous permettra de générer un exemple de chaque type de champ possible afin de vous repérer.

Et résultera en…

La liste des différents champs possibles avec les fonctions helper de WooCommerce
La liste des différents champs possibles avec les fonctions helper de WooCommerce
Notez que ces fonctions de génération de champs woocommerce_wp_* proposent par défaut la valeur de la meta du produit équivalente à l’id du champ défini. Pour prendre exemple : WooCommerce ne définit pas d’arguments value lorsqu’il enregistre bon nombre de ces champs, mais donne directement en argument id la clé meta du champ en question, comme :
  • _manage_stock pour la valeur de la gestion du stock
  • _regular_price pour la valeur du prix normal
  • _sale_price pour la valeur du prix en promo

Ainsi, le champ sera automatiquement pré-rempli de la valeur meta en question (chargée via get_post_meta), sans avoir besoin de définir un argument value.

2. De nombreuses actions pour s’interfacer

Toujours en parcourant le fichier class-wc-meta-box-product-data.php, vous découvrirez plus de 25 occurrences de la fonction do_action(). Ce sont donc autant d’endroits où nous pouvons nous interfacer pour ajouter des champs où bon nous semble.

L’exemple général proposé précédemment ajoutait des champs produits dans l’onglet Général via l’action woocommerce_product_options_general_product_data. Le nom de chacune de ces actions étant assez explicite, il devient alors facile d’ajouter du contenu — et surtout nos champs ! — dans la metabox de WooCommerce, par exemple :

  • en fin d’onglet Inventaire avec l’action woocommerce_product_options_inventory_product_data
  • en fin d’onglet Livraison avec l’action woocommerce_product_options_shipping
  • en fin d’onglet Produits liés avec l’action woocommerce_product_options_related
  • en fin d’onglet Attributs avec l’action woocommerce_product_options_attributes
  • en fin d’onglet Avancé avec l’action woocommerce_product_options_advanced
  • après le champ UGS avec l’action woocommerce_product_options_sku
  • après les champs de prix avec l’action woocommerce_product_options_pricing
  • après la checkbox de gestion de stock avec l’action woocommerce_product_options_stock

Ajouter un champ dans l’onglet « Avancé »

Nous voila en mesure d’ajouter nos champs J’aime et Je déteste qui stockeront le nombre d’amour et de haine qu’a reçu un produit. On reprend donc les fonctions helpers et les actions présentées précédemment.

Résultera en…

Nos nouveaux champs produits WooCommerce !
Nos nouveaux champs produits WooCommerce !

Nous voila donc en possession de deux nouveaux champs texte dans l’administration de nos produits WooCommerce. Mais attention, vous pourrez essayer de changer leurs valeurs et enregistrer le produit en question, cette valeur ne sera pas sauvegardée.

Il faut désormais indiquer à WordPress l’existence de ces champs et lui dire quoi en faire lorsque l’on enregistre un post.

Enregistrer les données des nouveaux champs

Avec l’action save_post, nous allons vérifier si le post en cours d’enregistrement (à la création ou à sa mise à jour) est bien de type produit product.

Si c’est le cas, et si nos champs loves et hates sont existants dans les valeurs reçues, nous enregistrons les dites valeurs dans des métadonnées du produit, nommées loves et hates.

Nos champs meta produit WooCommerce sont désormais enregistrés dans la base SQL de WordPress
Le SQL des metas du post produit est maintenant à jour

Voila ! Vous pouvez maintenant modifier la valeur des nouveaux champs fraîchement ajoutés et après enregistrement du produit, les nouvelles valeurs seront cette fois correctement enregistrées.

Relier le front-end au back-end

Maintenant que notre back-office dispose de la structure nécessaire pour accueillir de nouvelles données produits, vous pouvez en faire ce que vous voulez sur le front-office de votre boutique.

Petit rappel du template WooCommerce love-product.php défini en première partie de tutoriel :

Comme vous le voyez en ligne 14 et 15, il suffit d’utiliser la fonction get_post_meta() afin de récupérer les valeurs de nos nouveaux champs.

Si vous avez du mal à comprendre la logique de champs meta, ou souhaitez apprendre à afficher leurs valeurs dans votre propre thème WordPress, découvrez notre guide gratuit Types de contenu et champs WordPress.

Mettre à jour les valeurs des champs meta en Ajax

Et pour terminer la logique de nos boutons, je vous laisse analyser le thème mosaikafifteen créé. L’augmentation du nombre de J’aime et de Je déteste se fait grâce à deux fichiers/codes complémentaires :

  1. le fichier js/wc.js envoie une requête Ajax à WordPress en lui indiquant
    1. l’action à faire (love ou hate)
    2. l’ID du produit que le visiteur aime ou déteste (product_id)
    3. et une chaine de sécurité nonce
  2. et c’est la fonction msk_ajax_love_or_hate_product() du fichier functions.php qui s’occupe d’intercepter les requêtes envoyées par le Javascript lorsque l’on clic sur un bouton. En fonction de l’action, le code met à jour la valeur meta du J’aime ou du Je déteste du produit et lui ajoute 1.
    En retour, WordPress renvoie une réponse Ajax avec WP_Ajax_Response en transmettant la nouvelle valeur de loves ou hates. Le fichier js/wc.js intercepte cette réponse et met à jour le titre afin d’afficher le nouveau nombre correctement.

Bien évidemment, un même utilisateur peut pour l’instant cliquer indéfiniment sur les boutons pour augmenter les valeurs, mais le but de ces tutoriels étant tout autre, nous ne nous sommes pas attardés sur ce point.

Conclusion

J’espère que ce duo de tutoriels orientés développement avancé WooCommerce aura pu vous permettre d’y voir plus clair sur la personnalisation du front-office de vos pages produits, et sur la création de nouvelles données dans le back-office d’un produit.

En résumé, nous avons :

  1. créé un onglet sur la page produit
  2. rempli cet onglet avec des données personnalisées
  3. créé des champs meta pour enregistrer des données spécifiques sur les produits WooCommerce
  4. et relié le front-end à ces nouveaux champs meta

Avec cette logique bien en main, les possibilités sont très vastes. Vous êtes désormais en mesure d’enregistrer des nouvelles données très spécifiques à vos produits et afficher leurs valeurs dans votre thème WooCommerce.

Si vous avez des utilisations originales de ces fonctions, faites-nous en part dans les commentaires ci-dessous ! Et si vous appréciez nos articles WordPress et WooCommerce, inscrivez-vous à la newsletter pour recevoir nos futures publications.

Soyez le premier à publier un commentaire.

Laisser un commentaire