Modificateur de commentaire WooCommerce ma page de compte programme

Quelle est la page de mon compte ?

[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 paramètres, l’édition de la page de mon compte peut vous aider à vous démarquer de vos concurrents et à offrir une meilleure expérience utilisateur.

Pourquoi personnaliser la page de mon compte

Ce n’est un secret pour personne qui fournit une grande UX est la clé du succès de tout magasin de commerce électronique. Les utilisateurs achètent en ligne car il est rapide et confortable, vous devez donc vous assurer que votre magasin leur offre 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 de la caisse, mais oublient la page de mon compte. Comme il s’agit d’une page conçue pour vos utilisateurs enregistrés, la personnalisation peut vous aider améliorer leur expérience sur votre site. De plus, cela peut vous aider à les faire revenir

Nous avons déjà analysé les meilleurs plugins pour personnaliser la page mon compte. Cependant, si vous ne voulez pas installer d’outils tiers et que vous avez des compétences de codage, nous avons quelque chose pour vous.

Comment modifier la page WooCommerce ma page de compte programmatiquement

Il existe deux techniques différentes pour modifier la page de mon compte

1. Vous pouvez remplacer les fichiers du modèle WooCommerce
2. Utilisez les 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 devez 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 que WordPress recommande lors de la personnalisation de votre site.

Cependant, 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.

1) Personnaliser les fichiers de modèle de modèle de maîtrise de ma page de compte

NOTE: Comme cette méthode implique de remplacer les fichiers de modèles, nous vous recommandons de créer une sauvegarde complète de votre site avant de commencer. Si vous ne savez pas comment le faire, consultez ce guide. Pour des informations plus détaillées sur la façon de personnaliser les modèles WooCommerce, consultez cet article.

Le processus pour remplacer les fichiers du modèle WooCommerce est similaire au remplacement de tout autre fichier

Tout d’abord,

plugins/woocommerce/templates/myaccount

Ouvrir le dossier /myaccount et vous trouverez tous les fichiers de modèle utilisés

Ce sont les fichiers

Open maintenant le tableau de bord.php__HTML_TAG_147___ Déposer et apporter quelques petites modifications pour vous assurer qu’elle fonctionne correctement. C’c’est ça ! Vous venez d’apprendre à remplacer un fichier de modèle WooCommerce. C’est la première étape. Maintenant, allons plus loin et voyons comment personnaliser la page mon compte.

Personnalisez le tableau de bord de ma page de compte

Maintenant que vous savez comment remplacer les fichiers de modèles, voyons comment modifier la page WooCommerce mon compte

Nous avons ajouté une image de cap 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 d’image afin que les clients puissent facilement vous contacter.

Script terminé

C’estla finale dashboard.php Fichier qui crée la capture d’écran ci-dessus.

if ( ! défini( 'ABSPATH' ) ) {
sortir; // Quitte si on y accède directement.
}
$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, tu es de retour ! ', 'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img id="bienvenue" 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 = __( 'Ceci est 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>Affichez votre <a href="https://quadlayers.com/edit-woocommerce-my-account-page-programmatically/%1$s">recent commandes</a></li>
<li>Gérez votre <a href="https://quadlayers.com/edit-woocommerce-my-account-page-programmatically/%2$s">expédition et facturation adresses</a></li>
<li><a href="https://quadlayers.com/edit-woocommerce-my-account-page-programmatically/%3$s">Modifiez votre mot de passe et votre compte détails</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#lien pour envoyer un message WhatsApp"><img src="https://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#lien vers le profil Facebook"><img src="https://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#lien vers le profil Twitter"><img src="https://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#lien pour envoyer un e-mail"><img src="https://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div id="acc_footer">
<h4><i>Construit avec amour !</i></h4>
<img src="https://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Gérez le profil et les informations personnelles ici. Remplissez tous les champs pour que nous puissions vous connaître. Toutes les éditions effectuées 
<?php
echo $ul_list.$div_footer.$div_contact;

Si vous jetez un œil au code, vous verrez que tout le code d’origine que nous avons copié à partir du modèle

Ajout d’images

Pour afficher des images sur la page de mon compte, vous devez remplacer les URL des images. Il en va de même pour les liens d’image des icônes sociales.

Personnages CSS

Une autre façon de personnaliser la page My Compte – et toute autre page – consiste à utiliser les scripts CSS. Ceci est le script CSS que nous avons utilisé pour styliser notre personnalité tableau de bord.php déposer:

.woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
texte-align:centre;
}
.acc_contact{
rembourrage supérieur : 20 px ;
texte-align:centre;
}
.acc_contact > h3{
flotteur : gauche ;
}
.acc_images{
marge:auto;
largeur : 50 % ;
affichage : bloc ;
}
#bienvenue{
marge:auto;
}
.acc_images img {
marge gauche : 4 px ;
marge droite : 4px ;
display:bloc en ligne ;
largeur : 55 px ;
}
#acc_footer{
marge supérieure : 15 px ;
couleur d'arrière-plan : #202020 ;
alignement du texte : centre ;
rayon de bordure : 15 px ;
}
#acc_footer > h4{
rembourrage supérieur : 20 px ;
couleur : RVB (235, 228, 228) ;
poids de la police : gras ;
}
#acc_footer > img{
marge:auto;
rembourrage inférieur : 20 px ;
}

