Comment modifier la page Mon compte de WooCommerce

Comment modifier la page Mon compte de WooCommerce

Pour modifier la page Mon compte de WooCommerce, vous avez trois options : le widget Mon compte d’Elementor Pro pour le design, une extension comme YITH WooCommerce Customize My Account Page pour réorganiser les onglets sans code, ou quelques lignes de PHP pour un contrôle total. Cette page est l’une des plus visitées par vos clients fidèles : elle mérite mieux que la version par défaut.

En bref

  • WooCommerce crée la page Mon compte avec le code court [woocommerce_my_account].
  • Chaque onglet (commandes, adresses, téléchargements…) est un « point de terminaison » qu’on peut renommer, masquer ou compléter.
  • Elementor Pro met en forme la page et remplace le tableau de bord par votre propre modèle.
  • YITH ajoute onglets, groupes, liens et bannières sans code ; l’extension est désormais payante uniquement.
  • En PHP, deux filtres suffisent pour renommer, retirer ou ajouter un onglet.

À quoi sert la page Mon compte ?

C’est l’espace personnel de chaque client, accessible après connexion. WooCommerce la crée lors de sa configuration, avec le code court [woocommerce_my_account]. Le client y retrouve ses commandes, ses fichiers téléchargeables, ses adresses de facturation et de livraison, ses moyens de paiement et ses informations de compte.

Bien pensée, elle peut faire beaucoup plus :

  • permettre de finaliser une commande restée en suspens après un problème de paiement ;
  • recommander facilement un produit déjà acheté ;
  • suggérer des produits ou des offres utiles au client ;
  • offrir un moyen simple et immédiat de vous contacter en cas de souci ;
  • enregistrer plusieurs adresses pour les prochains achats ;
  • donner accès aux fonctions avancées de la boutique : cartes cadeaux, liste de souhaits, points de fidélité.

Pourquoi la personnaliser ?

La version par défaut fait le travail, mais elle est austère : une liste de liens et un texte d’accueil. Pour une page que chaque client fidèle ouvre régulièrement, c’est dommage. Une boutique est souvent jugée sur ses points faibles : autant que ce ne soit pas celui-là.

Page Mon compte de WooCommerce par défaut, avec une simple liste de liens et un texte d’accueil
La page Mon compte par défaut : fonctionnelle, mais austère.

Méthode 1 : le widget Mon compte d’Elementor Pro

Si votre boutique est construite avec Elementor Pro, c’est la méthode la plus directe. Le widget Mon compte permet de :

  • disposer les onglets à l’horizontale ou à la verticale, et les renommer ;
  • régler typographie, couleurs, bordures et espacements, état par état ;
  • remplacer le contenu du tableau de bord par un modèle Elementor, par exemple un message de bienvenue et un formulaire de contact.

À la publication, Elementor propose d’en faire la page Mon compte de WooCommerce. Le widget soigne le design, mais n’ajoute pas de nouveaux onglets : pour cela, passez par la méthode 2 ou 3.

Méthode 2 : l’extension YITH WooCommerce Customize My Account Page

YITH WooCommerce Customize My Account Page modifie les éléments existants et en crée de nouveaux, sans toucher au code.

Les points de terminaison

Chaque section de la page Mon compte est un point de terminaison (en anglais, « endpoint ») : tableau de bord, commandes, téléchargements, adresses… Dans le menu YITH, puis Customize My Account Page, chacun se déplie pour régler :

  • son libellé et son icône ;
  • les rôles d’utilisateur qui le voient, si vous ne voulez pas l’afficher à tout le monde ;
  • son contenu, et s’il remplace le contenu d’origine ou s’ajoute au-dessus ou en dessous ;
  • une classe CSS pour aller plus loin dans la mise en forme.

Ajouter des points de terminaison, des liens ou des groupes

Trois boutons en haut de page créent :

  • un point de terminaison : une nouvelle section, avec son propre contenu ;
  • un lien : un raccourci vers une page de votre site ou d’un autre, comme votre politique de retour, votre FAQ ou votre page d’assistance ;
  • un groupe : un ensemble qui rassemble plusieurs sections, par exemple « Informations du compte » pour le compte, les adresses et les moyens de paiement.
