Cómo personalizar y separar las páginas de inicio de sesión y registro en WooCommerce

Ya sea que use WooCommerce o no, es posible que ya sepa que es una de las soluciones de comercio electrónico de código abierto más populares disponibles en la actualidad. Sin embargo, como con cualquier software, tiene ciertas limitaciones e inconvenientes. En este artículo vamos a abordar uno de estos... la incapacidad de personalizar completamente y/o separar las páginas de inicio de sesión y registro.

Una de las solicitudes más comunes de los usuarios de WooCommerce es poder actualizar y personalizar tanto las páginas de inicio de sesión como las de registro. Idealmente, a muchos usuarios también les gustaría poder separar estas páginas en lugar de tenerlas como una página 'todo en uno'. En este artículo, veremos cómo puede lograr ambas cosas... una página de inicio de sesión/registro completamente personalizada Y separada para su sitio web de WooCommerce.

¡Empecemos!

Usar un complemento

Quizás, como era de esperar, la forma más fácil de resolver el dilema de personalización de la página de inicio de sesión/registro es mediante el uso de un complemento. Hemos seleccionado algunos de los mejores que le gustaría considerar usar. Echemos un vistazo a ellos.

Inicio de sesión / registro de Woocommerce Lite

Vaya a su menú de administración de WordPress y en el área "Complementos -> Agregar nuevo", instale y active el complemento.

El complemento Woocommerce Login / Signup Lite es un complemento gratuito que también ofrece una versión premium. Sin embargo, para nuestras necesidades, la versión gratuita debería estar bien. Es bastante fácil de usar. Una vez instalado, podrá crear códigos abreviados que correspondan al tipo de formulario que necesita (por ejemplo, un formulario de inicio de sesión o registro). Luego puede pegar este código abreviado en cualquier página que desee. Los códigos cortos incluyen:

• El [lsphe-login-form] para crear un formulario de inicio de sesión.
• El [lsphe-signup-form] para crear un formulario de registro.
• El [lsphe-header] para crear un formulario que incluirá formularios de inicio de sesión y registro.

Puede ver los códigos cortos disponibles en el área de administración del complemento.

Otra gran característica que ofrece este complemento es la capacidad de crear una ventana emergente de inicio de sesión/registro desde un elemento del menú. Esto se ve muy bien y brinda mayor flexibilidad cuando se trata de ofrecer opciones de inicio de sesión a sus clientes. Para crear uno de estos, siga estos pasos:

• Haga clic en Apariencia > Menús para ingresar a la pantalla de administración del menú.
• Use la flecha en la parte superior derecha para abrir las opciones de la pantalla y habilite las 'clases CSS' en 'Mostrar propiedades del menú avanzado'.

• Cree un elemento de menú de enlace personalizado y proporcione una URL "#". Nombra el elemento como quieras y agrégalo al menú.
• Una vez que aparezca en la lista del menú, abra su sección de acordeón y, en la clase CSS, agregue lo siguiente: phoen-login-popup-open

Para hacer lo mismo para una ventana emergente de registro, siga los mismos pasos y use la phoen-signup-popup-open y para mostrar ambos formularios use la phoen-login-signup-popup-open .

registro de usuario

El complemento de registro de usuario le permite crear formularios frontend utilizando campos de arrastrar y soltar que facilitan el diseño y la reordenación de formularios.

Una vez que haya instalado el complemento, diríjase al 'Registro de usuario', donde puede comenzar a crear su formulario de registro personalizado para su tienda WooCommerce. Notará que hay un formulario preconstruido que tiene un código abreviado que puede copiar y pegar en su sitio web en la ubicación que elija. El formulario se verá así:

Por supuesto, puede editar el formulario o crear uno nuevo muy fácilmente. Simplemente siga las indicaciones dentro del complemento y estará listo y funcionando con un formulario de su elección en muy poco tiempo.

Ventana emergente de inicio de sesión/registro

Otro complemento que vale la pena considerar es la ventana emergente de inicio de sesión/registro (formulario en línea + Woocommerce). En lugar de formularios en la página, el complemento (como sugiere el nombre) lo ayuda a crear formularios de inicio de sesión emergentes que se pueden activar desde un enlace o botón en su sitio web. Las ventanas emergentes pueden ser excelentes y pueden ayudar a ahorrar espacio en la página, así como brindar a las personas la oportunidad de iniciar sesión desde cualquier punto de su sitio sin ser redirigidos a una página específica de inicio de sesión o registro.

Al igual que con todos los complementos enumerados, puede personalizar completamente el diseño de los formularios. Otras características notables incluyen cosas como los inicios de sesión 'Sociales' que permiten a los usuarios iniciar sesión utilizando sus inicios de sesión de Google o Facebook. Esto se hace con un complemento de campo de registro personalizado pagado.

Codifique sus propias páginas de inicio de sesión y registro de WooCommerce

