Souhaitez-vous personnaliser la page « Mon compte » dans votre boutique? Vous êtes au bon endroit. Dans ce guide, nous allons vous montrer Voici 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 contiennent un Ma page de compte Ici, les utilisateurs peuvent consulter leurs commandes et enregistrer des informations sur les données personnelles, la facturation et l’adresse de livraison de leurs clients. Le standard Ma page de compte est un site WordPress qui comprend un Shortcode WooCommerce.

[woocommerce_my_account]

Bien que cette page prête à l’emploi contienne toutes les informations de base dont vos utilisateurs ont besoin pour gérer leurs commandes et leurs préférences, la modification de la page Mon compte vous permet de vous démarquer de vos concurrents et d’offrir une meilleure expérience utilisateur.

Pourquoi modifier la page « Mon compte » dans WooCommerce?

Ce n’est un secret pour personne que fournir une excellente expérience utilisateur est la clé du succès d’un magasin de commerce électronique. Les utilisateurs achètent en ligne car c’est rapide et pratique. Vous devez donc vous assurer que votre entreprise leur fournit les outils dont ils ont besoin pour vivre une expérience incroyable.

La plupart des commerçants concentrent leur attention sur Personnalisez la page produit et Vérifier Cependant, oubliez la page Mon compte. Puisqu’il s’agit d’une page pour vos utilisateurs enregistrés, sa personnalisation peut vous aider améliorez votre expérience sur votre site Web. De plus, cela peut également vous aider à les réintégrer dans votre entreprise Augmentez vos ventes. Par exemple, vous pouvez créer une zone spéciale où vous pouvez leur montrer des offres et promotions personnalisées.

Nous avons déjà analysé que 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 programmation, nous avons quelque chose pour vous. Dans ce guide, nous allons vous montrer Voici comment modifier la page Mon compte WooCommerce par programmation.

Voici comment modifier la page Mon compte WooCommerce par programmation

Il existe deux techniques différentes pour modifier la page « Mon compte » dans WooCommerce:

  1. Vous pouvez remplacer les fichiers de modèle WooCommerce par défaut
  2. Utilisez certains Crochet WooCommerce

Quelle méthode est la meilleure? Chacune de ces options est mieux adaptée à différents cas. En règle générale, vous devriez essayer d’utiliser des hooks au lieu d’écraser les fichiers de modèle chaque fois que possible. C’est l’une des meilleures pratiques recommandées par WordPress lors de la personnalisation de votre site Web.

Toutefois, si vous souhaitez effectuer des tâches plus complexes impliquant des fonctions ou des objets, vous devrez peut-être modifier les fichiers de modèle. Dans ce guide, vous apprendrez Voici comment modifier la page Mon compte WooCommerce par programmation avec les deux méthodes. Comme vous pouvez l’imaginer, modifier des fichiers de modèle est plus risqué que d’utiliser des hooks. Gardez cela à l’esprit avant de choisir l’option que vous souhaitez.

1) Personnalisez les fichiers de modèle de la page Mon compte

REMARQUE: Étant donné que cette méthode écrasera les fichiers de modèle, nous vous recommandons de faire une sauvegarde complète de votre site avant de commencer. Si vous ne savez pas comment faire, vérifiez ceci ces instructions.

L’écrasement des fichiers de modèle WooCommerce est similaire à l’écrasement d’autres fichiers dans votre thème enfant. Comme vous le savez, les sujets enfants vous permettent de modifier votre sujet sans perdre les personnalisations lorsque vous mettez à jour le sujet. La même chose s’applique aux plugins WooCommerce. Donc, si vous n’avez pas de sous-thème, c’est votre endroit où aller créer une ou alors Utilisez l’un de ces plugins.

Premier dans le vôtre Tableau de bord d’administration WordPress, aller à Plugins> Editeur. Ensuite, allez dans le dossier Plugins, ouvrez WooCommerce et recherchez les fichiers de modèle. Vous pouvez utiliser l’éditeur de fichier de plugin WordPress ou n’importe quel éditeur de code de votre choix pour cela. Sous le WooCommerce Annuaire, ouvrez-le modèles Classer et rechercher le Mon compte Dossier.

