Pour personnaliser un peu la page de connexion Ă  votre boutique en ligne WooCommerce, nous allons voir comment afficher un texte informatif au-dessus du formulaire de connexion ou d’inscription, et faire passer un message Ă  vos visiteurs.

Personnaliser le formulaire d’inscription de WooCommerce

Afficher un texte au-dessus du formulaire d’inscription

Imaginons que vous souhaitez informer vos visiteurs avant leur inscription à votre site. Par exemple, la nouvelle loi sur le RGPD vous oblige à informer vos internautes que vous allez stocker leurs données personnelles. Eh bien nous allons leur afficher une petite notification pour leur expliquer notre politique de confidentialité avant leur inscription.

Copiez-collez le code suivant dans le fichier functions.php de votre thĂšme enfant:

add_action( 'woocommerce_register_form_start','wpm_add_rgpd_text_up' );
function wpm_add_rgpd_text_up() {
   echo '<h3 class="wpm-titre">Nouveaux clients</h3><p class="wpm-description">En créant un compte, vous acceptez la Politique de confidentialité du site ainsi que ses Conditions Générales de Vente.</p>';
}

Voici ce que ça donne sur notre page de connexion :

rgpd compte woocommerce

Afficher un texte en-dessous du formulaire d’inscription

Si vous préférez afficher ce message informatif en-dessous de votre formulaire, vous pouvez utiliser le code suivant dans le fichier functions.php de votre thÚme enfant.

Celui-ci est quasiment le mĂȘme que le prĂ©cĂ©dent, Ă  la diffĂ©rence qu’on utilise cette fois le hook woocommerce_register_form_end.

add_action( 'woocommerce_register_form_end','wpm_add_rgpd_text_down' );
function wpm_add_rgpd_text_down() {
   echo '<h3 class="wpm-titre">Nouveaux clients</h3><p class="wpm-description">En créant un compte, vous acceptez la Politique de confidentialité du site ainsi que ses Conditions Générales de Vente.</p>';
}

Voilà ce que ça nous donne maintenant :

woocommerce login text end

Personnaliser le formulaire de connexion de WooCommerce

Afficher un texte au-dessus du formulaire de connexion

Vous pouvez également afficher une information différente au-dessus de votre formulaire de connexion. Par exemple, on va afficher à nos visiteurs la mention « Content de vous revoir » au-dessus du formulaire de connexion ici.

On va cette fois utiliser le code suivant toujours dans le fichier functions.php de notre thĂšme enfant:

add_action( 'woocommerce_login_form_start','wpm_add_login_text_up' );
 
function wpm_add_login_text_up() {
   echo '<p class="wpm-description">Content de vous revoir parmi nous.</p>';
}

Et le résultat:

woocommerce texte connexion up

Afficher un texte en-dessous du formulaire de connexion

De la mĂȘme maniĂšre, on peut afficher un texte en-dessous du formulaire de connexion Ă©galement, cette fois en remplaçant le hook prĂ©cĂ©dent par woocommerce_login_form_end

Utilisez le code suivant dans le fichier functions.php de votre thĂšme enfant:

add_action( 'woocommerce_login_form_end','wpm_add_login_text_down' );
 
function wpm_add_login_text_down() {
   echo '<p class="wpm-description">Content de vous revoir parmi nous.</p>';
}

Ce qui nous donne cette fois-ci :

woocommerce connexion texte down

Vous pouvez bien sĂ»r utiliser tous ces snippets en mĂȘme temps, si vous souhaitez afficher des messages Ă  plusieurs endroits Ă  la fois. Et n’hĂ©sitez pas Ă  modifier les diffĂ©rents textes pour afficher ce que vous voulez Ă  vos visiteurs (par exemple des liens vers votre politique de confidentialitĂ© et vos CGV)

Source: Business Bloomer