Ajouter un onglet dans le menu “Mon Compte” de Woocommerce

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">
					<div class="elementor-section-wrap">
								<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="{&quot;jet_parallax_layout_list&quot;:[],&quot;_ha_eqh_enable&quot;:false}">
						<div class="elementor-container elementor-column-gap-default">
							<div class="elementor-row">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37e517b" data-id="37e517b" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
			<div class="elementor-column-wrap elementor-element-populated">
							<div class="elementor-widget-wrap">
						<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="{&quot;step_next_label&quot;:&quot;Suivant&quot;,&quot;step_previous_label&quot;:&quot;Pr\u00e9c\u00e9dent&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}" 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 &quot;Mon Compte&quot; 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 type="submit" class="elementor-button elementor-size-md">
						<span >
															<span class=" elementor-button-icon">
																										</span>
																						<span class="elementor-button-text">Envoyer</span>
													</span>
					</button>
				</div>
			</div>
		</form>
				</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
							</div>
				</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. 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Suivez-moi

Les derniers articles

Votre demande a bien été envoyé, merci.

Le délai de réponse peut varier de 24h à 48h.
Merci de votre compréhension

Besoin d'aide pour mon projet

Sujet :
Ajouter un onglet dans le menu “Mon Compte” de Woocommerce