plugins/woocommerce/templates/myaccount

Comment modifier la page WooCommerce

Ouvrez ça /myaccount Dossier et vous trouverez tous les fichiers modèles utilisés sur la page Mon compte. woocommerce mes fichiers de modèle de compte

Ce sont les fichiers standard actuellement en cours d’exécution sur votre site Web. Pour écraser ces fichiers, vous devrez Créer un nouveau fichier avec le même nom dans le sujet de vos enfants. Toutefois, si vous créez un fichier vide, vous désactivez toutes les fonctionnalités du fichier d’origine. Pour éviter les problèmes sur votre site, vous devez copier et coller le fichier par défaut dans votre dossier de sujets.

Supposons que vous vouliez copier ça dashboard.php Fichier de l’installation de WooCommerce. Avant de l’inclure dans votre rubrique enfant, vous devez créer et accéder à deux sous-répertoires imbriqués / woocommerce et /Mon compte. Puis insérez le dashboard.php Fichier en: child_theme/woocommerce/myaccount/dashboard.php Modifier la page Mon compte WooCommerce par programme - Écraser le fichier de modèle

Ouvrez maintenant le dashboard.php Fichier et apportez quelques petites modifications pour vous assurer qu’il fonctionne correctement. C’est ça! Vous venez d’apprendre à écraser un fichier de modèle WooCommerce. C’est le premier pas. Allons maintenant un peu plus loin et voyons comment vous personnalisez la page Mon compte.

Personnalisez le tableau de bord sur la page Mon compte

Maintenant que vous savez comment écraser les fichiers de modèle, voyons comment modifier par programmation la page Mon compte WooCommerce. Dans cette section, nous allons vous montrer comment personnaliser le tableau de bord principal de la page Mon compte. À la fin de ce processus, votre page Mon compte ressemblera à ceci:

Personnaliser le modèle de tableau de bord woocommerce de mon compte Nous avons ajouté une image de titre et du texte en dessous. De plus, nous avons créé une liste de liens vers les sections que les utilisateurs visitent le plus souvent, un pied de page et des liens d’image afin que les clients puissent facilement vous contacter.

