Dans quel cas ajouter un lien personnalisé dans le menu WooCommerce ?
Dans la majorité des cas, il s’agira d’afficher une page dynamique qui concerne l’utilisateur connecté. Cela peut être, par exemple, un lien personnalisé “Mes commissions” dans le cadre d’un programme d’affiliation, ou des informations supplémentaires sur les commandes ou le client lui-même…
Plugin pour un lien personnalisé dans le menu WooCommerce
Parmi les plus populaires des plugins capables d’insérer un lien personnalisé dans le menu WooCommerce il y a WooCommerce Account Page par Iconic, qui coûte 49 USD / an (à l’heure où ces lignes sont écrites). Il est assez simple d’utilisation : il vous suffit de créer une page standard puis, dans la section “Attributs de page”, de sélectionner la page qui contient le shortcode [woocommerce_my_account] (c’est à dire votre page “Mon compte”). Ensuite vous pouvez décider quel(s) rôle(s) peuvent accéder à cette page. Simple et parfait. Mais si vous n’avez qu’une page et un lien personnalisé à ajouter au menu WooCommerce, il est peut-être dommage de débourser 49 USD pour cela. Quelle pourrait être une autre approche ?
Utiliser les EndPoints de WooCommerce
Que sont les EndPoints – Points de terminaison – de WooCommerce ? Voici un extrait de la doc officielle sur le sujet :
Les points de terminaison sont une partie supplémentaire dans l'URL du site Web qui est détectée pour afficher un contenu différent lorsqu'elle est présente. Par exemple : vous pouvez avoir une page « Mon compte » affichée à l'adresse URL votresite.com/mon-compte . Lorsque le point de terminaison « modifier-compte » est ajouté à cette URL, ce qui donne « votresite.com/mon-compte/modifier-compte », la page Modifier le compte s'affiche à la place de la page Mon compte . Cela nous permet d'afficher différents contenus sans avoir besoin de plusieurs pages et de codes courts, et réduit la quantité de contenu à installer. Les points de terminaison sont situés dans WooCommerce > Paramètres > Avancé .
WooCommerce
Un exemple simple d'ajout de lien personnalisé dans le menu WooCommerce
Pour cet exemple simple, nous n’allons pas créer une page standard comme le demande le plugin WooCommerce Account Page, nous allons réaliser un affichage dynamique via un shortcode. Donc dans ce cas, notre page n’existera pas “physiquement”. Vous allez comprendre comme il est simple de réaliser cet exercice qui permet, facilement, d’afficher un contenu au sein de votre environnement WooCommerce. Je veux dire par là que le contenu s’affiche dans le cadre de votre menu (sur la page “Mon Compte”, donc) et non sur sur une page séparée qui vous ferait sortir de cet environnement. Ci-dessous l’exemple généré par le plugin Woo Affiliations. Nous allons faire beaucoup plus simple, le but étant que vous compreniez le principe.

Le shortcode
Dans votre fichier functions.php de votre thème enfant ou dans un petit plugin de test, collez ces codes :
//création de la fonction d'affichage de données utilisateur via un shortcode
function bonjour_client_connecte(){
$user = wp_get_current_user(); // Récupérer l'utilisateur connecté
// Accès réservé aux clients connectés
if (is_user_logged_in() || current_user_can('customer')) {
return 'Bonjour ! ' . esc_html($user->first_name) . ' ' . esc_html($user->last_name) . ', nous sommes le ' . date_i18n('j F Y') . '.';
} else {
return 'Vous devez être un client connecté pour accéder à ce contenu.';
}
}
add_shortcode('bonjour-client', 'bonjour_client_connecte');
Nous savons maintenant que nous afficherons “Bonjour François Pignon, nous sommes le jeudi 24 octobre 2024” n’importe où nous aurons inséré le shortcode [bonjour-client]. Et c’est précisément ce contenu que nous allons utiliser pour notre lien personnalisé dans le menu WooCommerce. Toujours dans le fichier functions.php ou votre plugin, collez le code suivant :
Le lien personnalisé dans le menu WooCommerce
function add_bienvenue_to_woocommerce_menu() {
// Ajouter l'élément "Bienvenue !" au menu WooCommerce
add_filter('woocommerce_account_menu_items', function($items) {
// Autoriser le contenu aux clients et administrateurs
if (current_user_can('administrator') || current_user_can('customer')) {
// Insérer "Bienvenue !" juste après "edit-account" (ou un autre lien)
$new_items = [];
foreach ($items as $key => $value) {
$new_items[$key] = $value;
if ($key === 'edit-account') {
// Change 'edit-account' si tu veux l'ajouter ailleurs
$new_items['bienvenue'] = 'Bienvenue !';
}
}
return $new_items;
}
return $items;
});
// Ajouter le rewrite endpoint pour "Bienvenue"
add_action('init', function() {
add_rewrite_endpoint('bienvenue', EP_ROOT | EP_PAGES);
}, 10);
// Contenu de la page Bienvenue
add_action('woocommerce_account_bienvenue_endpoint', function() {
// Afficher le contenu personnalisé ici
echo do_shortcode('[bonjour-client]');
});
}
add_action('after_setup_theme', 'add_bienvenue_to_woocommerce_menu');
TRES IMPORTANT ! Une fois que vous avez mis en place ces 2 fonctions et les avez chargées dans votre FTP, rendez-vous dans Réglages => Permaliens puis enregistrez les réglages sans rien modifier afin de réenregistrer les permaliens pour que WordPress prenne en compte les nouvelles règles de réécriture d’URL
Résultat du 1er test

