Cómo crear páginas separadas de inicio de sesión y registro en WooCommerce

Publicado: 2021-05-18

Páginas separadas de inicio de sesión y registro en WooCommerce ¿Está buscando una manera de separar mediante programación las páginas de inicio de sesión y registro? Este breve tutorial le proporcionará una solución fácil.

Es posible que desee enviar a los clientes desconectados a una página de inicio de sesión y a los clientes no registrados a una página separada. De forma predeterminada, WooCommerce muestra el formulario de inicio de sesión y el formulario de registro en la misma página.

Vale la pena mencionar que la página Mi cuenta de WooCommerce se muestra con el código abreviado [woocommerce_my_account].

Tener los formularios de inicio de sesión y registro en la misma página puede no ser una buena idea si desea utilizar páginas de destino o páginas de ventas con un objetivo específico, como el registro de usuarios. Esto significa que no se requiere el formulario de inicio de sesión en esta página.

Cómo crear páginas separadas de inicio de sesión y registro en WooCommerce

En este breve tutorial, le mostraremos cómo separar las páginas de inicio de sesión y registro. Le mostraremos cómo crear dos nuevos códigos cortos, uno para el formulario de inicio de sesión y otro para el formulario de registro. Estos códigos abreviados se pueden usar en cualquier parte de su sitio.

Veamos cómo puedes lograr esto.

Pasos para crear páginas separadas de inicio de sesión y registro en WooCommerce

Antes de continuar, es importante tener en cuenta que el contenido utilizado para crear el shortcode se copia de los archivos de plantilla de WooCommerce. Esto significa que cuando WooCommerce publica cambios en estos archivos durante una actualización, debe cambiar algunas partes del código.

Siga leyendo, ya que también le mostraremos cómo usar los códigos cortos.

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que creará el código abreviado de la página de registro.
Agregue el siguiente código al archivo 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();

}

El segundo código abreviado es [wc_login_form_bbloomer]. Debe agregarlo a una página nueva. Agregue el siguiente código en el mismo archivo:

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

}

Cómo usar los códigos cortos

Como se mencionó anteriormente, el código abreviado [woocommerce_my_account] muestra la página Mi cuenta. Si desea mantener el formulario de inicio de sesión y el panel de la página de la cuenta mientras está conectado en la misma página, debe usar el primer código abreviado: [woocommerce_my_account] .

Si desea tener inicio de sesión + mi cuenta y una página de registro separada:

[wc_reg_form_njengah] en la página de registro
[woocommerce_my_account] en la página de inicio de sesión + cuenta

Si desea tener un inicio de sesión, registro y páginas de mi cuenta independientes:

wc_reg_form_njengah] en la página de registro
[wc_login_form_njengah] en la página de inicio de sesión
[woocommerce_my_njengah] en la página Mi cuenta

Sin embargo, debe deshabilitar "Permitir que los clientes creen una cuenta", como se muestra a continuación: cuentas

Conclusión

Eso es todo lo que necesita hacer para separar las páginas de inicio de sesión y registro. Recuerda copiar y pegar el shortcode en una nueva página.

Recomendamos crear un tema hijo. Esto asegurará que sus cambios no se pierdan durante una actualización.

Esperamos que esta publicación haya ayudado a resolver su problema.

Cómo crear páginas separadas de inicio de sesión y registro en WooCommerce

Cómo crear páginas separadas de inicio de sesión y registro en WooCommerce

Pasos para crear páginas separadas de inicio de sesión y registro en WooCommerce

Cómo usar los códigos cortos

Conclusión

Artículos similares