Vous pouvez prendre ce code comme base, coller sur le style.css Fichier du thème de votre enfant et personnalisez-le à l’apparence de votre site.

2. Modifier WooCommerce ma page de compte avec des crochets

La deuxième méthode pour modifier la page de compte mon compte

A) Renommer les onglets

Ce script renommera l’onglet Adresse à Vos adresses.

add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
fonction 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 le unset () fonction comme ceci:

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

$items = 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' ),
'modes de paiement' => __( 'Modes de paiement', 'woocommerce' ),
'edit-account' => __( 'Détails du compte', 'woocommerce' ),
'client-logout' => __( 'Logout', 'woocommerce' ),
);

C) Fusion des onglets et du contenu

Une autre option pour personnaliser la page de mon compte est de Onglets de fusion.

//-----------------------------
// 1. Supprimez l'onglet Adresses
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
fonction QuadLayers_remove_acc_tab( $items ) {
unset ($ items ['edit-address']);
retourner $éléments ;
}
// -------------------------------
// 2. Insérez le contenu de l'onglet Adresses 
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

Maintenant, l’onglet Compte ressemblea à ceci :

D) Ajouter un nouvel onglet avec du contenu personnalisé

Maintenant, voyons comment Ajouter du contenu à la page mon compte mon compte.

Cependant, sachez que certains shortcodes peuvent ne pas fonctionner en raison d’incompatibilités avec WooCommerce. Pour ajouter un onglet de support avec du contenu personnalisé à la page WooCommerce mon compte, collez le code suivant

// 1. Enregistrez un 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[] = 'support';
    renvoie $vars ;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Insérez le nouveau point de terminaison 
fonction 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>Support</h3><p>Bienvenue 
echo do_shortcode( '[tickets-shortcode]' );
echo do_shortcode( '[wpforms id="1082"]' );
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Si vous obtenez une erreur de 404 pages non trouvée lorsque vous cliquez sur le nouvel onglet, ouvrez la page du permalien en allant au Tableau de bord WordPress> Paramètres> Permaliens et cliquez sur le Sauvegarder bouton 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 magasin. Gardez également à l’esprit que

Conclusion

Il existe plusieurs plugins pour personnaliser la page de mon compte. Cependant, si vous ne souhaitez pas installer plus de plugins et que vous avez des compétences de codage, vous pouvez modifier la page WooCommerce en page de compte

• Remplacer les fichiers de modèle
• Utilisez les crochets WooCommerce

LesDeux 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 que WordPress recommande.

Enfin, pour plus de guides pour tirer le meilleur parti de la page de mon compte, jetez un œil à ces guides:

• Comment personnaliser WooCommerce mon compte avec et sans plugins
• Meilleurs plugins pour personnaliser WooCommerce ma page de compte

Quelles modifications avez-vous apportées à votre page de compte ? Avez-vous eu des problèmes après notre tutoriel ? Faites-nous savoir