Script complet

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

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
$allowed_html = array(
'a' => array('href' => array(),)
);
?>
<h2>
<?php
printf(
/* translators: 1: user display name 2: logout url */
wp_kses( __( 'Hey %1$s, you're back! ', 'woocommerce' ), $allowed_html ),
'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
esc_url( wc_logout_url() )
);
?>
</h2>
<img id="welcome" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU"/>
<h3>
<?php
/* translators: 1: Orders URL 2: Address URL 3: Account URL. */
$dashboard_desc = __( 'This is your account main dashboard: ', 'woocommerce' );
if ( wc_shipping_enabled() ) {
/* translators: 1: Orders URL 2: Addresses URL 3: Account URL. */
$dashboard_desc = __( 'This is your account main dashboard:', 'woocommerce' );
}
printf(
wp_kses( $dashboard_desc,$allowed_html),
esc_url( wc_get_endpoint_url( 'orders' ) ),
esc_url( wc_get_endpoint_url( 'edit-address' ) ),
esc_url( wc_get_endpoint_url( 'edit-account' ) )
);
$ul_list = __('<ul>
<li>View your <a href="%1$s">recent orders</a></li>
<li>Manage your <a href="%2$s">shipping and billing addresses</a></li>
<li><a href="%3$s">Edit your password and account details</a></li>
</ul>');
$div_contact = __('
<div class="acc_contact">
<span class="acc_images" >
<a href="#link to send whatsapp message"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png"/></a>
<a href="#link to facebook profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png"/></a>
<a href="#link to twitter profile"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png"/></a>
<a href="#link to send email"><img src="http://localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png"/></a>
</span>
</div>');
$div_footer=__('
<div id="acc_footer">
<h4><i>Built with love !</i></h4>
<img src="http://localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png"/>
</div>');
?>
</h3>
<p>Manage profile and personal information here. Fill out all the fields so we can know about you. All editions made in your account will be reflected in the website immediatly, so other users can know about you and your current needs without any delay</p>
<?php
echo $ul_list.$div_footer.$div_contact;

Si vous regardez le code, vous constaterez que tout le code d’origine que nous avons copié à partir du modèle par défaut est toujours là. Nous venons de changer quelques chaînes et de réorganiser les liens sous forme de liste. De plus, nous avons utilisé des scripts supplémentaires pour ajouter plus de contenu à l’onglet. Pour mieux comprendre les modifications que nous avons apportées, vous pouvez consulter les paramètres par défaut dashboard.php.

ajouter des images

Pour afficher des images sur la page Mon compte, vous devrez remplacer les URL des images. Il en va de même pour les liens image des symboles sociaux.

Ajustements CSS

Une autre façon de personnaliser la page Mon compte et toute autre page consiste à utiliser des scripts CSS. C’est le script CSS que nous avons utilisé pour formater nos éléments personnalisés dashboard.php Déposer:

.woocommerce-MyAccount-content > h2:nth-child(2),
.woocommerce-MyAccount-content > h3:nth-child(4){
text-align:center;
}
.acc_contact{
padding-top:20px;
text-align:center;
}
.acc_contact > h3{
float:left;
}
.acc_images{
margin:auto;
width: 50%;
display: block;
}
#welcome{
margin:auto;
}
.acc_images img {
margin-left:4px;
margin-right:4px;
display:inline-block;
width:55px;
}
#acc_footer{
margin-top:15px;
background-color: #202020;
text-align: center;
border-radius: 15px;
}
#acc_footer > h4{
padding-top:20px;
color:rgb(235, 228, 228);
font-weight:bold;
}
#acc_footer > img{
margin:auto;
padding-bottom:20px;
}

Vous pouvez prendre ce code comme base et l’insérer dans le style.css Classez votre thème enfant et personnalisez-le pour qu’il corresponde à l’apparence de votre site Web.

2. Modifiez la page Mon compte WooCommerce avec des crochets

La deuxième façon de modifier par programmation la page Mon compte consiste à utiliser des hooks WooCommerce. Pour ce faire, vous avez besoin d’une compréhension de base du fonctionnement des hooks dans WooCommerce. Si vous n’êtes pas familier avec les crochets, nous vous encourageons à regarder autour de vous ces instructions.

A) Renommer les onglets

Ce script renomme 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'] = 'Your addresses';
return $items;
}

B) Retirez les onglets

Utilisez le bouton pour supprimer complètement tous les onglets unset () Fonctionne comme suit:

add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_address’, 9999 );
function QuadLayers_remove_acc_address( $items ) {
unset( $items['downloads'] );
return $items;
}

Dans le script ci-dessus, nous avons supprimé ce Téléchargements Tab. La liste complète des onglets se trouve dans le $ articles Array pour que vous puissiez choisir celui que vous voulez.

$items = array(
'dashboard'       => __( 'Dashboard', 'woocommerce' ),
'orders'          => __( 'Orders', 'woocommerce' ),
'downloads'       => __( 'Downloads', 'woocommerce' ),
'edit-address'    => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),
'payment-methods' => __( 'Payment methods', 'woocommerce' ),
'edit-account'    => __( 'Account details', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);

C) Fusionner les onglets et le contenu

Une autre option pour personnaliser la page Mon compte est: Fusionner les onglets. Par exemple, voyons comment supprimer cela Adresses Tab et déplacez le contenu vers Compte Languette.

// -----------------------------
//  1. Remove the Addresses tab
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-address']);
return $items;
}
// -------------------------------
// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );

L’onglet Compte ressemble maintenant à ceci: Fusionner le contenu de mon onglet woocommerce

D) Ajouter un nouvel onglet avec un contenu personnalisé

Voyons maintenant comment ça se passe Ajouter du contenu à la page Mon compte. Dans cet exemple, nous ajoutons un nouvel onglet appelé «Support» où les utilisateurs peuvent facilement consulter leurs tickets d’assistance. Nous allons utiliser deux codes courts fournis par un plugin tiers pour afficher un contenu intéressant. Cependant, vous devriez pouvoir utiliser le shortcode de votre choix dans votre nouvel onglet.

