Comment créer un panneau de paramètres personnalisés dans WooCommerce

WooCommerce est de loin le premier plugin de commerce électronique pour WordPress. Au moment de la rédaction de ce guide, il compte plus de 3 millions d'installations actives et serait à l'origine de plus de 40% des ventes en ligne..

L'une des raisons de la popularité de WooCommerce est son extensibilité. À l'instar de WordPress, WooCommerce regorge d'actions et de filtres auxquels les développeurs peuvent se connecter s'ils souhaitent étendre les fonctionnalités par défaut de WooCommerce..

Un bon exemple est la possibilité de créer un panneau de données personnalisé..

Ce qui est couvert dans ce tutoriel?

Ce tutoriel est divisé en deux parties. Dans la première partie, nous allons examiner:

• ajout d'un panneau personnalisé à WooCommerce
• ajout de champs personnalisés au panneau
• désinfection et sauvegarde des valeurs de champ personnalisées

Ensuite, dans la deuxième partie, nous examinerons:

• afficher des champs personnalisés sur la page du produit
• modification du prix du produit en fonction de la valeur des champs personnalisés
• affichage des valeurs de champ personnalisées dans le panier et la commande

Qu'est-ce qu'un panneau de données personnalisé WooCommerce??

Lorsque vous créez un nouveau produit dans WooCommerce, vous saisissez la plupart des informations critiques sur le produit, telles que le prix et les stocks, dans le menu principal. Données du produit section.

Dans la capture d'écran ci-dessus, vous pouvez voir que le Données du produit la section est divisée en panneaux: les onglets en bas à gauche, par exemple. Général, Inventaire, etc., chacun ouvre des panneaux différents dans la vue principale à droite.

Dans ce tutoriel, nous allons voir comment créer un panneau personnalisé pour les données de produit et y ajouter des champs personnalisés. Nous verrons ensuite comment utiliser ces champs personnalisés au début et enregistrer leurs valeurs dans les commandes des clients..

Dans notre exemple de scénario, nous allons ajouter un panneau "Giftwrap" qui contient des champs personnalisés:

• une case à cocher pour inclure une option d'emballage pour le produit sur la page du produit
• une case à cocher pour activer un champ de saisie dans lequel un client peut entrer un message sur la page du produit
• un champ de saisie pour ajouter un prix pour l'option d'emballage cadeau; le prix sera ajouté au prix du produit dans le panier

En bout de ligne, ça va ressembler à ça:

Et sur le devant, cela ressemblera à quelque chose comme ça:

Créer un nouveau plugin

Etant donné que nous étendons les fonctionnalités, nous allons créer un plugin plutôt que d’ajouter notre code à un thème. Cela signifie que nos utilisateurs pourront conserver cette fonctionnalité supplémentaire même s'ils changent de thème pour leur site. Créer un plugin est hors de propos pour ce tutoriel, mais si vous avez besoin d'aide, jetez un coup d'œil à ce cours Tuts + Coffee Break sur la création de votre premier plugin: 

Notre plugin comprendra deux classes: une pour gérer les tâches de l’administrateur, et une pour tout gérer à l’avant. Notre structure de fichier de plugin va ressembler à ceci:

Classe Admin

Tout d'abord, nous devons créer notre classe pour tout gérer sur le back-end. Dans un dossier appelé Des classes, créer un nouveau fichier appelé class-tpwcp-admin.php.

Cette classe traitera les éléments suivants:

• Créez l'onglet personnalisé (l'onglet correspond à l'élément cliquable situé à gauche de la section Données du produit)..
• Ajoutez les champs personnalisés au panneau personnalisé (le panneau est l'élément qui s'affiche lorsque vous cliquez sur un onglet)..
• Déterminez les types de produits pour lesquels le panneau sera activé.
• Désinfectez et enregistrez les valeurs de champ personnalisées.

Collez le code suivant dans ce nouveau fichier. Nous allons le parcourir étape par étape après.

 __ ('Giftwrap', 'tpwcp'), // Le nom de votre panneau 'target' => 'gifwrap_panel', // Sera utilisé pour créer un lien d'ancrage, doit donc être unique 'class' => array (' giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Classe pour l'onglet de votre panneau - permet de masquer / afficher en fonction du type de produit' priorité '=> 80, // Où votre panneau apparaîtra. Par défaut, 70 est le dernier élément); retourne $ tabs;  / ** * Champs d'affichage du nouveau panneau * @voir https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @since 1.0.0 * / fonction publique display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Inclure l'option de l'emballage cadeau', 'tpwcp'), 'desc_tip' => __ ('Sélectionnez cette option pour afficher les options d'emballage cadeau pour ce produit', 'tpwcp'))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Inclure le message personnalisé', 'tpwcp'), 'desc_tip' => __ ('Sélectionnez cette option pour permettre aux clients d'inclure un message personnalisé ',' tpwcp '))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('coût cadeau', 'tpwcp'), 'type' => 'numéro', 'desc_tip' => __ ('entrez le coût d'emballer ce produit ',' tpwcp '))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Sauvegarde le paramètre include_giftwrap_option $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'Oui Non'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Sauvegarde le paramètre giftwrap_cost $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ product-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ product-> save (); 

