Comment personnaliser la page de mon compte dans WooCommerce (plugins et programmation)

Vous cherchez des moyens simples de modifier et de personnaliser votre page Mon compte ? Dans ce guide, vous apprendrez à personnaliser la page Mon compte WooCommerce à la fois par programmation et avec des plugins pour faire passer votre boutique au niveau supérieur.

La création d'une page Mon compte peut être cruciale pour toute boutique en ligne. Cette page est généralement ignorée par la plupart des propriétaires de magasins, mais elle peut vous aider à vous démarquer de vos concurrents et à offrir à vos clients une bien meilleure expérience client. Avant de vous lancer dans la modification, examinons de plus près pourquoi il est si important de personnaliser votre page Mon compte WooCommerce.

Qu'est-ce que ma page de compte et pourquoi devriez-vous la personnaliser ?

La page Mon compte de WooCommerce est l'endroit où les propriétaires de magasins conservent des informations sur les informations personnelles, la facturation et l'adresse de livraison des clients. De plus, c'est là que les utilisateurs peuvent vérifier leurs commandes. La page Mon compte par défaut est une simple page WordPress qui contient un shortcode WooCommerce.

 [ woocommerce_my_account ]

Cette page par défaut contient toutes les informations de base dont les utilisateurs ont besoin, mais vous pouvez en tirer le meilleur parti à moins de personnaliser la page Mon compte. Vous pouvez utiliser cette page à diverses fins. En plus de donner à vos clients des informations sur leurs commandes, vous pouvez configurer des coupons et des codes de réduction et les y afficher, ou même leur fournir des alertes exclusives, des offres de réduction et des alertes de vente.

La page Mon compte ouvre des tonnes d'opportunités d'interaction supplémentaire avec vos clients tout en améliorant leurs expériences d'achat. Par exemple, vous pouvez laisser les acheteurs enregistrer les détails de paiement, les adresses de livraison et les détails supplémentaires du compte et les intégrer au processus de paiement.

De même, vous pouvez leur fournir une liste des téléchargements et des produits virtuels qu'ils ont apportés directement sur leur page Mon compte et même leur permettre d'ouvrir des tickets d'assistance premium et de les contacter directement depuis leur page Mon compte.

Si vous utilisez une page WooCommerce et que vous souhaitez la rendre aussi pratique que possible pour vos clients, vous devez absolument personnaliser votre page Mon compte dans WooCommerce.

Comment personnaliser la page Mon compte dans WooCommerce

Il existe deux façons de modifier la page Mon compte :

1. Avec des plugins
2. Par programmation

Dans ce guide, nous décrirons les deux méthodes afin que vous puissiez choisir celle qui vous convient le mieux.

1) Modifier la page Mon compte avec des plugins

Il existe plusieurs plugins pour modifier la page Mon compte. Pour vous faciliter la vie, nous allons jeter un œil à notre sélection des meilleurs outils. Ces plugins sont livrés avec toute la personnalisation dont vous avez besoin pour rendre votre page Mon compte WooCommerce unique, confortable et conviviale. Si vous n'avez pas de compétences en codage, l'utilisation de plugins est la solution.

Vous pouvez modifier les onglets de la page Mon compte, en créer de nouveaux et même personnaliser son apparence à l'aide de personnalisateurs dédiés et de tonnes d'options de personnalisation. Sans plus tarder, voici notre recommandation personnelle de plugins que vous pouvez utiliser pour personnaliser votre page Mon compte dans WooCommerce.

1) StoreCustomizer

StoreCustomizer est un plugin WordPress gratuit qui peut vous aider à personnaliser toutes vos pages WooCommerce. Cela comprend tout, de l'ajout d'articles à vos menus à la gestion de votre boutique, de vos produits, de vos pages de paiement et même de votre compte Mon compte. Vous pouvez librement le renommer, supprimer des onglets et différentes options pour modifier le style de votre page Mon compte de 2 manières différentes.

Une grande chose à propos de StoreCustomizer est qu'il ne nécessite aucune modification de vos modèles de thème ni même la configuration de crochets WooCommerce. Le plugin est extrêmement léger et convivial. De plus, avec la version premium, vous avez accès à plus d'options pour personnaliser votre page Mon compte, telles que l'ajout d'onglets personnalisés et la modification du contenu des onglets à l'aide des éditeurs Gutenberg en tant que plug-in de création de page.

Principales caractéristiques

• Un plugin convivial qui personnalise les pages WooCommerce sans modifier vos fichiers de thème.
• Entièrement intégré à WordPress Live Customizer.
• Permet de renommer et de supprimer les onglets Mon compte ainsi que de modifier le style des onglets.
• La version Premium permet une personnalisation complète de l'onglet Mon compte ainsi que l'ajout d'onglets personnalisés.