Sachez cependant que certains codes courts peuvent ne pas fonctionner en raison d’incompatibilités avec WooCommerce. Collez le code suivant dans le champ « Mon compte » pour ajouter un onglet « Assistance » avec un contenu personnalisé à l’onglet « Mon compte » de WooCommerce functions.php Dossier du sujet de votre enfant.

// 1. Register new endpoint
// Note: Resave Permalinks or it will give 404 error  
function QuadLayers_add_support_endpoint() {
    add_rewrite_endpoint( 'support', EP_ROOT | EP_PAGES );
}  
add_action( 'init', 'QuadLayers_add_support_endpoint' );  
// ------------------
// 2. Add new query
function QuadLayers_support_query_vars( $vars ) {
    $vars[] = 'support';
    return $vars;
}  
add_filter( 'query_vars', 'QuadLayers_support_query_vars', 0 );  
// ------------------
// 3. Insert the new endpoint 
function QuadLayers_add_support_link_my_account( $items ) {
    $items['support'] = 'Support ™';
    return $items;
}  
add_filter( 'woocommerce_account_menu_items', 'QuadLayers_add_support_link_my_account' );
// ------------------
// 4. Add content to the new endpoint  
function QuadLayers_support_content() {
echo '<h3>Support</h3><p>Welcome to the support area. As a premium customer, manage your support tickets from here, you can submit a ticket if you have any issues with your website. We'll put our best to provide you with a fast and efficient solution</p>';
echo do_shortcode( '[tickets-shortcode]' );
echo do_shortcode( '[wpforms id="1082"]' );
}  
add_action( 'woocommerce_account_support_endpoint', 'QuadLayers_support_content' );

Si vous obtenez un message d’erreur de page 404 lorsque vous cliquez sur le nouvel onglet, ouvrez la page de permalien en allant sur le bouton Tableau de bord WordPress> Paramètres> Permaliens et cliquez sur sauver Bouton ci-dessous.

Notez que le script est divisé en quatre sections. Chacun d’eux fait un travail différent, vous utiliserez donc les sections que vous souhaitez ajouter à votre boutique. Souvenez-vous également que dans la dernière section du script (4), vous pouvez remplacer le shortcode dans le do_shortcode() Une fonction. Ceci est la ligne du bas pour le nouvel onglet Assistance. Onglet Mon compte Woocommerce personnalisé

Conclusion

Dans l’ensemble, la page standard Mon compte contient les informations de base dont les utilisateurs ont besoin, mais c’est assez simple. Donc, si vous souhaitez améliorer l’expérience utilisateur dans votre boutique, vous devez personnaliser la page Mon compte. Non seulement cela vous aidera à améliorer un domaine très important de votre entreprise, mais cela vous aidera également à augmenter vos ventes.

Il y a un peu Plugins pour personnaliser la page Mon compte. Cependant, si vous ne souhaitez plus installer de plugins et que vous avez des compétences en programmation, vous pouvez Modifier la page Mon compte WooCommerce programmatique. Il y a deux façons de faire ça:

  • Écraser les fichiers de modèle
  • Utiliser les hooks WooCommerce

Chaque méthode fera le travail, mais nous recommandons généralement d’utiliser des crochets lorsque cela est possible. C’est moins risqué et l’une des meilleures pratiques recommandées par WordPress. Dans ce guide, nous avons vu quelques exemples de ce que vous pouvez faire avec l’une ou l’autre méthode. Nous vous encourageons à utiliser ces scripts comme guide, à les utiliser pour trouver des idées et à jouer pour tirer le meilleur parti de la page Mon compte de votre boutique.

Des guides supplémentaires pour vous aider à tirer le meilleur parti de votre page Mon compte se trouvent dans les guides suivants:

Quelles modifications avez-vous apportées à votre page « Mon compte »? Avez-vous eu des problèmes après notre tutoriel? Faites-nous savoir dans les commentaires ci-dessous!





Source link

Recent Posts