Le menu “Mon compte” de Woocommerce est fixe et il ce compose de 8 onglets :
- Commandes
- Voir la commande
- Téléchargements
- Modifier le compte
- Adresses
- Moyens de paiement
- Mot de passe perdu
- Déconnexion
Mais il est tout à fait possible de le personnaliser ce menu pour lui ajouter un onglet supplémentaire.
Vous avez le choix avec des modules payants, comme celui-ci par exemple : https://woocommerce.com/fr-fr/products/customize-my-account-for-woocommerce/ qui fait très bien ce qu’on lui demande.
Ou alors, il existe une façon gratuite de faire cela.
Je vous explique tout dans cet article !
Tout d’abord, pour cet article, nous allons ajouter un onglet “Retour” directement dans le menu “Mon compte” de Woocommerce, puis, lui ajouter un texte et un shortcode personnalisable.
Pour cela, on va commencer par ajouter le code ci-dessous dans le fichier function.php de votre thème enfant :
/**
* @snippet WooCommerce Add New Tab @ My Account
* @compatible WooCommerce 7.0
*/
// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
function add_retours_endpoint() {
add_rewrite_endpoint( 'retours', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_retours_endpoint' );
// ------------------
// 2. Add new query var
function add_retours_query_vars( $vars ) {
$vars[] = 'retours';
return $vars;
}
add_filter( 'query_vars', 'add_retours_query_vars', 0 );
// ------------------
// 3. Insert the new endpoint into the My Account menu
function retours_link_my_account( $items ) {
$items['retours'] = 'Retours';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'retours_link_my_account' );
// ------------------
// 4. Add content to the new tab
function retours_content() {
echo '<p>Vous avez besoin de faire un retour ?<br>Merci de remplir le formulaire ci-dessous</p>';
echo do_shortcode( ' /* your shortcode here */ ' );
}
add_action( 'woocommerce_account_retours_endpoint', 'retours_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
Détaillons un peu ce code
Dans la partie 1, le slug ‘retour’ sera notre URL supplémentaire.
// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
function add_retours_endpoint() {
add_rewrite_endpoint( 'retours', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_retours_endpoint' );
Dans la partie 2, nous ajoutons une nouvelle requête avec le slug ‘retour’
// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
function add_retours_endpoint() {
add_rewrite_endpoint( 'retours', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'add_retours_endpoint' );
Dans la partie 3, nous donnons “Retour” comme titre de l’onglet
// 3. Insert the new endpoint into the My Account menu
function retours_link_my_account( $items ) {
$items['retours'] = 'Retours';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'retours_link_my_account' );
Pour la partie 4, vous avez la possibilité d’ajouter un titre, et un shortcode.
Vous pouvez très bien créer une section avec Elementor par exemple, ajouter un formulaire ou autre, et ajoutez-y votre shortcode.
// ------------------
// 4. Add content to the new tab
function retours_content() {
echo '<p>Vous avez besoin de faire un retour ?<br>Merci de remplir le formulaire ci-dessous</p>';
echo do_shortcode( ' /* your shortcode here */ ' );
}
Exemple :
Pour cet article, j’ai créé une section Elementor, et j’ai ajouté le shortcode de celui-ci.
Et voici le code avec le shortcode :
// ------------------
// 4. Add content to the new tab
function retours_content() {
echo '<p>Vous avez besoin de faire un retour ?<br>Merci de remplir le formulaire ci-dessous</p>';
echo do_shortcode( ' <div data-elementor-type="section" data-elementor-id="6453" class="elementor elementor-6453 elementor-location-single" data-elementor-post-type="elementor_library">
<section class="elementor-section elementor-top-section elementor-element elementor-element-dba20c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="dba20c9" data-element_type="section" data-settings="{"jet_parallax_layout_list":[]}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37e517b" data-id="37e517b" data-element_type="column" data-settings="{"background_background":"classic"}">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-ab6c376 elementor-widget__width-initial elementor-button-align-stretch elementor-widget elementor-widget-form" data-id="ab6c376" data-element_type="widget" data-settings="{"step_next_label":"Suivant","step_previous_label":"Pr\u00e9c\u00e9dent","button_width":"100","step_type":"number_text","step_icon_shape":"circle"}" data-widget_type="form.default">
<div class="elementor-widget-container">
<form class="elementor-form" method="post" name="Nouveau formulaire">
<input type="hidden" name="post_id" value="6453"/>
<input type="hidden" name="form_id" value="ab6c376"/>
<input type="hidden" name="referer_title" value="Ajouter un onglet dans le menu "Mon Compte" de Woocommerce | JR Web Concept" />
<input type="hidden" name="queried_id" value="6440"/>
<div class="elementor-form-fields-wrapper elementor-labels-">
<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100">
<label for="form-field-name" class="elementor-field-label elementor-screen-only">
Nom </label>
<input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-md elementor-field-textual" placeholder="Nom">
</div>
<div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100 elementor-field-required">
<label for="form-field-email" class="elementor-field-label elementor-screen-only">
E-mail </label>
<input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-md elementor-field-textual" placeholder="E-mail" required="required" aria-required="true">
</div>
<div class="elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100">
<label for="form-field-message" class="elementor-field-label elementor-screen-only">
Message </label>
<textarea class="elementor-field-textual elementor-field elementor-size-md" name="form_fields[message]" id="form-field-message" rows="4" placeholder="Message"></textarea> </div>
<div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons">
<button class="elementor-button elementor-size-md" type="submit">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Envoyer</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
' );
}
add_action( 'woocommerce_account_retours_endpoint', 'retours_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
Dernière étape
Pour que votre nouveau slug soit pris en compte, vous devez aller recharger votre permalien.
Pour cela, rendez-vous dans l’onglet “Réglages” de votre back-office, puis “Permaliens”, ensuite cliquez sur “Enregistrer les modifications”.
Ceci va permettre à WordPress de prendre en compte votre nouveau slug.
Et maintenant le résultat
Si vous avez bien suivi la procédure, voici ce que vous devez obtenir
Et avec un peu de customisation CSS, voila le résultat final :
Maintenant, vous vous dites, c’est bien, mais comment réorganiser les onglets ?
Pour cela, je vous explique comment faire dans l’article suivant.
Testé sur WordPress 6.1.1 et Woocommerce 7.1
Un nouveau projet WordPress ? Besoin d’aide ?
Contactez-moi ou visitez mon site et je me ferais un plaisir de vous aider.