Prix

Il s'agit d'un plugin freemium. Il a une version gratuite avec des fonctionnalités de base et quatre plans premium qui commencent à 29 USD par an.

2) Booster

Booster est la réponse complète à la personnalisation des pages WooCommerce sans aucun besoin de codage. Ce plugin est livré avec une large gamme de modules pour vous aider à modifier diverses fonctionnalités et pages WooCommerce. Cela inclut également la page Mon compte. Vous pouvez facilement modifier les points de terminaison des onglets afin que cliquer sur les onglets vous amène à n'importe quelle page que vous spécifiez.

De plus, vous pouvez ajouter des pages personnalisées et même personnaliser des pages et des onglets spécifiques. Par exemple, vous pouvez personnaliser les messages du tableau de bord et même permettre à vos clients de modifier manuellement le statut de la commande à partir de leur onglet commandes. Si vous recherchez une solution complète pour personnaliser votre page Mon compte, Booster est définitivement une excellente réponse.

Principales caractéristiques

• Plugin tout-en-un pour personnaliser les pages, les fonctions et les modèles WooCommerce.
• Personnalisation du point de terminaison de l'onglet pour les pages Mon compte.
• Fournit des options pour la personnalisation des onglets du tableau de bord.
• Ajoutez des onglets personnalisés et renommez, stylisez et réorganisez les onglets Mon compte.

Prix

Booster a une version gratuite avec des fonctionnalités limitées et quatre plans premium qui commencent à 99,99 USD par an.

3) Personnaliser mon compte pour WooCommerce

Personnaliser mon compte pour WooCommerce est une option premium pour personnaliser et personnaliser votre page Mon compte comme vous le souhaitez. Avec cet outil, vous pouvez modifier et ajouter autant de points de terminaison que vous le souhaitez. Vous pouvez renommer, réorganiser et personnaliser tous vos onglets à l'aide du personnalisateur en direct. En plus de cela, vous pouvez librement modifier les étiquettes des onglets, ajouter des icônes et même inclure du contenu personnalisé dans vos onglets sans aucun besoin de codage.

De plus, ce plugin comprend de puissantes options d'édition ainsi que le personnalisateur en direct pour personnaliser votre page Mon compte. Vous pouvez modifier la taille et les couleurs de la police, les images d'arrière-plan, les couleurs, le rembourrage et la marge. Vous pouvez également ajouter votre propre code CSS personnalisé pour amener la personnalisation à un tout autre niveau.

Principales caractéristiques

• Facile à utiliser et entièrement intégré au personnalisateur en direct.
• Personnalisation complète de tous les onglets et terminaux sous la page Mon compte.
• Options pour modifier les étiquettes des onglets, ajouter du contenu personnalisé, des images et des icônes d'onglet.
• Prend en charge le code CSS personnalisé pour une personnalisation supplémentaire.

Prix

Personnaliser mon compte pour WooCommerce est un plugin premium qui vous coûtera 49 USD par an.

Personnalisation de la page Mon compte à l'aide de WooCommerce StoreCustomizer

Voyons maintenant comment utiliser StoreCustomizer pour personnaliser votre page Mon compte WooCommerce. La version gratuite vous permet de modifier les noms des onglets ou de changer le style des onglets tandis que pour ajouter de nouveaux onglets, vous aurez besoin du plan pro. Même si vous choisissez un plugin différent, cette section vous aidera à avoir une meilleure idée de la façon d'utiliser le plugin pour personnaliser votre page Mon compte.

Tout d'abord, installons le plugin StoreCustomizer . Ouvrez votre tableau de bord d'administration WordPress et accédez à Plugins > Ajouter un nouveau. Ensuite, utilisez la barre de recherche en haut à droite pour rechercher StoreCustomize r. Cliquez sur Installer puis sur Activer . Maintenant, le plugin doit être activé et installé.

Pour commencer à personnaliser votre page Mon compte, accédez à WooCommerce > StoreCustomizer .

Cela ouvrira l'interface du plugin et vous fournira toutes les options de personnalisation offertes par le plugin. Comme nous allons personnaliser la page Mon compte, cliquez sur le bouton Personnaliser vos paramètres en bas de la page.

Utilisation de StoreCustomizer

Cela devrait ouvrir une fenêtre Live Customizer et vous devriez pouvoir voir un onglet Store Customizer dans le menu. Cliquez dessus, puis accédez à l'onglet Page de compte en dessous.