Menu de la page Mon compte personnalisé avec icônes et un groupe Information de compte qui rassemble le compte, les adresses et les modes de paiement
Un menu avec icônes et un groupe « Information de compte ».

Les bannières

La section Bannières ajoute des blocs visuels cliquables qui mènent aux parties importantes du compte, avec éventuellement un compteur (nombre de commandes, de points…). Comme les points de terminaison, chaque bannière peut être réservée à certains rôles et pointer vers une section du compte ou une autre page.

Page Mon compte avec un menu latéral et des bannières illustrées vers les téléchargements, les commandes, la liste de souhaits, les cartes cadeaux et les points
Des bannières qui donnent un accès rapide aux principales parties du compte.

Le style

Dans Paramètres, puis Style, vous choisissez la position du menu (à gauche, à droite ou à l’horizontale), sa disposition et ses couleurs. L’extension permet aussi aux clients de téléverser leur photo de profil.

Attention : la version gratuite n’est plus proposée sur WordPress.org. L’extension est vendue sur le site de YITH, avec un an de mises à jour et d’assistance.

Méthode 3 : quelques lignes de code

Pour renommer, retirer ou réordonner des onglets, un seul filtre suffit. Ajoutez ce code dans le fichier functions.php de votre thème enfant, ou avec l’extension Code Snippets :

add_filter( 'woocommerce_account_menu_items', 'wycan_onglets_mon_compte' );
function wycan_onglets_mon_compte( $items ) {
    unset( $items['downloads'] );
    $items['orders'] = 'Mes commandes';
    return $items;
}

Ici, l’onglet Téléchargements disparaît et Commandes devient « Mes commandes ». Pour ajouter un onglet « Aide et retours » juste avant la déconnexion :

add_filter( 'woocommerce_get_query_vars', function ( $vars ) {
    $vars['aide'] = 'aide';
    return $vars;
} );

add_filter( 'woocommerce_account_menu_items', function ( $items ) {
    $deconnexion = $items['customer-logout'] ?? null;
    unset( $items['customer-logout'] );
    $items['aide'] = 'Aide et retours';
    if ( $deconnexion ) {
        $items['customer-logout'] = $deconnexion;
    }
    return $items;
} );

add_action( 'woocommerce_account_aide_endpoint', function () {
    echo '<p>Une question sur une commande ? Écrivez-nous depuis la page contact.</p>';
} );

Après avoir ajouté un onglet, allez dans Réglages, puis Permaliens et cliquez sur « Enregistrer » : sans cela, la nouvelle adresse renvoie une erreur 404. Les adresses des onglets existants, elles, se modifient sans code dans WooCommerce, Réglages, Avancé.

En résumé

La page Mon compte est l’une des plus utilisées par vos clients réguliers. Qu’elle soit facile à utiliser et soignée change la perception de toute la boutique. Choisissez l’outil selon votre besoin : Elementor Pro pour le design, YITH pour réorganiser sans code, le PHP pour un résultat sur mesure et léger.

Voir la personnalisation de la page Mon compte en vidéo sur YouTube

Vous voulez un espace client qui colle à votre façon de vendre : suivi de commande, documents, fidélité ? On conçoit des boutiques WooCommerce sur mesure, ou parlons de votre boutique.

Sommaire
À lire aussi

D’autres articles qui peuvent vous servir

Facturation électronique WooCommerce : comment mettre votre boutique en conformité

Facturation électronique WooCommerce : comment mettre votre boutique en conformité

Lire l’article →
Cookies et consentement : pourquoi une simple bannière ne suffit plus

Cookies et consentement : pourquoi une simple bannière ne suffit plus

Lire l’article →
Bouton de rétractation WooCommerce : le guide pour se conformer à l’article L221-21

Bouton de rétractation WooCommerce : le guide pour se conformer à l’article L221-21

Lire l’article →

Un projet, une question ?

Devis gratuit · Acompte remboursable · Solde si satisfait · Sans engagement