Si no desea utilizar un complemento para crear sus propias páginas de inicio de sesión/registro de WooCommerce, ¿por qué no codificar las suyas propias? Como siempre, la codificación brinda lo último en control sobre las características, el diseño y la función, por lo que es la opción perfecta si necesita lograr una tarea específica o desea evitar la posible sobrecarga que conlleva un complemento.

Para comenzar con este tutorial, primero configure un elemento de menú que se vincule a la página estándar "Mi cuenta" de WooCommerce. Ahora, si visita este enlace de menú en la parte frontal del sitio web, verá el formulario de inicio de sesión o un diseño de dos columnas que contiene tanto el formulario de registro como el formulario de inicio de sesión. Lo cual dependerá de lo que haya configurado en la opción de creación de cuenta de WooCommerce que se muestra a continuación.

Con un cliente SFTP, inicie sesión en su servidor web para poder ver las carpetas de su sitio web. En /wp-content/plugins/woocommerce/templates/myaccount/ encontrará el archivo form-login.php . Abre ese archivo con tu editor favorito.

El código de este archivo incluye los formularios de inicio de sesión y de registro. Puede ver el contenido de este archivo en la página oficial de git. Allí notará que hay una condición if <?php if ( 'yes' === get_option( 'woocommerce_enable_myaccount_registration' ) ) : ?> que se refiere a la opción de administración en la captura de pantalla anterior.

Al usar esto, podremos separar las páginas de inicio de sesión y registro, así como personalizar los formularios con solo algunos ajustes.

Personaliza el formulario de inicio de sesión

Para comenzar, querrá asegurarse de que todos los cambios que realice en el formulario de inicio de sesión/registro se realicen de manera segura para que no se puedan revertir cuando se realicen futuras actualizaciones.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

Si ya inició sesión a través de su cliente SFTP, vaya a wp-content/themes/__my__theme__ . y crea una carpeta 'woocommerce'. Dentro de esta carpeta, cree una copia de las plantillas de Woocommerce. Es importante que mantenga la estructura de archivos pero elimine el subdirectorio /templates/. Por ejemplo, tenemos instalado el tema Twenty Twenty y el form-login.php está en plugins/woocommerce/templates/myaccount/ . Eso significa que para anular el formulario, debemos crear una jerarquía como esta: /themes/twentytwenty/woocommerce/myaccount/ y dentro colocar el archivo form-login.php .

Vamos a probarlo. En este punto, vemos este resultado cuando visitamos la página Cuenta en la parte frontal de nuestro sitio web:

Ahora, si tratamos de cambiar algo en el código dentro del duplicado form-login.php , notaremos que afectará el diseño como se esperaba. Probemos un cambio menor solo para comprobar que funciona. Cambiaremos el texto "Recordarme" a "Recordar mis credenciales" y listo, si actualizamos la página principal, deberíamos ver que la actualización ha tenido efecto.

Inicio de sesión/registro por separado

Estos son los pasos que debe seguir para separar las páginas de inicio de sesión y registro:

Para comenzar daremos de alta una nueva plantilla personalizada. Para hacer esto, cree un nuevo archivo llamado register.php y colóquelo en la carpeta de plantillas. Dentro de este archivo insertaremos el siguiente código:

 <?php /* * Template name: Registration Form */ ?> <?php if(is_user_logged_in()){ wp_redirect(get_permalink(get_option('woocommerce_myaccount_page_id'))); } ?> <?php get_header();?> <?php do_action( 'woocommerce_before_customer_login_form' ); ?> <div class="custom-registration"> <h2><?php esc_html_e( 'Register', 'woocommerce' ); ?></h2> <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' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="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' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="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' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="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-form-row 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> </div> <?php do_action( 'woocommerce_after_customer_login_form' ); ?> <?php get_footer();?>

Lo que hemos hecho inicialmente en este código es definir el nombre de la plantilla en el comentario Nombre de la Template name: Registration Form . Luego verificamos si el usuario ya inició sesión. El resto del código es esencialmente una copia de la parte del contenido de login-form.php que está relacionado con el formulario de registro envuelto dentro de un <div class="custom-registration"> elemento.

A continuación, agregamos una nueva página en la pantalla de páginas de wp-admin y le damos el nombre que queramos. Quizás tendría sentido llamarlo algo así como 'Página de registro'. Luego, asegúrese de seleccionar la plantilla correcta (la que acabamos de crear) usando el selector de plantillas en la barra lateral derecha.

Ahora todo lo que tenemos que hacer es proporcionar una forma para que los usuarios accedan a esta página. Puede crear un elemento de menú 'Registrarse' y vincularlo a la página de registro que acaba de crear o puede editar form-login.php y reemplazar el código de registro con solo un enlace a la página de registro.