Lien personnalisé dans le menu WooCommerce avec un plugin gratuit
Ce plugin que je vous offre, Lien Perso Woo Menu, va automatiquement créer un lien personnalisé dans le menu WooCommerce et afficher son contenu sur l’environnement de la page Mon Compte. Il suffit d’éditer la page de votre choix et de positionner votre page “Mon Compte” comme Parent.
Note : contrairement au plugin payant WooCommerce Account Page, ce plugin ne permet pas de paramétrer les rôles ayant accès aux pages du menu WooCommerce. Nous partons du principe que, étant donné que nous sommes dans l’environnement “my-account”, il faut obligatoirement être connecté pour voir le menu WooCommerce et son contenu.
Pour utiliser ce plugin, il vous suffit de l’installer et de l’activer. Ensuite, vous pouvez ajouter ou modifier une page existante et vous rendre dans la colonne droite, section Parent et sélectionner votre page “Mon Compte” :

Que fait notre plugin "Lien Perso Woo Menu" ?
Après avoir saisi votre contenu normalement et vous être assuré.e que la page Parent est bien positionné sur votre page Mon Compte, publiez/enregistrez vos modifications puis rendez vous sur votre page “Mon Compte” :

Conseil : pour conserver des liens personnalisés dans votre menu WooCommerce qui tiennent sur une ligne, je vous conseille de choisir des titres de page courts. Ne perdez pas de vue que le titre de votre page est le texte du lien.
Le code du plugin
Pour ceux qui aiment bien chercher à comprendre, je mets à votre disposition le code de ce petit plugin. Nous avons commenté les fonctions et leur avons donné des noms explicites. Vous pourrez ensuite le télécharger plus bas.
post_title;
}
return $pages;
}
add_filter( 'page_attributes_dropdown_pages_args', 'ajouter_page_parente_mon_compte' );
// Fonction pour ajouter les pages personnalisées dans le menu "Mon Compte" de WooCommerce
function ajouter_page_personnalisee_menu_woo( $items ) {
$args = array(
'post_type' => 'page',
'post_parent' => wc_get_page_id( 'myaccount' ),
'posts_per_page' => -1,
'post_status' => 'publish'
);
$child_pages = get_posts( $args );
foreach ( $child_pages as $page ) {
$slug = $page->post_name;
// Utilise l'URL de l'endpoint WooCommerce pour rester dans le cadre "Mon Compte"
$items[$slug] = $page->post_title;
}
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'ajouter_page_personnalisee_menu_woo' );
// Fonction pour ajouter des endpoints pour les pages enfants de "Mon Compte"
function ajouter_endpoint_page_personnalisee() {
$args = array(
'post_type' => 'page',
'post_parent' => wc_get_page_id( 'myaccount' ),
'posts_per_page' => -1,
'post_status' => 'publish'
);
$child_pages = get_posts( $args );
foreach ( $child_pages as $page ) {
add_rewrite_endpoint( $page->post_name, EP_PAGES );
}
}
add_action( 'init', 'ajouter_endpoint_page_personnalisee' );
// Fonction pour afficher le contenu des pages dans la section "Mon Compte"
function afficher_contenu_page_personnalisee( $endpoint ) {
$args = array(
'name' => $endpoint, // Le slug de la page
'post_type' => 'page', // Chercher uniquement dans les pages
'post_parent' => wc_get_page_id( 'myaccount' ), // Limiter aux pages enfants de "Mon Compte"
'posts_per_page' => 1,
'post_status' => 'publish',
);
$pages = get_posts( $args );
if ( ! empty( $pages ) ) {
// Si une page est trouvée, on affiche son contenu
$page = $pages[0];
echo apply_filters( 'the_content', $page->post_content );
} else {
// Si aucune page n'est trouvée
echo 'Contenu introuvable pour le slug : ' . esc_html( $endpoint );
}
}
// Associer chaque endpoint à son action pour afficher le contenu
function associer_endpoints_aux_actions() {
$args = array(
'post_type' => 'page',
'post_parent' => wc_get_page_id( 'myaccount' ),
'posts_per_page' => -1,
'post_status' => 'publish'
);
$child_pages = get_posts( $args );
foreach ( $child_pages as $page ) {
// Créer un endpoint pour chaque page enfant
add_action( 'woocommerce_account_' . $page->post_name . '_endpoint', function() use ( $page ) {
// Appelle la fonction pour afficher le contenu de la page
afficher_contenu_page_personnalisee( $page->post_name );
});
}
}
add_action( 'init', 'associer_endpoints_aux_actions' );
//réinitialiser les url rewrite quand une page avec parent "mon compte" est sauvegardée
function flush_rewrite_rules_si_parent_page_compte( $post_id ) {
// Vérifier que le post est de type "page"
if ( 'page' !== get_post_type( $post_id ) ) {
return;
}
// Récupérer le parent de la page
$parent_id = wp_get_post_parent_id( $post_id );
// Vérifier si le parent est la page "Mon compte"
if ( $parent_id == wc_get_page_id( 'myaccount' ) ) {
flush_rewrite_rules(); // Réinitialiser les permaliens
}
}
add_action( 'save_post', 'flush_rewrite_rules_si_parent_page_compte' );