Commençons maintenant à modifier la page Mon compte. Commençons par modifier les options de style des onglets. Cliquez sur l'option Conception de l'onglet Compte et changez-la en Style horizontal ou Style d'onglet latéral.

Nous pouvons également choisir de supprimer des onglets ou de les renommer , alors renommons l'onglet Adresses en Adresse de livraison et supprimons l'onglet Téléchargements.

Renommer les onglets de la page Mon compte à l'aide de Store Customizer

Pour renommer, accédez à l'onglet que vous souhaitez renommer et cliquez sur Modifier le texte de l'onglet . Ensuite, entrez simplement le nouveau texte d'onglet que vous souhaitez dans le champ Titre de l'onglet, et il devrait apparaître dans la fenêtre de personnalisation en direct de droite. Vous pouvez également choisir de modifier le titre de la page qui s'affiche lorsque vous cliquez sur Tab. Changez simplement le texte sous le titre de la page, et cela devrait le faire.

Suppression des onglets de la page Mon compte à l'aide de Store Customizer

Pour supprimer un onglet, cliquez simplement sur le bouton Supprimer l'onglet sous l'onglet que vous souhaitez masquer. Par exemple, si vous souhaitez supprimer l'onglet Téléchargements, sélectionnez simplement l'option Supprimer l'onglet en dessous.

N'oubliez pas que vous pouvez réinitialiser n'importe lequel de vos changements d'onglet à tout moment. En cliquant sur l'icône de réinitialisation sous les onglets, vous pouvez rétablir les onglets Mon compte par défaut.

Maintenant, nous vous recommandons de personnaliser autant que vous le souhaitez les onglets de votre page Mon compte WooCommerce et de modifier vos onglets. Cependant, si vous souhaitez ajouter de nouveaux onglets et points de terminaison, vous devrez acheter la version premium de StoreCustomizer . Le processus d'ajout de nouveaux onglets est identique et vous pouvez simplement ouvrir l'écran de personnalisation pour le faire.

Vous pouvez également vous référer à la documentation du plugin pour tirer le meilleur parti du plugin et de toute sa gamme de personnalisations WooCommerce. Une fois que vous avez terminé de personnaliser votre page Mon compte, n'oubliez pas de cliquer sur Publier en haut de l'écran de personnalisation pour enregistrer vos modifications.

Bien que l'option de personnalisation de votre page Mon compte à l'aide d'un plug-in soit plus simple et plus simple, la plupart des plug-ins coûtent une somme d'argent importante pour vous fournir un large éventail de fonctionnalités. Donc, si vous voulez tirer le meilleur parti de votre page Mon compte mais que votre budget est limité, coder votre propre solution est une excellente alternative.

Voyons comment vous pouvez personnaliser votre page Mon compte WooCommerce par programmation .

2) Personnalisez la page Mon compte dans WooCommerce par programmation

Si vous avez des compétences en codage, vous pouvez également personnaliser la page Mon compte par programme en modifiant les fichiers de modèle WooCommerce ou en utilisant des hooks WooCommerce . Avant de commencer, nous vous recommandons fortement de créer un thème enfant ou d'utiliser l'un de ces plugins et de générer une sauvegarde complète de votre installation WordPress.

Pour notre démonstration, nous vous montrerons comment personnaliser votre page Mon compte par programmation à l'aide de crochets WooCommerce. Cela ne nécessite pas de modifier vos fichiers de modèle, il y a donc moins de chances de casser quelque chose.

Cependant, si vous souhaitez plus d'options pour personnaliser votre page Mon compte avec un peu de codage, consultez notre guide complet sur la façon de modifier la page Mon compte par programmation. Pour plus d'informations sur la personnalisation des modèles, consultez ce didacticiel.

Personnalisation de la page Mon compte dans WooCommerce à l'aide de crochets WooCommerce

Si vous n'êtes pas familier avec les hooks WooCommerce, nous vous recommandons de consulter notre guide sur les hooks WooCommerce pour mieux comprendre leur fonctionnement. Après cela, suivez simplement les étapes suivantes pour personnaliser et apporter des modifications à vos pages Mon compte.

Pour commencer le processus, dans votre tableau de bord d'administration WordPress , accédez à Apparence > Éditeur de thème pour ouvrez votre éditeur de thème .

Ensuite, accédez au fichier functions.php dans la liste des fichiers de thème dans la barre latérale droite. Maintenant, à l'aide de l'éditeur, vous pouvez ajouter vos fonctions personnalisées au fichier de fonctions de votre thème enfant.

Renommer les onglets à l'aide des crochets WooCommerce

