Comment ajouter des messages sur la page d’inscription/connexion de WooCommerce

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 :

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 :

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:

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 :

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

Devenez un freelance WordPress accompli

Trouvez les bons clients, vendez des sites rentables, et libérez-vous de vos contraintes​

Découvrir la formation