Cet article expliquera comment ajouter des points de terminaison personnalisés à la page "Mon compte" de WooCommerce. Nous pouvons le rendre accessible de deux manières : soit sous la forme d’un onglet personnalisé, soit sous la forme d’un bouton pour chaque commande dans l’onglet "Commandes".
La page "Mon compte" de WooCommerce utilise la fonctionnalité intégrée de WordPress pour les points de terminaison, ce qui facilite l’ajustement ou l’ajout de vos propres points de terminaison. Si vous n’êtes pas familier avec les points de terminaison, je vous recommande de lire mon article qui explique en détail comment ajouter des points de terminaison personnalisés dans WordPress.
La façon dont vous rendez votre point de terminaison personnalisé accessible à l’utilisateur à partir de "Mon compte" dépend entièrement des besoins de votre boutique en ligne. Si vous voulez simplement une page générale pour des informations supplémentaires, vous pouvez ajouter cette page comme son propre onglet. Si vous souhaitez toutefois que votre point de terminaison soit lié à chaque commande, vous devez ajouter votre point de terminaison à chaque ligne de commande dans l’onglet "Commandes". Dans cet article, nous examinerons les deux méthodes.
Ajout d’un onglet personnalisé et d’un point de terminaison à "Mon compte"
Par exemple, supposons que notre boutique en ligne vende des logiciels et que nous ayons besoin d’un endroit pour afficher les clés de licence de nos clients dans leur page "Mon compte". Nous ajouterons un onglet personnalisé "Clés de licence" qui devrait afficher toutes les clés de licence valides enregistrées pour cet utilisateur.
Ajouter un point de terminaison personnalisé
Dans le code de notre thème functions.phpou plugin, nous ajoutons d’abord notre point de terminaison personnalisé en utilisant add_rewrite_endpoint(). Comme premier argument, nous fournissons une clé unique. Dans l’exemple ci-dessous, j’ai appelé le point de terminaison ‘ license-keys‘.
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Gardez à l’esprit que WordPress ajoute automatiquement notre clé pour interroger les variables lors de l’utilisation add_rewrite_endpoint(), il n’est donc pas nécessaire de filtrer query_vars.
Si vous rencontrez des erreurs « 404 introuvable », vous devez actualiser vos permaliens. Pour ce faire, allez dans Paramètres> Permaliens et cliquez simplement sur Enregistrer. Chaque fois que nous apportons des modifications aux permaliens ou aux points de terminaison, nous devons le faire.
Ajout d’un onglet personnalisé
L’étape suivante consiste à ajouter un onglet aux onglets de la page "Mon compte". Nous faisons cela avec le filtre woocommerce_account_menu_items. Le tableau fourni par le filtre contient toutes les touches de tabulation et leur étiquette correspondante.
Vous pouvez simplement ajouter votre onglet à la fin du tableau, mais si vous voulez plus de contrôle sur l’endroit où votre onglet doit apparaître, vous devez manipuler le tableau à l’aide de fonctions PHP. Dans l’exemple ci-dessus, je le veux à la fin, mais avant l’onglet "Déconnexion". Je retire donc l’onglet "Déconnexion", insère mon onglet, puis remets l’onglet "Déconnexion" après.
add_filter('woocommerce_account_menu_items', function($items) {
$logout = $items['customer-logout'];
unset($items['customer-logout']);
$items['license-keys'] = __('License keys', 'txtdomain');
$items['customer-logout'] = $logout;
return $items;
});Si vous actualisez votre page Mon compte maintenant, vous devriez voir votre onglet apparaître avant "Déconnexion". En cliquant dessus, vous accédez à l’URL " <example.com>/my-account/license-keys/". Cependant, vous ne verrez rien changer lorsque vous cliquerez sur l’onglet. C’est parce que nous n’avons pas défini ce qu’il faut afficher. C’est notre prochaine étape.
Rendu du contenu de l’onglet personnalisé
WooCommerce offre le crochet woocommerce_account_<endpoint key>_endpointpour produire du contenu dans "Mon compte", où vous le remplacez par votre clé de point de terminaison personnalisée. Dans notre exemple, le crochet correct serait woocommerce_account_license-keys_endpoint.
add_action('woocommerce_account_license-keys_endpoint', function() {
_e('Your license keys', 'txtdomain');
});Quant à la sortie réelle de l’onglet, cela dépend entièrement de vous. Vous pouvez faire une requête, récupérer des informations, puis les afficher. Cependant, il est recommandé d’utiliser des modèles pour générer du HTML au lieu de générer la sortie HTML complète directement dans notre fonction. WooCommerce offre d’excellentes fonctionnalités pour les modèles, nous allons donc l’utiliser.
En utilisant, wc_get_template()nous pouvons fournir un modèle personnalisé (il n’est pas nécessaire que ce soit l’un des modèles de WooCommerce). Comme deuxième argument, nous pouvons définir des variables qui seront transmises au fichier de modèle. Suivant la structure établie de WooCommerce, nous créons un modèle WooCommerce personnalisé que nous avons call license-keys.phpdans <theme>/woocommerce/myaccount/le dossier.
Allez-y et créez un fichier vide <theme>/woocommerce/myaccount/license-keys.php. C’est à l’intérieur que vous définissez la sortie de votre onglet personnalisé. Nous avons également accès à toutes les variables que nous avons transmises dans le tableau à wc_get_template(). Ainsi, dans notre cas, la $licensesvariable sera disponible et remplie avec les informations que nous avons transmises à partir de notre fonction de point de terminaison. Vous pouvez transmettre autant de variables que nécessaire.
Ajout d’un point de terminaison et d’un bouton personnalisé à chaque commande dans la page "Mon compte"
Continuons avec le même exemple ci-dessus ; en supposant que votre boutique en ligne vend des logiciels et que vous deviez montrer les clés de licence du client quelque part. Mais au lieu d’ajouter un onglet personnalisé pour les afficher tous, peut-être préférez-vous afficher les clés de licence liées à une commande spécifique ? Nous pourrions ajouter un bouton personnalisé à côté de "Afficher" dans l’aperçu des commandes dans Mon compte :
Commençons par faire la même chose que ci-dessus : enregistrer un point de terminaison personnalisé :
Enregistrer un point de terminaison personnalisé
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});N’oubliez pas de vider les permaliens (allez dans Paramètres > Permaliens et appuyez sur le bouton Enregistrer) !
Ajouter une action personnalisée (et un bouton)
L’étape suivante consiste à ajouter le bouton en utilisant le filtre woocommerce_my_account_my_orders_actions. Comme deuxième argument de ce filtre, vous obtenez l’objet de commande. C’est très utile; nous voulons vérifier que la commande est terminée et payée, afin de ne pas afficher les clés de licence pour les commandes non payées ou annulées. Avec l’objet de commande, nous obtenons également l’ID de commande qui est probablement nécessaire pour demander les clés de licence des produits de cette commande. Dans le code ci-dessous, je vérifie simplement si le statut de la commande est terminé ou non. Vous devrez probablement ajouter votre propre code pour vérifier s’il existe ou non des clés de licence à afficher par commande.
Afin d’ajouter une action personnalisée, nous devons fournir une clé unique et un tableau avec des valeurs explicites pour ‘ url‘ et ‘ name‘. En ce qui concerne l’URL, nous utilisons la fonction de WordPress pour renvoyer l’URL du point de terminaison : wc_get_endpoint_url(). Comme nous devons également transmettre l’ID de commande, nous définissons l’ID de commande comme deuxième argument de cette fonction, ce qui donne l’URL suivante : <example.com>/my-account/license-keys/<order ID>/.
Cela devrait ajouter un nouveau bouton pour chaque commande terminée :
Maintenant, tout ce dont nous avons besoin est le modèle à afficher pour le point de terminaison license-keys.
Rendu du point de terminaison
La façon dont les points de terminaison fonctionnent dans WordPress est que tout ce qui vient après le point de terminaison est la valeur de cette variable de requête ; ou en d’autres termes; lorsque nous visitons par exemple l’URL <example.com>/my-account/license-keys/204/que nous pouvons utiliser get_query_var('license-keys')pour obtenir l’ID de commande ; 204.
Pour générer du contenu pour notre point de terminaison personnalisé, nous nous accrochons à woocommerce_account_<endpoint key>_endpointqui, dans notre cas, serait woocommerce_account_license-keys_endpoint. À l’intérieur de cette fonction, nous pouvons utiliser get_query_var()pour obtenir l’ID de commande et, avec cette requête, la commande de toutes les clés de licence.
La sortie HTML réelle de votre modèle personnalisé " myaccount/license-keys.php" dépend entièrement de vos besoins. Vous auriez probablement utilisé l’ID de commande pour rassembler les clés de licence dans un tableau et les transmettre au modèle pour une belle sortie. Dans le code ci-dessus, je transmets également l’ID de commande afin qu’il soit accessible comme $order_idà l’intérieur du modèle (par exemple, pour afficher un joli titre «Clés de licence pour la commande n° 204 »).