Pour renommer un onglet à l'aide des hooks WooCommerce, ajoutez le script suivant à votre fichier functions.php . Ce script renommera votre onglet Adresses en Vos adresses , mais vous pouvez modifier le script et utiliser le nom de votre choix.

 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 ;
} 

Enregistrez ensuite les modifications et vérifiez l'interface pour voir les modifications.

Vous pouvez également modifier ce script et changer n'importe lequel des noms de vos onglets. Pour ce faire, changez simplement le nom du tableau $items . Vous pouvez consulter la liste complète des slugs disponibles pour le tableau $items ici.

 $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' ),
);

Par exemple, si vous souhaitez renommer l' onglet Orders en Your Orders , vous pouvez modifier la 3ème ligne du script en $items['orders'] = 'Your Orders'. Vous devez également changer le nom du filtre en QuadLayers_rename_orders_tab afin que votre nouvelle fonction ne porte pas le même nom que celle ci-dessus. Ainsi, avec ces modifications, votre nouveau script sera :

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999 );
function QuadLayers_rename_orders_tab( $items ) {
$items['orders'] = 'Vos commandes';
retourner $éléments ;
}

De cette façon, vous pouvez éditer le fichier functions.php et renommer tous vos onglets. Une fois que vous êtes satisfait des modifications, cliquez sur Mettre à jour le fichier et vous êtes prêt à partir.

Suppression d'onglets à l'aide de crochets WooCommerce

En plus de renommer les onglets, vous pouvez également supprimer des onglets sur votre page Mon compte en utilisant la fonction unset() avec le tableau $items. Par exemple, pour supprimer l'onglet Détails du compte , vous devez utiliser le script suivant.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-account']);
retourner $éléments ;
} 

Enregistrez les modifications, puis vérifiez l'interface. Vous verrez que l'onglet Détails du compte n'est pas là.

En utilisant le même script, vous pouvez l'ajuster et supprimer n'importe quel onglet que vous voulez. Par exemple, si vous souhaitez masquer l'onglet des téléchargements, vous devez modifier le nom de la fonction et le tableau des éléments de $items['edit-account'] à $items['downloads']. Alors maintenant, votre nouveau script sera quelque chose comme ça.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_download', 9999 );
function QuadLayers_remove_downloads( $items ) {
unset( $items['téléchargements'] );
retourner $éléments ;
}

Ensuite, cliquez sur Mettre à jour le fichier pour appliquer les modifications. Ce ne sont là que quelques-unes des choses que vous pouvez faire pour personnaliser la page Mon compte dans WooCommerce, mais vous n'êtes pas limité à la suppression et au renommage. Vous pouvez également fusionner des onglets, créer des onglets personnalisés et bien plus encore. Pour apprendre à tirer le meilleur parti de votre page Mon compte par programmation, nous vous recommandons vivement de suivre notre guide étape par étape.

Conclusion

Et cela conclut notre guide sur la personnalisation de la page Mon compte WooCommerce . Cela vous aidera à améliorer votre expérience client et à vous démarquer de vos concurrents.

Quant à notre recommandation sur la méthode à utiliser pour modifier la page Mon compte, cela dépend de vos besoins et de vos compétences. Si vous n'avez pas de compétences en codage ou si vous ne souhaitez pas modifier les fichiers de modèle de votre thème, les plugins sont votre meilleure option. Cette alternative est plus pratique et adaptée aux débutants. De plus, vous vous assurez de ne rien casser dans votre installation WordPress en utilisant des fonctions et des modèles personnalisés.

Dans cet article, nous vous avons montré quelques-uns des 3 meilleurs plugins pour modifier la page Mon compte. Si vous voulez jeter un œil à d'autres options, consultez cet article. D'autre part, si vous savez coder et souhaitez une flexibilité totale, vous pouvez personnaliser la page Mon compte par programmation. Pour cela, vous pouvez remplacer les fichiers de modèle WooCommerce par défaut ou utiliser des hooks WooCommerce.

Dans ce guide, nous vous avons montré comment utiliser les crochets, mais si vous souhaitez plus d'informations sur la façon de personnaliser la page Mon compte avec des scripts personnalisés, nous vous recommandons vivement de consulter ce didacticiel.

• Comment personnaliser la page de la boutique dans WooCommerce
• Personnalisez le bouton Ajouter au panier dans WooCommerce
• Comment modifier le paiement WooCommerce (codage et plugins)
• Comment personnaliser la page produit WooCommerce dans Divi

Enfin, quelle que soit la méthode que vous choisissez, faites-nous savoir dans les commentaires si vous rencontrez des problèmes pour configurer votre page Mon compte.