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 est le plus populaire Plugin WordPress Pour le e-commerce, c'est la solution préférée de nombreux vendeurs. Pourquoi ? Gratuit et très polyvalent, WooCommerce est facilement personnalisable selon vos besoins. Bien que le plugin propose une série d'options prédéfinies, vous pouvez effectuer de nombreuses actions en coulisses.

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 pour Personnaliser WooCommerce

Ci-dessous, vous trouverez la configuration de base dont vous aurez besoin pour personnaliser 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

Il y a un concept WordPress essentiel que nous devons aborder avant d'aborder la personnalisation de WooCommerce : les hooks. WPDébutant Les hooks sont des « fonctions applicables à une action ou à un filtre dans WordPress. Les actions et les filtres dans WordPress sont des fonctions que les développeurs de thèmes et de plugins peuvent modifier pour modifier les fonctionnalités par défaut de WordPress. »

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 :

Pour implémenter la fonction, vous devez :

• 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é.
• Si cela rend les choses plus confortables, vous pouvez afficher une info-bulle lorsque l'utilisateur passe la souris sur une icône.
• 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

Pour enregistrer les modifications ci-dessus, vous devrez :

• 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

Pour afficher les informations en front-end, vous devrez créer une nouvelle classe. Vous aurez notamment besoin de :

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 :

Quelques notes supplémentaires :

• 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

Maintenant que vous savez comment personnaliser WooCommerce pour ajouter vos champs à des produits simples, vous êtes sur la bonne voie pour fournir exactement les services que vous souhaitez. Pour en savoir plus, consultez notre article. Tutoriels WooCommerce sur notre blog. Si vous cherchez des experts qui maîtrisent ce plugin e-commerce populaire, Contactez-nous pour plus d'informations !