Ajouter un champ utilisateur dans la page mon compte

Avec ce nouveau snippet, nous allons vous montrer comment ajouter un champ personnalisé au profil des utilisateurs sur la page détails de leur compte. Dans cet exemple, nous allons ajouter le champ anniversaire. Cependant, vous pouvez ajouter n’importe quel type de champ.

1|Information

Avant d’utiliser ce snippet, assurez-vous d’avoir installé l’extension Code Snippets (gratuite) sur votre site WordPress. Si ce n’est pas le cas, vous pouvez la télécharger via le lien ci-dessous. Si vous n’avez jamais ajouté de fonctionnalité spécifique à votre site WordPress, nous vous recommandons de commencer par lire notre guide dédié (lien ci-dessous).

2|Prérequis

Voici la liste des extensions nécessaires au bon fonctionnement de ce snippet. Assurez-vous de les installer avant d’activer le snippet.

3|Snippet

Voici le snippet à utiliser. Les commentaires à l’intérieur du code vous guideront sur le fonctionnement de ce snippet.

Le snippet doit fonctionner sur la partie frontend de votre site web. Assurez-vous de bien cocher la case “Only run on site front-end” avant d’activer le snippet.

/** For the my account details page, we need 2 functions, one to display the new field and one to save the data */
\add_action('woocommerce_edit_account_form', 'myaccountDetailForm');
\add_action('woocommerce_save_account_details', 'myaccountDetailSave');

function myaccountDetailForm()
{
    $userId = \get_current_user_id();
    $key    = "billing_birth_date";
	$label = __("Date of birth", 'woocommerce');
	// If the user already filled this value, we need to read it to display it
	$value = \esc_attr(\get_user_meta($userId, $key, true));

	echo "<p class='woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide'>";
	echo "<label for='{$key}'>{$label}</label>";
	echo "<input type='date' class='woocommerce-Input woocommerce-Input--text input-text' name='{$key}' id='{$key}' value='{$value}' /></p>";
	// If you want, you can also add some custom description under your custom field
	echo "<p class='woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide'>If you fill your date of birth, you'll earn a gift for your birthday</p>";
	echo "<div class='clear'></div>";
}

function myaccountDetailSave($userId)
{
    $key    = "billing_birth_date";
	// This part is very important. When reading a field entered by a user, you need to sanitize it to make sure it's safe
	$birthday = !empty($_POST[$key]) ? \wc_clean($_POST[$key]): '';
	if( !empty($birthday) )
	{
		$date = \date_create($birthday);
		if (empty($date)) {
			\wc_add_notice(__("Invalid date format for date of birth",'woocommerce'), 'error');
			$birthday = false;
		}
		$today = \date_create();
		if ($date > $today) {
			\wc_add_notice(__("You must enter your date of birth, not your next birthday", 'woocommerce'), 'error');
			$birthday = false;
		}
	}
	if( $birthday !== false ) {
		\update_user_meta($userId, "billing_birth_date", $birthday);
	} else {
		\wc_add_notice(__("Invalid date format for date of birth", 'woocommerce'), 'error');
	}
}