Comment créer des pages de connexion et d'inscription séparées dans WooCommerce

Publié: 2021-05-18

Cherchez-vous un moyen de séparer par programmation les pages de connexion et d'inscription ? Ce bref tutoriel vous fournira une solution simple.

Vous souhaiterez peut-être envoyer les clients déconnectés vers une page de connexion et les clients non enregistrés vers une page distincte. Par défaut, WooCommerce affiche le formulaire de connexion et le formulaire d'inscription sur la même page.

Il convient de mentionner que la page WooCommerce Mon compte est affichée par le shortcode [woocommerce_my_account].

Avoir les formulaires de connexion et d'inscription sur la même page peut ne pas être une bonne idée si vous souhaitez utiliser des pages de destination ou des pages de vente avec un objectif spécifique comme l'enregistrement des utilisateurs. Cela signifie que le formulaire de connexion n'est pas requis sur cette page.

Comment créer des pages de connexion et d'inscription séparées dans WooCommerce

Dans ce bref tutoriel, nous allons vous montrer comment séparer les pages de connexion et d'inscription. Nous allons vous montrer comment créer deux nouveaux shortcodes, un pour le formulaire de connexion et un pour le formulaire d'inscription. Ces shortcodes peuvent être utilisés n'importe où sur votre site.

Voyons comment vous pouvez y parvenir.

Étapes pour créer des pages de connexion et d'inscription séparées dans WooCommerce

Avant de continuer, il est important de noter que le contenu utilisé pour créer le shortcode est copié à partir des fichiers de modèle WooCommerce. Cela signifie que lorsque WooCommerce publie des modifications sur ces fichiers lors d'une mise à jour, vous devez modifier certaines parties du code.

Lisez la suite, car nous vous montrerons également comment utiliser les codes abrégés.

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions du thème où nous ajouterons la fonction qui créera le shortcode de la page d'inscription.
Ajoutez le code suivant au fichier php :

add_shortcode( 'wc_reg_form_njengah', 'njengah_separate_registration_form' );

function njengah_separate_registration_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

// NOTE: THE FOLLOWING <FORM></FORM> IS COPIED FROM woocommerce\templates\myaccount\form-login.php

// IF WOOCOMMERCE RELEASES AN UPDATE TO THAT TEMPLATE, YOU MUST CHANGE THIS ACCORDINGLY

do_action( 'woocommerce_before_customer_login_form' );

?>

<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

<?php do_action( 'woocommerce_register_form_start' ); ?>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>

</p>

<?php endif; ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>

</p>

<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">

<label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>

<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />

</p>

<?php else : ?>

<p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_register_form' ); ?>

<p class="woocommerce-FormRow form-row">

<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>

<button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>

</p>

<?php do_action( 'woocommerce_register_form_end' ); ?>

</form>

<?php

return ob_get_clean();

}

Le deuxième shortcode est le [wc_login_form_bbloomer]. Vous devriez l'ajouter à une toute nouvelle page. Ajoutez le code suivant dans le même fichier :

add_shortcode( 'wc_login_form_njengah', 'njengah_separate_login_form' );

function njengah_separate_login_form() {

if ( is_admin() ) return;

if ( is_user_logged_in() ) return;

ob_start();

woocommerce_login_form( array( 'redirect' => 'https://custom.url' ) );

return ob_get_clean();

}

Comment utiliser les codes courts

Comme mentionné précédemment, le shortcode [woocommerce_my_account] affiche la page Mon compte. Si vous souhaitez conserver le formulaire de connexion et le tableau de bord de la page de compte tout en étant connecté sur la même page, vous devez utiliser le premier shortcode : [woocommerce_my_account] .

Si vous souhaitez avoir login + mon compte, et une page d'inscription séparée :

[wc_reg_form_njengah] sur la page d'inscription
[woocommerce_my_account] sur la page Connexion + Compte

Si vous souhaitez disposer de pages de connexion, d'inscription et de mon compte distinctes :

wc_reg_form_njengah] sur la page d'inscription
[wc_login_form_njengah] sur la page de connexion
[woocommerce_my_njengah ] sur la page Mon compte

Cependant, vous devez désactiver "Autoriser les clients à créer un compte", comme indiqué ci-dessous : comptes

Conclusion

C'est tout ce que vous avez à faire pour séparer les pages de connexion et d'inscription. N'oubliez pas de copier et coller le shortcode sur une nouvelle page.

Nous vous recommandons de créer un thème enfant. Cela garantira que vos modifications ne seront pas perdues lors d'une mise à jour.

Nous espérons que ce message a aidé à résoudre votre problème.

Comment créer des pages de connexion et d'inscription séparées dans WooCommerce

Comment créer des pages de connexion et d'inscription séparées dans WooCommerce

Étapes pour créer des pages de connexion et d'inscription séparées dans WooCommerce

Comment utiliser les codes courts

Conclusion

Articles similaires