Login y registro emergente (Popup) para Woocommerce

En este tutorial aprenderemos a colocar un Login y registro emergente (Popup) para Woocommerce. Conseguiremos darle un toque distinto a nuestra tienda de WooCommerce, además de ahorrarnos un paso al no tener que ir a la página de Login. Podremos personalizarlo de diferentes formas e incluso añadirle una imagen corporativa.

Cómo crear un Login o registro Popup para Woocommerce

Para ello vamos a utilizar un plugin que funciona muy bien y además es gratis, el plugin se llama WooCommerce Login Popup and ShortcodesGracias a este sencillo plugin no hará falta desplazarnos a otra página para loguearnos, si no que lo haremos mediante una ventana emergente. Ganamos fluidez y velocidad para el usuario. Mejoraremos la usabilidad de nuestra tienda WooCommerce reduciendo pasos.

Pasos a seguir:

1 – Instalar y activar el plugin WooCommerce Login Popup and Shortcodes.

WooCommerce-Login-Popup-and-Shortcodes

 

2 – Una vez lo tengas instalado y activado vamos a “PLUGINS > PLUGINS INSTALADOS>

Buscamos el plugin y pulsamos sobre “SETTINGS”, veremos un panel como el siguiente:

login-registro-popup-woocommerce

3 – Configuraciones varias:

Si pulsamos sobre “Enable Popup” pondremos en funcionamiento el plugin. Ahora vamos a ver diferentes opciones, una para que funcione el LOGIN POPUP WooCommerce en el menú principal y otra para que funcione el REGISTRO POPUP WooCommerce.

 

3.1 LOGIN POPUP WooCommerce en menú principal

Vamos a APARIENCIA > MENÚS > y nos vamos a enlaces  personalizados:

Allí añadimos un nuevo enlace donde introduciremos # en la URL y LOGIN en el texto de enlace y finalmente pulsamos sobre “añadir al menú”.

Una vez lo tengamos añadido activaremos en “Opciones de pantalla” la opción de añadir clases CSS.

clases-css-woocommerce-login-popup

Ahora ya podremos colocar la clase woo-login-popup-sc-open en el enlace del menú:

login-menu-woocommerce-popup

Ahora al pulsar sobre LOGIN se activará la ventana emergente para loguernas en la web.

 

3.2 REGISTRO POPUP en menú principal:

Crearemos otro enlace personalizado tal y como explico antes, con la misma clase CSS que antes, pero en cambio en la URL en vez de dejarlo con #, introduciremos #woo-login-popup-sc-register 

registro-popup-woocommerce

Gracias a ello conseguiremos que puedan registrarse mediante un POPUP. (Evidentemente tenéis que tener activa la posibilidad de registrarse en WooCommerce)

Os dejo un video con el proceso:

Facebook
Google+
Twitter
LinkedIn