Comment créer une page personnalisée de mon compte WooCommerce

Publié: 2021-05-11

Page personnalisée de mon compte WooCommerce Vous cherchez un moyen de personnaliser la page « Mon compte » de WooCommerce ? La modification de la page de compte est l'une des pages les plus importantes de toute boutique WooCommerce. Cette page doit avoir un design époustouflant car elle est essentielle au bon fonctionnement de l'ensemble de votre boutique en ligne.

Il doit être conçu de manière à permettre aux utilisateurs de tirer pleinement parti de la gestion du compte, de convertir davantage de ventes et/ou d'inciter les clients à effectuer un achat répété.

La page "mon compte" et ses sous-pages peuvent être affichées n'importe où sur votre site à l'aide d'un shortcode. Les shortcodes sont un moyen facile d'ajouter du contenu dynamique à vos publications, pages et barres latérales WordPress.

Page personnalisée de mon compte WooCommerce

Dans ce bref didacticiel, nous vous montrons comment personnaliser l'apparence, la convivialité, la mise en page, le contenu et la conception de la page "mon compte" à l'aide de scripts PHP personnalisés. Cela signifie que vous devez avoir des connaissances en codage avant de continuer.

Vous pouvez réaliser presque n'importe quoi dans WooCommerce si vous êtes familier avec la personnalisation PHP. Cela signifie que vous pouvez ajouter un onglet personnalisé, renommer un onglet, supprimer un onglet ou fusionner le contenu d'un onglet.

Voyons comment vous pouvez y parvenir.

Étapes pour modifier la page Mon compte à l'aide d'extraits PHP

Dans cette section, nous utiliserons les crochets WooCommerce. En effet, il s'agit de l'une des meilleures pratiques recommandées par WordPress lors de la personnalisation de votre site.

Nous allons ajouter un onglet personnalisé, renommer un onglet, supprimer un onglet et fusionner le contenu de l'onglet.

Voici les étapes à suivre pour modifier la page Mon compte par programmation :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions du thème dans lequel nous ajouterons les extraits de code PHP.
Si vous souhaitez renommer l'onglet Adresse en Adresse de livraison, ajoutez le code suivant au fichier php . Vous pouvez utiliser le même code pour renommer n'importe quel onglet.

add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );

function njengah_rename_address_my_account( $items ) {

   $items['edit-address'] = 'Delivery Address';

     return $items;

}

Voici le résultat :
Si vous souhaitez supprimer l'onglet Adresse, ajoutez le code suivant au fichier php :

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );

function njengah_remove_address_my_account( $items ) {

unset( $items['edit-address'] );

return $items;

}

Voici une liste complète des onglets slug dans le tableau $items, afin que vous puissiez choisir celui que vous souhaitez supprimer :

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

);

Il est également possible de fusionner les onglets et le contenu. Par exemple, vous pouvez supprimer l'onglet Adresses et déplacer son contenu vers l'onglet Compte. Vous pouvez y parvenir en ajoutant le code suivant au fichier php :

// -----------------------------

// 1. Remove the Addresses tab

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );

function njengah_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' );

Voici le résultat :
Vous pouvez également créer un onglet personnalisé sur cette page. Par exemple, vous pouvez ajouter un nouvel onglet appelé Support où les utilisateurs peuvent facilement consulter leurs tickets de support. Pour ce faire, ajoutez le code suivant au fichier php :

/**
* Add New Tab on the My Account page
*/

// ------------------

// 1. Register new endpoint (URL) for My Account page

// Note: Re-save Permalinks or it will give 404 error

function njengah_add_premium_support_endpoint() {

add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );

}

add_action( 'init', 'njengah_add_premium_support_endpoint' );

// ------------------

// 2. Add new query var

function njengah_premium_support_query_vars( $vars ) {

$vars[] = 'premium-support';

return $vars;

}

add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );

// ------------------

// 3. Insert the new endpoint into the My Account menu

function njengah_add_premium_support_link_my_account( $items ) {

$items['premium-support'] = 'Premium Support';

return $items;

}

add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );

// ------------------

// 4. Add content to the new tab

function njengah_premium_support_content() {

echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. &amp;lt;i&amp;gt;Please contact your theme/plugin developer for theme/plugin-related support.&amp;lt;/i&amp;gt;&amp;lt;/p&amp;gt;';

echo do_shortcode( ' /* your shortcode here */ ' );

}

add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Vous pouvez utiliser un plugin tiers comme WPForms pour créer la page de support. Après cela, vous pouvez coller le shortcode dans la dernière ligne. Voici le résultat :

Conclusion

À présent, vous devriez être en mesure de personnaliser la page du compte. Nous vous recommandons de créer un thème enfant avant de modifier cette page. Cela garantira que vos modifications ne seront pas perdues lors d'une mise à jour. Nous espérons que ce tutoriel vous a fourni la meilleure solution.

Comment créer une page personnalisée de mon compte WooCommerce

Page personnalisée de mon compte WooCommerce

Étapes pour modifier la page Mon compte à l'aide d'extraits PHP

Conclusion

Articles similaires