Comment ajouter les champs supplémentaires sur le formulaire de création de compte — WooCommerce?

Pour permettre aux clients de créer un compte, vous pouvez avoir besoin d’ajouter des champs supplémentaires sur le formulaire WordPress.  En effet, par défaut, WooCommerce propose la possibilité d’activer le champ « Adresse courriel » et « mot de passe ». Toutefois, ces champs ne sont pas souvent représentatifs des réalités des entreprises. Nous allons donc voir comment ajouter les champs qui nous intéressent. Ceci sans avoir à installer une extension.

Suivez les étapes ci-dessous pour ajouter un champ supplémentaire au formulaire d’inscription WooCommerce

Pour ajouter un champ supplémentaire au formulaire d’inscription WooCommerce, vous pouvez suivre ces étapes :

• Ouvrez votre tableau de bord WordPress et accédez à la section « Apparence ».
• Sélectionnez « Éditeur de thème » dans le menu déroulant.
• Dans la liste des fichiers de thème sur le côté droit de l’écran, sélectionnez « functions.php ».
• Faites défiler vers le bas du fichier « functions.php» et ajoutez le code suivant :

<?php 
// Add new field to registration form
add_action( 'woocommerce_register_form', 'add_extra_registration_field' );
function add_extra_registration_field() {
?>
    <p class="form-row form-row-wide">
        <label for="extra_field"><?php _e( 'Extra Field', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="text" class="input-text" name="extra_field" id="extra_field" value="<?php if ( ! empty( $_POST['extra_field'] ) ) esc_attr_e( $_POST['extra_field'] ); ?>" />
    </p>
<?php
}

// Validate the new field
add_action( 'woocommerce_register_post', 'validate_extra_registration_field', 10, 3 );
function validate_extra_registration_field( $username, $email, $validation_errors ) {
    if ( isset( $_POST['extra_field'] ) && empty( $_POST['extra_field'] ) ) {
        $validation_errors->add( 'extra_field_error', __( 'Please provide a value for the extra field', 'woocommerce' ) );
    }
}

// Save the new field
add_action( 'woocommerce_created_customer', 'save_extra_registration_field' );
function save_extra_registration_field( $customer_id ) {
    if ( isset( $_POST['extra_field'] ) ) {
        update_user_meta( $customer_id, 'extra_field', sanitize_text_field( $_POST['extra_field'] ) );
    }
}

• Enregistrez les modifications dans le fichier « functions.php ».

Ce code ajoutera un nouveau champ intitulé « Champ supplémentaire » au formulaire d’inscription WooCommerce. Il validera également le champ pour s’assurer qu’il n’est pas laissé vide et enregistrera la valeur du champ dans les métadonnées de l’utilisateur lors de l’inscription. Vous pouvez personnaliser le libellé du champ et le message de validation en modifiant le texte dans les fonctions add_extra_registration_field() et validate_extra_registration_field(), respectivement.

Utiliser une extension WordPress

Si vous n’êtes pas familier avec la programmation PHP, vous pouvez utiliser une extension pour effectuer la même tâche. Pour cela, ci-dessous sont quelques extensions que nous vous recommandons.

Il est cependant à noter que ces extensions peuvent avoir un prix.

1-Custom User Registration Fields for WooCommerce ; (49 $ / an)

C’est une extension de WooCommerce que vous trouverez sur le site web de WooCommerce.com

Afin d’utiliser l’extension, vous devez passer la commande et en suivant les étapes sur le site web.

2 – Custom Fields pour WooCommerce ; (79 $ / an)

C’est pareillement une extension que vous trouverez su WooCommerce. Pour l’obtenir, Cliquez sur le lien de téléchargement.

Autres extensions qui pourraient être gratuites

Gilblas Ngunte Possi

Fondateur et Développeur Full-Stack chez Prositeweb.

Ma maîtrise des outils modernes, combinée à un sens d’analyse approfondi des technologies de l’information, me permet d’offrir un accompagnement de qualité dans la conception et la mise en place de vos solutions web.