Comment modifier la page Mon compte WooCommerce par programmation
Publié: 2020-12-22Vous souhaitez personnaliser la page Mon compte de votre boutique ? Vous êtes arrivé au bon endroit. Dans ce guide, nous vous montrerons comment modifier la page Mon compte WooCommerce par programmation pour vous aider à améliorer votre expérience client.
Qu'est-ce que la page Mon compte ?
Par défaut, les magasins WooCommerce incluent une page Mon compte où les utilisateurs peuvent consulter leurs commandes et où vous stockez des informations sur les informations personnelles, la facturation et l'adresse de livraison de vos clients. La page Mon compte par défaut est une page WordPress qui contient un shortcode WooCommerce.
[ woocommerce_my_account ]
Même si cette page prête à l'emploi contient toutes les informations de base dont vos utilisateurs ont besoin pour gérer leurs commandes et leurs paramètres, la modification de la page Mon compte peut vous aider à vous démarquer de vos concurrents et à offrir une meilleure expérience utilisateur.
Pourquoi personnaliser la page Mon compte dans WooCommerce ?
Ce n'est un secret pour personne que fournir une excellente UX est la clé du succès de toute boutique de commerce électronique. Les utilisateurs achètent en ligne parce que c'est rapide et confortable, vous devez donc vous assurer que votre magasin leur fournit les outils dont ils ont besoin pour vivre une expérience incroyable.
La plupart des propriétaires de magasins concentrent leur attention sur la personnalisation de la page du produit et du paiement, mais oublient la page Mon compte. Comme il s'agit d'une page conçue pour vos utilisateurs enregistrés, sa personnalisation peut vous aider à améliorer leur expérience sur votre site . De plus, cela peut vous aider à les faire revenir dans votre magasin et à augmenter vos ventes . Par exemple, vous pouvez créer une section spéciale où vous leur montrez des offres et des promotions personnalisées.
Nous avons déjà analysé les meilleurs plugins pour personnaliser la page Mon compte. Cependant, si vous ne souhaitez pas installer d'outils tiers et que vous avez des compétences en codage, nous avons quelque chose pour vous. Dans ce guide, nous allons vous montrer comment modifier la page Mon compte WooCommerce par programmation .
Comment modifier la page Mon compte WooCommerce par programmation
Il existe deux techniques différentes pour modifier la page Mon compte dans WooCommerce :
- Vous pouvez remplacer les fichiers de modèle WooCommerce par défaut
- Utilisez des crochets WooCommerce
Quelle méthode est la meilleure? Chacune de ces options est plus appropriée pour différents cas. En règle générale, vous devriez essayer d'utiliser des crochets au lieu d'écraser les fichiers de modèle lorsque cela est possible. C'est l'une des meilleures pratiques recommandées par WordPress lors de la personnalisation de votre site.
Toutefois, si vous souhaitez effectuer des tâches plus complexes qui incluent des fonctions ou des objets, vous devrez peut-être modifier les fichiers de modèle. Dans ce guide, vous apprendrez à modifier la page Mon compte WooCommerce par programme en utilisant les deux méthodes. Comme vous pouvez l'imaginer, l'édition de fichiers modèles comporte plus de risques que l'utilisation de crochets, alors gardez cela à l'esprit avant de choisir l'option souhaitée.
1) Personnaliser la page Mon compte en remplaçant les fichiers modèles
REMARQUE : Comme cette méthode implique de remplacer les fichiers de modèle, nous vous recommandons de créer une sauvegarde complète de votre site avant de commencer. Si vous ne savez pas comment faire, consultez ce guide. Pour des informations plus détaillées sur la personnalisation des modèles WooCommerce, consultez cet article.
Le processus de remplacement des fichiers de modèle WooCommerce est similaire au remplacement de tout autre fichier dans votre thème enfant. Comme vous le savez, les thèmes enfants vous permettent de modifier votre thème sans perdre les personnalisations lorsque vous mettez à jour le thème. Il en va de même pour les plugins WooCommerce, donc si vous n'avez pas de thème enfant, vous pouvez en créer un ou utiliser n'importe lequel de ces plugins.
Tout d'abord, dans votre tableau de bord d'administration WordPress , accédez à Plugins > Editor . Ensuite, accédez au dossier des plugins, ouvrez WooCommerce et recherchez les fichiers de modèle. Pour cela, vous pouvez utiliser l'éditeur de fichier de plugin WordPress ou n'importe quel éditeur de code de votre choix. Sous le répertoire WooCommerce , ouvrez le fichier de modèles et recherchez le dossier myaccount .
plugins/woocommerce/templates/myaccount
Ouvrez le dossier /myaccount et vous trouverez tous les fichiers modèles utilisés par la page Mon compte. 
Ce sont les fichiers par défaut qui fonctionnent actuellement sur votre site Web. Pour écraser ces fichiers, vous devez créer un nouveau fichier portant le même nom dans votre thème enfant. Cependant, si vous créez un fichier vide, vous désactivez toutes les fonctionnalités du fichier d'origine. Donc, pour éviter de créer des problèmes sur votre site, vous devez copier le fichier par défaut et le coller dans votre dossier de thème.
Par exemple, supposons que vous souhaitiez copier le fichier dashboard.php à partir de l'installation de WooCommerce. Avant de le coller dans votre thème enfant, vous devez créer deux sous-répertoires imbriqués et les appeler /woocommerce et /myaccount . Après cela, collez-y le fichier dashboard.php : child_theme/woocommerce/myaccount/dashboard.php 
Ouvrez maintenant le fichier dashboard.php et apportez quelques petites modifications pour vous assurer qu'il fonctionne correctement. C'est ça! Vous venez d'apprendre à remplacer un fichier de modèle WooCommerce. C'est la première étape. Allons maintenant un peu plus loin et voyons comment personnaliser la page Mon compte.
Personnaliser le tableau de bord de la page Mon compte
Maintenant que vous savez comment remplacer les fichiers de modèle, voyons comment modifier la page Mon compte WooCommerce par programmation. Dans cette section, nous vous montrerons comment personnaliser le tableau de bord principal de la page Mon compte. À la fin de ce processus, votre page Mon compte ressemblera à ceci :
Nous avons ajouté une image d'en-tête et du texte en dessous. De plus, nous avons créé une liste avec des liens vers les sections que les utilisateurs visitent plus fréquemment, un pied de page et des liens vers des images afin que les clients puissent facilement vous contacter.
Scénario complet
Il s'agit du fichier dashboard.php final qui crée la capture d'écran ci-dessus.
si ( ! défini ( 'ABSPATH' ) ) {
sortir; // Quitter en cas d'accès direct.
}
$allowed_html = tableau(
'a' => tableau('href' => tableau(),)
);
?>
<h2>
<?php
printf(
/* traducteurs : 1 : nom d'affichage de l'utilisateur 2 : URL de déconnexion */
wp_kses( __( 'Hé %1$s, vous êtes de retour ! ', 'woocommerce' ), $allowed_html ),
'<fort>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* traducteurs : 1 : URL des commandes 2 : URL de l'adresse 3 : URL du compte. */
$dashboard_desc = __( 'Voici le tableau de bord principal de votre compte : ', 'woocommerce' );
si (wc_shipping_enabled()) {
/* traducteurs : 1 : URL des commandes 2 : URL des adresses 3 : URL du compte. */
$dashboard_desc = __( 'Voici le tableau de bord principal de votre compte :', 'woocommerce' );
}
printf(
wp_kses( $dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'commandes' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
$ul_list = __('<ul>
<li>Consultez vos <a href="%1$s">commandes récentes</a></li>
<li>Gérez vos <a href="%2$s">adresses de livraison et de facturation</a></li>
<li><a href="%3$s">Modifiez votre mot de passe et les détails de votre compte</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#lien pour envoyer un message WhatsApp"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#lien vers le profil facebook"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#lien vers le profil Twitter"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#lien pour envoyer un e-mail"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div>
<h4><i>Construit avec amour !</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Gérez votre profil et vos informations personnelles ici. Remplissez tous les champs afin que nous puissions vous connaître. Toutes les éditions effectuées dans votre compte seront immédiatement répercutées sur le site Web, afin que les autres utilisateurs puissent vous connaître et connaître vos besoins actuels sans délai</p>
<?php
echo $ul_list.$div_footer.$div_contact ;
Si vous regardez le code, vous verrez que tout le code original que nous avons copié à partir du modèle par défaut est toujours là. Nous venons de modifier certaines chaînes et de réorganiser les liens sous forme de liste. En plus de cela, nous avons utilisé des scripts supplémentaires pour ajouter plus de contenu à l'onglet. Pour mieux comprendre les changements que nous avons apportés, vous pouvez vérifier le fichier dashboard.php par défaut.
Ajout d'images
Pour afficher des images sur la page Mon compte, vous devez remplacer les URL des images. Il en va de même pour les liens d'image des icônes sociales.
Personnalisations CSS
Une autre façon de personnaliser la page Mon compte - et toute autre page - consiste à utiliser des scripts CSS. Voici le script CSS que nous avons utilisé pour styliser notre fichier dashboard.php personnalisé :
.woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
text-align:center;
}
.acc_contact{
rembourrage haut : 20 px ;
text-align:center;
}
.acc_contact > h3{
flotteur : gauche ;
}
.acc_images{
marge : automatique ;
largeur : 50 % ;
bloc de visualisation;
}
#Bienvenue{
marge : automatique ;
}
.acc_images img {
marge-gauche : 4 px ;
marge-droite : 4 px ;
affichage : bloc en ligne ;
largeur : 55 px ;
}
#acc_footer{
marge-haut : 15 px ;
couleur de fond : #202020 ;
aligner le texte : centrer ;
rayon de bordure : 15 px ;
}
#acc_footer > h4{
rembourrage haut : 20 px ;
couleur : RVB (235, 228, 228) ;
font-weight:gras;
}
#acc_footer > img{
marge : automatique ;
rembourrage en bas : 20 px ;
} Vous pouvez prendre ce code comme base, le coller sur le fichier style.css de votre thème enfant et le personnaliser à l'apparence de votre site.
2. Modifier la page Mon compte WooCommerce avec des crochets
La deuxième méthode pour modifier la page Mon compte par programme consiste à utiliser certains crochets WooCommerce. Pour cela, vous devrez avoir une compréhension de base du fonctionnement des crochets dans WooCommerce. Si vous n'êtes pas familier avec les crochets, nous vous recommandons de consulter ce guide.
A) Renommer les onglets
Ce script renommera l'onglet Adresse en Vos adresses .
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
function QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = 'Vos adresses';
retourner $éléments ;
}
B) Supprimer les onglets
Pour supprimer complètement n'importe quel onglet, utilisez la fonction unset() comme ceci :
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address', 9999 );
function QuadLayers_remove_acc_address( $items ) {
unset( $items['téléchargements'] );
retourner $éléments ;
}Dans le script ci-dessus, nous avons supprimé l'onglet Téléchargements . Vous pouvez trouver la liste complète des onglets slug dans le tableau $items , vous pouvez donc choisir celui que vous voulez.
$articles = tableau( 'tableau de bord' => __( 'tableau de bord', 'woocommerce' ), 'commandes' => __( 'Commandes', 'woocommerce' ), 'téléchargements' => __( 'Téléchargements', 'woocommerce' ), 'edit-address' => _n( 'Adresses', 'Adresse', (int) wc_shipping_enabled(), 'woocommerce' ), 'payment-methods' => __( 'Modes de paiement', 'woocommerce' ), 'edit-account' => __( 'Détails du compte', 'woocommerce' ), 'client-logout' => __( 'Déconnexion', 'woocommerce' ), );
C) Fusionner les onglets et le contenu
Une autre option pour personnaliser la page Mon compte consiste à fusionner les onglets . Par exemple, voyons comment supprimer l'onglet Adresses et déplacer son contenu vers l'onglet Compte .
// -----------------------------
// 1. Supprimer l'onglet Adresses
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
retourner $éléments ;
}
// -------------------------------
// 2. Insérer le contenu de l'onglet Adresses dans un onglet existant (edit-account dans ce cas)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
Maintenant, l'onglet Compte ressemblera à ceci : 
D) Ajouter un nouvel onglet avec un contenu personnalisé
Voyons maintenant comment ajouter du contenu à la page Mon compte . Dans cet exemple, nous allons ajouter un nouvel onglet appelé Support où les utilisateurs peuvent facilement consulter leurs tickets de support. Nous utiliserons deux codes courts fournis par un plugin tiers pour afficher du contenu intéressant, mais vous devriez pouvoir utiliser n'importe quel code court que vous souhaitez dans votre nouvel onglet.
Cependant, sachez que certains shortcodes peuvent ne pas fonctionner en raison d'incompatibilités avec WooCommerce. Pour ajouter un onglet Support avec un contenu personnalisé à la page Mon compte WooCommerce, collez le code suivant dans le fichier functions.php de votre thème enfant.
// 1. Enregistrez le nouveau point de terminaison
// Remarque : réenregistrez les permaliens ou cela donnera une erreur 404
fonction QuadLayers_add_support_endpoint() {
add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'QuadLayers_add_support_endpoint' );
// ------------------
// 2. Ajouter une nouvelle requête
fonction QuadLayers_support_query_vars( $vars ) {
$vars[] = 'supporte';
retourne $vars ;
}
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );
// ------------------
// 3. Insérez le nouveau point de terminaison
function QuadLayers_add_support_link_my_account( $items ) {
$items['support'] = 'Support ';
retourner $éléments ;
}
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Ajouter du contenu au nouveau point de terminaison
fonction QuadLayers_support_content() {
echo '<h3>Assistance</h3><p>Bienvenue dans la zone d'assistance. En tant que client premium, gérez vos tickets d'assistance à partir d'ici, vous pouvez soumettre un ticket si vous rencontrez des problèmes avec votre site Web. Nous ferons de notre mieux pour vous apporter une solution rapide et efficace</p>';
echo do_shortcode( '[tickets-shortcode]' );
echo do_shortcode( '[wpforms]' );
}
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );
Si vous obtenez une erreur de page 404 introuvable lorsque vous cliquez sur le nouvel onglet, ouvrez la page de permalien en accédant au tableau de bord WordPress > Paramètres > Permaliens et cliquez sur le bouton Enregistrer en bas.
Notez que le script est divisé en quatre sections. Chacun d'eux accomplit une tâche différente, vous utilisez donc les sections que vous souhaitez ajouter à votre boutique. Gardez également à l'esprit que dans la dernière section du script (4), vous pouvez remplacer le shortcode dans la fonction do_shortcode() . Ce sera le résultat final pour le nouvel onglet Support. 
Conclusion
Dans l'ensemble, la page Mon compte par défaut contient les informations de base dont les utilisateurs ont besoin, mais elle est assez basique. Donc, si vous souhaitez améliorer l'expérience utilisateur sur votre boutique, vous devez personnaliser la page Mon compte. Cela vous aidera non seulement à améliorer une section très importante de votre magasin, mais aussi à augmenter vos ventes.
Il existe plusieurs plugins pour personnaliser la page Mon compte. Cependant, si vous ne souhaitez plus installer de plug-ins et que vous avez des compétences en matière de codage, vous pouvez modifier la page Mon compte WooCommerce par programmation. Pour cela, il y a deux options :
- Remplacer les fichiers de modèle
- Utiliser les crochets WooCommerce
Les deux méthodes feront le travail, mais en règle générale, nous vous recommandons d'utiliser des crochets lorsque cela est possible. C'est moins risqué et c'est l'une des meilleures pratiques recommandées par WordPress. Dans ce guide, nous avons vu plusieurs exemples de choses que vous pouvez faire en utilisant les deux méthodes. Nous vous recommandons de prendre ces scripts comme guide, de les utiliser pour trouver des idées et de jouer pour tirer le meilleur parti de la page Mon compte de votre boutique.
Enfin, pour plus de guides pour tirer le meilleur parti de la page Mon compte, consultez ces guides :
- Comment personnaliser WooCommerce Mon compte avec et sans plugins
- Meilleurs plugins pour personnaliser la page Mon compte WooCommerce
Quels changements avez-vous apportés à votre page Mon compte ? Avez-vous eu des problèmes en suivant notre tutoriel? Faites-nous savoir dans la section commentaires ci-dessous!