Si hiciéramos esto, modificaríamos el archivo form-login.php en themes/twentytwenty/woocommerce/myaccount/ para que el contenido se vea así:

 <?php /** * Login Form * * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 4.1.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } do_action( 'woocommerce_before_customer_login_form' ); ?> <h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <a href="/?p=202">Sign Up</a> <?php do_action( 'woocommerce_after_customer_login_form' ); ?>

El número 202 es el id de la página de registro personalizada. Como recordatorio rápido, puede ver la identificación de la página en la URL cuando está abierta en el editor de back-end.

Ahora, si observa la página desde el frente, debería ver algo como esto cuando visite la página de detalles de la cuenta:

Si hace clic en el enlace Registrarse, debería ser redirigido a la página de registro que creamos como la que se muestra a continuación:

Bastante fácil, ¿no?

Crear un código corto

La página de la cuenta de WooCommerce contiene el código abreviado [woocommerce_my_account] que se puede usar para generar los formularios usando el archivo form-login.php . En esta sección veremos cómo podemos crear nuestros propios códigos cortos, uno para el formulario de inicio de sesión y otro para el formulario de registro que creamos anteriormente.

Código abreviado de registro de WooCommerce

Abra el archivo functions.php de su tema con su editor e inserte las siguientes líneas:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; // OUR REGISTRATION FORM CONTENT } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Al hacer esto, evitamos la necesidad de usar una plantilla personalizada separada. En su lugar, incluiremos el contenido de la plantilla que creamos anteriormente de esta manera:

 // REGISTRATION SHORTCODE function wc_registration_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); 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' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="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' ); ?>&nbsp;<span class="required">*</span></label> <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="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' ); ?>&nbsp;<span class="required">*</span></label> <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="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-form-row 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(); } add_shortcode( 'wc_registration_form', 'wc_registration_form_function' );

Como puede ver, nombramos el Shortcode [wc_registration_form] y envolvimos nuestro HTML en una función ob_start(). De esta manera, activamos el almacenamiento en búfer de salida para que el HTML se almacene y se devuelva como una cadena.

Ahora estamos listos para ingresar a nuestra área de administración y editar nuestra página de registro. Cuando haya abierto la página de registro, simplemente inserte el código abreviado [wc_registration_form]. En este caso, puede usar la plantilla que desee, ya que no dependemos de la plantilla en sí para generar el formulario de registro.

Ahora, cuando abra la página de registro en la parte delantera, debería ver el formulario de registro.

El uso de códigos abreviados nos brinda más flexibilidad que el uso de una página con plantilla, ya que podemos cambiar el diseño de la página general sobre la marcha sin tener que volver a codificar el archivo de plantilla. Esto en sí mismo explica por qué los shortcodes son tan populares en WordPress.

Código abreviado de inicio de sesión de WooCommerce

Ahora que tenemos un código abreviado para el formulario de registro, podemos continuar y crear uno para el formulario de inicio de sesión. Una vez más, abra el archivo functions.php e inserte el siguiente código:

 // LOGIN SHORTCODE function wc_login_form_function() { if ( is_admin() ) return; if ( is_user_logged_in() ) return; ob_start(); ?> <form class="woocommerce-form woocommerce-form-login login" method="post"> <?php do_action( 'woocommerce_login_form_start' ); ?> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?> </p> <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"> <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label> <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" autocomplete="current-password" /> </p> <?php do_action( 'woocommerce_login_form' ); ?> <p class="form-row"> <label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme"> <input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span> </label> <?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?> <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button> </p> <p class="woocommerce-LostPassword lost_password"> <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a> </p> <?php do_action( 'woocommerce_login_form_end' ); ?> </form> <?php return ob_get_clean(); } add_shortcode( 'wc_login_form', 'wc_login_form_function' );

Ahora, en cuanto a la página de registro, puede continuar y crear una página de 'Inicio de sesión', insertar el código corto [wc_login_form] y listo.

Si desea llevar las cosas un paso más allá y dictar la página a la que se dirige a los usuarios cuando cierran sesión en su sitio, puede usar un wp_logout como este:

 add_action('wp_logout','my_redirect_after_logout'); function my_redirect_after_logout(){ wp_redirect( '/?p=207' ); exit(); }

La URL /?p=207 utilizada anteriormente hace referencia al ID de la página a la que queremos dirigir a las personas al cerrar la sesión. Sustituya esto por el ID de la página de cierre de sesión elegida.

¡Una nota importante!

Vale la pena recordar que cualquiera puede visitar sus nuevas páginas de inicio de sesión y/o registro... ¡y por cualquiera nos referimos a los bots también! Por lo tanto, es muy importante que proteja su sitio web de registros falsos e inicios de sesión de fuerza bruta. Para obtener más información sobre cómo proteger su sitio, le recomendamos encarecidamente que se tome el tiempo de leer nuestra guía sobre Cómo proteger su sitio web de WordPress y también Cómo lidiar con la actividad de spam en su sitio web de WordPress.

Esperamos que este artículo le haya dado algunas ideas sobre cómo puede volver a imaginar sus páginas de registro e inicio de sesión de WooCommerce y le haya brindado las herramientas para realizar cambios donde lo considere oportuno.