Personnaliser WooCommerce : ajouter des champs personnalisés à vos produits simples

Vous créez peut-être votre site e-commerce de A à Z et souhaitez vendre différents types de produits. Vous possédez peut-être une boutique en ligne depuis quelques années et souhaitez élargir vos horizons et proposer de nouveaux produits. Quelle que soit la raison de ce tutoriel, il est essentiel de personnaliser WooCommerce. Et vous trouverez tout ce dont vous avez besoin grâce à Bright Vessel !

WooCommerce is the most popular Plugin WordPress for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its backstage.

Nombre de nos clients chez Bright Vessel recherchent une solution e-commerce unique qui tienne compte des spécificités de leur activité. Forts de notre vaste expérience avec WooCommerce, nous pouvons vous aider à configurer votre boutique en ligne selon vos besoins. C'est parti !

Ce dont vous aurez besoin pourCustomize WooCommerce

Below, you’ll find the basic setup you’ll need to customize WooCommerce:

• Votre système d'exploitation de bureau préféré, qu'il s'agisse de distributions MacOS, Microsoft Windows, Linux, etc.
• Préprocesseur hypertexte (PHP) au moins 5.6.25.
• Serveurs HTTP Apache ou Nginx.
• MySQL 5.6.33.
• Un WordPress mis à jour, ou au moins la version 4.7.
• Le plugin WooCommerce dans au moins la version 3.9.
• L'environnement de développement intégré (IDE) de votre choix.

Personnaliser WooCommerce pour ajouter des champs personnalisés

Cela dit, les champs personnalisés dans WooCommerce diffèrent légèrement de ceux de WordPress. Au lieu de travailler avec les métadonnées des articles, telles que définies par WordPress, nous parlerons de « champs personnalisés » comme de véritables champs de texte. Dans le menu WooCommerce, accédez à l'onglet « Produits liés » du type « Produits simples ».

API WooCommerce - Hooks

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPDébutant, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

WooCommerce propose son API qui permet aux utilisateurs d'interagir avec le cycle de vie de ses pages. Cependant, l'API WooCommerce diffère légèrement de celle des métadonnées WordPress. Il existe deux principaux points d'ancrage à connaître :

• Woocommerce_product_options_grouping. Ce hook permet de créer une description et une saisie de texte acceptant nos valeurs.
• woocommerce_process_product_meta. Cette fonction permet de traiter, de nettoyer et d'enregistrer la valeur du texte saisi.

Pour utiliser ces hooks, vous devrez les définir et personnaliser leurs fonctionnalités.

Personnalisation des fonctionnalités

• Définissez une classe avec une variable « simple » comme données d'instance. Cette variable représentera l'identifiant du champ de saisie, tel qu'il apparaît à l'utilisateur :

Vous pouvez désormais utiliser les hooks ci-dessus en ajoutant une fonction d'initialisation qui enregistre deux fonctions personnalisées sur le hook.

Champ de saisie de texte

Pour ajouter un champ de saisie de texte, vous devez d'abord ajouter une fonction liée à woocommerce_product_options_grouping :

To implement the function, you should:

• Créez un identifiant unique pour identifier le champ de texte. Utilisez les données d'instance dans le constructeur.
• Utilisez une étiquette pour ajouter une description au champ de saisie.
• Si vous le souhaitez, vous pouvez spécifier un espace réservé.
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• Pour ajouter du texte à l'info-bulle, vous pouvez utiliser l'option de description.

Les informations ci-dessus seront regroupées dans un tableau associé et atteindront ensuite woocommerce_wp_text_input. Cette fonction API de personnalisation de WooCommerce génère un élément texte contenant les informations que vous venez de fournir.

Sauvegarde des informations

To save the changes above, you’ll need to:

• Dans la méthode init, ajoutez ce code :
• Vérifiez que plusieurs valeurs nonce sont présentes ; sinon, renvoyez false par mesure de sécurité. Vous pouvez détecter les valeurs nonce en consultant le code source fourni par WooCommerce.
• Dans la collection $_POST correspondant à la saisie utilisateur, désinfectez les données.
• Enregistrez les informations précédemment enregistrées dans la table de métadonnées de publication.

Rendu des informations sur le front-end

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

Un ID de champ de texte et son initialisation dans le constructeur.

• Une fonction d'initialisation pour connecter le front-end au code précédemment créé.
• Pour rendre la vraie valeur.

Démarrage du plugin

Vous avez presque terminé ce tutoriel sur la personnalisation de WooCommerce ! La dernière étape consiste à configurer un fichier bootstrap pour lancer le plugin avec toutes les modifications récentes. Voici le code de démarrage :

A couple of extra notes:

• C'est ici que vous incluez les dépendances.
• Une fois la fonction opérationnelle, vérifiez si le tableau de bord s'affiche. Si c'est le cas, la partie appropriée du plugin est correctement chargée ; sinon, l'affichage standard est correct.

En conclusion

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more Tutoriels WooCommerce on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, Contactez-nous for more information!