Créer l'onglet personnalisé

Pour créer l'onglet personnalisé, nous accrochons dans le woocommerce_product_data_tabs filtrer en utilisant notre create_giftwrap_tab une fonction. Cela passe le WooCommerce $ tabs object in, que nous modifions ensuite à l'aide des paramètres suivants:

• étiquette: utilisez ceci pour définir le nom de votre onglet.
• cible: ceci est utilisé pour créer un lien d'ancrage et doit donc être unique.
  
• classe: un tableau de classes qui sera appliqué à votre panneau.
• priorité: définir où vous voulez que votre onglet apparaisse.

Types de produits

À ce stade, il convient de déterminer les types de produits pour lesquels nous souhaitons que notre panel soit activé. Par défaut, il existe quatre types de produits WooCommerce: simple, variable, groupé et affilié. Disons que, pour notre exemple de scénario, nous souhaitons uniquement que notre panneau Giftwrap soit activé pour des types de produits simples et variables..

Pour y parvenir, nous ajoutons le show_if_simple et show_if_variable classes au paramètre de classe ci-dessus. Si nous ne voulions pas activer le panneau pour les types de produits variables, nous omettions simplement de show_if_variable classe.

Ajouter des champs personnalisés

Le prochain crochet que nous utilisons est woocommerce_product_data_panels. Cette action nous permet de générer notre propre marquage pour le panneau Giftwrap. Dans notre classe, la fonction display_giftwrap_fields crée un couple de div wrappers, dans lesquels nous utilisons certaines fonctions WooCommerce pour créer des champs personnalisés. 

Notez comment le identifiant attribuer à notre extérieur div, giftwrap_panel, correspond à la valeur que nous avons passée dans le cible paramètre de notre onglet cadeau ci-dessus. C’est ainsi que WooCommerce saura afficher ce panneau en cliquant sur l’onglet Giftwrap..

Fonctions de champ personnalisé WooCommerce

Dans notre exemple, les deux fonctions que nous utilisons pour créer nos champs sont les suivantes:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Ces fonctions sont fournies par WooCommerce spécifiquement dans le but de créer des champs personnalisés. Ils prennent un tableau d'arguments, y compris:

• identifiant: c'est l'identifiant de votre champ. Il doit être unique et nous le référencerons plus tard dans notre code..
• étiquette: ceci est l'étiquette telle qu'elle apparaîtra à l'utilisateur.
• desc_tip: il s'agit de l'info-bulle facultative qui apparaît lorsque l'utilisateur survole l'icône du point d'interrogation en regard de l'étiquette..

Notez également que le woocommerce_wp_text_input fonction prend également un type argument, où vous pouvez spécifier nombre pour un champ de saisie numérique, ou texte pour un champ de saisie de texte. Notre champ sera utilisé pour entrer un prix, donc nous le spécifions comme nombre.

Enregistrer les champs personnalisés

La dernière partie de notre classe d’admin utilise le woocommerce_process_product_meta action pour enregistrer nos valeurs de champ personnalisé.

Afin de normaliser et d'optimiser la manière dont il stocke et récupère les données, WooCommerce 3.0 a adopté une méthode CRUD (Créer, Lire, Mettre à jour, Supprimer) pour définir et obtenir les données du produit. Vous pouvez en savoir plus sur la réflexion derrière ceci dans l'annonce de WooCommerce 3.0.

Dans cet esprit, au lieu du plus familier get_post_meta et update_post_meta méthodes que nous aurions pu utiliser dans le passé, nous utilisons maintenant le $ post_id créer un WooCommerce $ produit objet, puis appliquez le update_meta_data méthode pour sauvegarder les données. Par exemple:

$ product = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'Oui Non'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ product-> save ();

Veuillez également noter que nous veillons à assainir nos données avant de les enregistrer dans la base de données. Il y a plus d'informations sur la désinfection des données ici: 

Fichier du plugin principal

Lorsque vous avez créé votre readme.txt fichier et votre fichier de plugin principal tutsplus-woocommerce-panel.php, vous pouvez ajouter ce code à votre fichier principal.

init ();  add_action ('plugins_loaded', 'tpwcp_init');

Cela initiera votre classe d'administrateur.

Lorsque vous activez votre plugin sur un site (avec WooCommerce), puis créez un nouveau produit, votre nouveau panneau Giftwrap est disponible, ainsi que des champs personnalisés. Vous pouvez mettre à jour les champs et les sauvegarder… Mais vous ne verrez rien pour le moment..

Conclusion

Récapitulons ce que nous avons vu jusqu'à présent dans cet article..

Nous avons examiné un exemple de scénario permettant d'ajouter un panneau "Giftwrap" personnalisé à WooCommerce. Nous avons créé un plugin et ajouté une classe pour créer le panneau. Dans la classe, nous avons également utilisé des fonctions WooCommerce pour ajouter des champs personnalisés, puis nous avons désinfecté et enregistré ces valeurs de champs..