WooCommerce : pages de connexion et d'inscription séparées

Publié: 2019-02-13

Il y a des moments où vous devez envoyer des clients déconnectés vers une page de connexion et des clients non enregistrés vers une page d'enregistrement distincte.

Comme vous le savez, la page Mon compte WooCommerce, qui contient le shortcode [woocommerce_my_account], comporte à la fois des formulaires de connexion et d'inscription lorsque l'inscription est activée dans les paramètres de Mon compte.

Ce n'est pas toujours une bonne idée, surtout lorsque vous utilisez des pages de destination ou des pages de vente avec un objectif spécifique, par exemple l'enregistrement des utilisateurs.

De toute évidence, lorsque cela se produit, vous ne souhaitez pas non plus y avoir de formulaire de connexion. Ma solution fournit deux nouveaux shortcodes, un pour le formulaire de connexion et un pour le formulaire d'inscription.

Veuillez noter que le contenu du code abrégé de la page d'inscription est copié à partir des fichiers de modèle WooCommerce - si WooCommerce publie une mise à jour ou apporte une modification à ces fichiers, vous devrez peut-être également mettre à jour l'extrait.

Essayez-le, les commentaires sont très appréciés

Nouveaux codes abrégés pour afficher séparément les formulaires de connexion et d'inscription WooCommerce

Que faire avant d'utiliser les shortcodes ci-dessous…

Comme vous le savez, le shortcode [woocommerce_my_account] est très important et doit être conservé sur la page WooCommerce Mon compte à tout prix. Cela signifie que vous ne pouvez pas vous en débarrasser ou supprimer la page Mon compte.

Donc, si vous voulez avoir une page CONNEXION + MON COMPTE et une page INSCRIPTION séparée, utilisez cette pile :

[wc_reg_form_bbloomer] sur la page d'inscription - SNIPPET #1 CI-DESSOUS
[woocommerce_my_account] sur la page Mon compte
ajouter un extrait de redirection d'inscription, afin qu'ils accèdent à la page Mon compte

Si vous souhaitez avoir des pages séparées CONNEXION, INSCRIPTION et MON COMPTE, utilisez cette pile :

[wc_reg_form_bbloomer] sur la page d'inscription - SNIPPET #1 CI-DESSOUS
[wc_login_form_bbloomer] sur la page de connexion – SNIPPET #2 CI-DESSOUS
[woocommerce_my_account ] sur la page Mon compte
ajouter un extrait de redirection d'inscription, afin qu'ils accèdent à la page Mon compte

Dans les deux cas, vous devez décocher la case « Autoriser les clients à créer un compte sur la page « Mon compte » » dans les paramètres « Comptes et confidentialité » :

Dans tous les cas, vous devez désactiver les inscriptions à partir de la page "Mon compte"

PHP Snippet #1 : Séparez le code court du formulaire d'inscription des clients WooCommerce

Placez ce shortcode [wc_reg_form_bbloomer] dans une toute nouvelle page WordPress et le formulaire d'inscription apparaîtra comme par magie.

/**
 * @snippet       WooCommerce User Registration Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_shortcode( 'wc_reg_form_bbloomer', 'bbloomer_separate_registration_form' );
   
function bbloomer_separate_registration_form() {
	if ( is_admin() ) return;
	if ( is_user_logged_in() ) return;
	ob_start();

	do_action( 'woocommerce_before_customer_login_form' );

   // 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

	?>

		<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();

}

PHP Snippet #2: Séparez le code court du formulaire de connexion WooCommerce

Veuillez lire les notes ci-dessus - vous n'aurez peut-être pas du tout besoin de ce shortcode et [woocommerce_my_account] peut suffire à afficher le formulaire de connexion.

Sinon, veuillez ajouter ce shortcode [wc_login_form_bbloomer] à une toute nouvelle page de connexion.

/**
 * @snippet       WooCommerce User Login Shortcode
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_shortcode( 'wc_login_form_bbloomer', 'bbloomer_separate_login_form' );
 
function bbloomer_separate_login_form() {
	if ( is_admin() ) return;
	if ( is_user_logged_in() ) return; 
	ob_start();
	woocommerce_login_form( array( 'redirect' => '/my-account' ) );
	return ob_get_clean();
}