Comment ajouter un nouveau menu dans le menu de la page MyAccount dans Woocommerce
Publié: 2020-01-29
Êtes-vous à la recherche d'un moyen simple d'ajouter un nouvel onglet dans la page de mon compte dans WooCommerce qui peut être mis en œuvre rapidement et facilement par n'importe quel utilisateur de WooCommerce, quel que soit son niveau de compétence ? La solution rapide pour ajouter un nouvel onglet dans la page mon compte consiste à ajouter deux crochets de filtre WooCommerce qui se chargent d'ajouter le menu et l'autre se charge de rediriger vers la nouvelle page ajoutée à l'URL respective.
Dans ce tutoriel, je vais vous montrer comment ajouter exactement un menu dans le menu de mon compte WooCommerce, puis créer un filtre de redirection pour rediriger les utilisateurs vers n'importe quelle page que vous préférez, y compris une redirection externe. Commençons donc par comprendre le fonctionnement de la page de menu Mon compte.
Fonctionnement du menu de la page MyAccount WooCommerce
Ces onglets sur WooCommerce sont essentiellement des menus et il est possible de filtrer le contenu de cette page et d'obtenir le tableau qui affiche les menus, puis d'ajouter le contenu au tableau et de renvoyer le contenu.
Crochets de filtre WooCommerce/WordPress
Si vous n'avez jamais travaillé avec des filtres auparavant, j'ai écrit une introduction détaillée au filtre dans ce tutoriel apply_filters et do_action où j'ai mentionné le fonctionnement des filtres WordPress .
Un autre bon exemple est le filtre que nous avons appliqué sur the_content dans ce tutoriel WordPress, pour ajouter du contenu avant ou après la publication WordPress par défaut ou le contenu de la page .
Assez d'informations sur les crochets de filtre, concentrons-nous maintenant sur la façon d'ajouter un menu dans la page de mon compte dans WooCommerce.
J'aime commencer tous mes tutoriels par un résumé rapide étape par étape pour vous aider à apprendre et à comprendre ce qui se passe dans le code. Je n'aime pas simplement partager le code et vous demander de copier-coller sans expliquer ce que fait le code. C'est une bonne approche car les lecteurs peuvent être plus innovants et ajouter des fonctionnalités plus spécifiques à l'extrait de code.
Étapes pour ajouter un nouvel onglet dans la page Mon compte WooCommerce
Pour ajouter un nouvel onglet dans la page mon compte, cela implique trois étapes qui sont les suivantes :
- Créez un crochet de filtre pour ajouter le nouvel onglet dans la page mon compte et le filtre doit rassembler toutes les données affichées dans le menu, puis insérer vos nouvelles données . (s'il vous plaît rappelez-vous ce mot PUSH, je vous expliquerai plus en détail plus tard dans ce post)
- Créez un deuxième filtre qui ajoute la redirection URL du menu que vous avez ajouté à la première étape à la page que vous avez créée.
- Ajoutez ce code à votre fichier functions.php dans votre thème ou vous pouvez ajouter ce code à une classe ou une fonction de plugin et vous ajouterez avec succès le nouveau menu sur la page de mon compte dans WooCommerce.
Ajouter un menu dans la page Mon compte dans Woocommerce
Ces derniers jours, un client m'a demandé d'ajouter un nouveau menu sur la page mon compte dans un site WooCommerce existant. Idéalement, le menu était censé rediriger vers le Forum que nous avions ajouté précédemment à l'aide de BuddyPress.
Dans ce didacticiel, je veux supposer que c'est le cas et nous allons continuer et ajouter le menu à la page Mon compte et il devrait rediriger vers le forum.
Pour commencer, l'image ci-dessous indique le produit final de la façon dont j'ai ajouté le nouvel onglet dans la page mon compte de ce site WooCommerce et redirigé les utilisateurs vers le Forum.
Ajouter le premier filtre pour ajouter un menu à la page Mon compte
Le code pour ajouter un nouvel onglet dans la page mon compte comprend un crochet de filtre et une fonction de rappel comme indiqué ci-dessous :
// Premier crochet qui ajoute l'élément de menu au menu WooCommerce de mon compte
fonction example_forum_link( $menu_links ){
// nous accrocherons "womanide-forum" plus tard
$new = array( 'example-forum' => 'Exemple de forum' );
// ou si vous avez besoin de 2 liens
// $nouveau = array( 'link1' => 'Lien 1', 'link2' => 'Lien 2' );
// array_slice() est bon quand on veut ajouter un élément entre les autres
$menu_links = array_slice( $menu_links, 0, 1, true )
+ $nouveau
+ array_slice( $menu_links, 1, NULL, true );
retourne $menu_links ;
}
add_filter ( 'woocommerce_account_menu_items', 'example_forum_link' );
Lorsque vous ajoutez ce code à functions.php, vous devriez voir le nouveau menu sur la page de mon compte comme indiqué dans l'image ci-dessous :
Comment fonctionne le code
- Dans ce filtre, nous utilisons la variable $menu_links que nous passons à la fonction de rappel pour obtenir tous les menus de la page mon compte dans un tableau.
- Après avoir obtenu le tableau de liens de menu, nous utilisons la fonction array_slice() pour extraire puis PUSH dans notre nouvel élément de menu, puis nous avons tous les menus dans un tableau et les attachons au crochet WooCommerce woocommerce_account_menu_items .
- À ce stade, l'élément de menu est maintenant affiché dans le menu de mon compte
Comme vous pouvez le voir, le filtre a ajouté le nouveau menu au menu par défaut de mon compte. Lorsque vous cliquez sur le menu, vous serez redirigé vers une page 404 puisque la redirection sur ce nouvel élément de menu fonctionne désormais comme indiqué sur l'image ci-dessous :
Cette page n'existe pas sur le tableau de bord WooCommerce mais vous pouvez voir le slug example-forum , que nous avons ajouté dans le premier filtre et nous l'utiliserons dans le deuxième filtre pour rediriger vers la page du forum.
Ajouter un deuxième filtre pour ajouter un menu à la page Mon compte
Comme mentionné ci-dessus, le deuxième filtre ajoutera la page vers laquelle nous voulons rediriger ce menu et dans ce cas, nous pouvons l'ajouter en utilisant le code ci-dessous :
// Deuxième filtre pour rediriger le point de terminaison WooCommerce vers une URL personnalisée
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
if( $endpoint === 'exemple-forum' ) {
// C'est là que vous ajoutez l'URL personnalisée, elle pourrait être externe comme, dans ce cas, nous devons aller sur mon profil sur le froum bbpress
// Je vais utiliser cette fonction (bp_core_get_username( bp_loggedin_user_id() );) pour obtenir mon identifiant d'utilisateur de profil et l'ajouter à l'URL comme indiqué ci-dessous
$url = site_url() .'/members/' . bp_core_get_username( bp_loggedin_user_id() );
}
retourne $url ;
}
add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );
Lorsque vous ajoutez ce code juste en dessous du premier filtre que nous avons ajouté à l'étape ci-dessus, votre menu Exemple de forum doit rediriger vers le profil d'utilisateur spécifique, comme indiqué dans l'image ci-dessous où j'ai redirigé vers mon profil sur le forum BBPress.
Compléter l'extrait de code pour ajouter un nouvel onglet dans la page Mon compte et rediriger vers n'importe quelle page
Pour ajouter le nouveau menu au menu de la page de mon compte dans WooCommerce, vous devez ajouter l'extrait de code complet partagé ci-dessous, dans votre fichier functions.pfp de votre thème et remplacer les variables par votre slug respectif et la page où vous souhaitez rediriger le menu.
// Premier crochet qui ajoute l'élément de menu au menu WooCommerce de mon compte
fonction example_forum_link( $menu_links ){
// nous accrocherons "womanide-forum" plus tard
$new = array( 'example-forum' => 'Exemple de forum' );
// ou si vous avez besoin de 2 liens
// $nouveau = array( 'link1' => 'Lien 1', 'link2' => 'Lien 2' );
// array_slice() est bon quand on veut ajouter un élément entre les autres
$menu_links = array_slice( $menu_links, 0, 1, true )
+ $nouveau
+ array_slice( $menu_links, 1, NULL, true );
retourne $menu_links ;
}
add_filter ( 'woocommerce_account_menu_items', 'example_forum_link' );
// Deuxième filtre pour rediriger le point de terminaison WooCommerce vers une URL personnalisée
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
if( $endpoint === 'exemple-forum' ) {
// C'est là que vous ajoutez l'URL personnalisée, elle pourrait être externe comme dans ce cas, nous devons aller sur mon profil sur le froum bbpress
// Je vais utiliser cette fonction (bp_core_get_username( bp_loggedin_user_id() );) pour obtenir mon identifiant d'utilisateur de profil et l'ajouter à l'URL comme indiqué ci-dessous
$url = site_url() .'/members/' . bp_core_get_username( bp_loggedin_user_id() );
}
retourne $url ;
}
add_filter( 'woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4 );
Emballer
Créer un nouvel onglet de menu dans la page mon compte sur WooCommerce ne devrait plus être un défi après avoir lu ce tutoriel. Je vous ai expliqué étape par étape et avec un exemple pratique comment ajouter un nouvel onglet dans la page mon compte et créer une redirection vers une page de votre choix. J'ai également écrit d'autres tutoriels sur la façon d'ajouter la redirection WooCommerce après le paiement et la redirection WooCommerce après l'inscription. Si vous n'êtes pas en mesure de mettre en œuvre cette solution, vous pouvez demander l'aide d'un développeur WooCommerce professionnel.