Cómo crear una página de cuenta de WooCommerce con una sección de producto destacado para usuarios que han iniciado sesión

Los módulos Woo de Divi pueden ser útiles para mostrar una sección de productos destacados en cualquier lugar de su sitio web, incluidas otras páginas de WooCommerce como la página de la cuenta. Esto facilita la realización de ofertas especiales a los usuarios incluso cuando están navegando por la información de su cuenta.

En este tutorial, vamos a diseñar una página de cuenta de WooCommerce completa desde cero con una práctica sección de productos destacados utilizando módulos Woo. Incluso incluiremos algunos fragmentos de CSS que mostrarán la sección de productos destacados solo cuando el usuario haya iniciado sesión.

Empecemos.

Vistazo

Aquí hay un vistazo rápido a la página de la cuenta que crearemos en este tutorial.

Aquí está la página de la cuenta antes de que un usuario inicie sesión.

Aquí está la página de la cuenta después de que un usuario inicia sesión. Como puede ver, la sección de productos destacados se muestra debajo del contenido de la página de la cuenta.

Descargue GRATIS el diseño de la página de la cuenta del producto destacado

Para poner sus manos en el diseño de la página de la cuenta de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
2. Instale y active el complemento WooCommerce. Si es la primera vez que configura WooCommerce, deberá ejecutar el asistente de configuración básica para preparar su tienda. Una vez hecho esto, estará listo para agregar sus nuevos productos.
3. Crea algunos productos si aún no tienes ninguno. Para obtener más información sobre cómo agregar un nuevo producto, consulte este tutorial.

Después de eso, estará listo para comenzar a diseñar una sección de productos destacados en Divi.

Parte 1: Diseño de la página de la cuenta

Habilite Divi Builder en la página de la cuenta de WooCommerce

Una vez que WooCommerce esté instalado y activado, la página de la cuenta de WooCommerce se creará automáticamente para usted. Para editar la página de la cuenta, puede encontrarla en el Panel de WordPress yendo a Páginas> Todas las páginas. Luego, coloque el cursor sobre la página de la cuenta y haga clic en "editar".

A continuación, notará el código corto de WooCommerce que se está utilizando para generar el contenido de la página de la cuenta. Continúe y haga clic para usar Divi Builder.

El código abreviado se transferirá y se colocará en un módulo de texto. Ahora haga clic para usar Divi Builder en la interfaz.

La configuración de la sección

Lo primero que vamos a hacer es agregar un fondo a la sección. Abra la configuración de la sección y actualice lo siguiente:

• Color de degradado de fondo a la izquierda: # ad52b7
• Gradiente de fondo Color derecho: rgba (255,255,255,0.66)
• Dirección del gradiente: 90 grados
• Posición inicial: 33%
• Posición final: 0%
• Colocar degradado sobre la imagen de fondo: SÍ

Luego agregue una imagen de fondo que tenga al menos 1920 px de ancho.

Agregar encabezado con un nuevo módulo de texto

Para agregar el encabezado de la página principal (h1), agregue un nuevo módulo de texto haciendo clic en el ícono gris más debajo del módulo de texto actual que contiene el código corto de WooCommerce.

Luego, arrástrelo sobre el módulo de texto del código corto de WooCommerce y actualice la configuración de la siguiente manera:

Contenido del cuerpo:

<h1>My Account</h1>

En la pestaña H1, actualice los siguientes estilos de texto de encabezado:

• Fuente de encabezado: Aviso
• Peso de la fuente del encabezado: negrita
• Color del texto del encabezado: # 3f214f
• Tamaño del texto del encabezado: 90 px (escritorio), 56 px (tableta), 36 px (teléfono)
• Espaciado entre letras del encabezado: 5px

Personalizar contenido de shortcode

Incluso la información de la página de la cuenta de woocommerce se genera mediante un código abreviado, aún podemos apuntar a algunos de esos elementos utilizando la configuración del módulo de texto.

Abra la configuración del módulo de texto que contiene el código corto y actualice lo siguiente:

• Color de fondo: rgba (255,255,255,0.9)

En la pestaña de texto del párrafo, actualice lo siguiente:

• Fuente de texto: Roboto
• Tamaño del texto del texto: 16px

En la pestaña Enlace, actualice lo siguiente:

• Color del texto del enlace: # ad52b7

En la pestaña de lista desordenada, actualice lo siguiente:

• Tamaño de texto de lista desordenado: 26px (escritorio), 18px (tableta)
• Espaciado de letras de lista desordenado: 2px
• Altura de línea de lista desordenada: 2em
• Sangría de elemento de lista desordenado: 0.01px

Aunque no podemos verlo en este momento, habrá un encabezado h2 en el formulario de inicio de sesión cada vez que un usuario visite la página de la cuenta sin haber iniciado sesión. Para apuntar a ese encabezado h2, actualice lo siguiente:

• Fuente del encabezado 2: Roboto
• Tamaño del texto del encabezado 2: 56 px (escritorio), 32 px (tableta)

Luego agregue algo de relleno alrededor del módulo de texto:

• Relleno: 3% arriba, 3% abajo, 3% izquierda, 3% derecha

Finalmente, dele al módulo de texto una clase CSS personalizada.

• Clase CSS: estilo de cuenta personalizada

Con esta clase, podemos apuntar al módulo con algo de CSS externo para dar algunos toques finales a los elementos de información de la cuenta que no pudimos apuntar con la configuración de los módulos de texto.

Adición de CSS externo para diseñar otros elementos de información de la cuenta

Dado que tenemos nuestra clase CSS en su lugar, podemos usar CSS externo para diseñar otros elementos de información de la cuenta generados por el código corto. Esto no es necesario si desea controlar estos elementos desde la Configuración del personalizador de temas. Por ejemplo, el color de los enlaces, botones y fondos de notificación se heredará del color secundario que haya seleccionado en la Configuración del personalizador de temas.

Para diseñar los colores de ciertos elementos directamente para esta página, abra la configuración de la página y agregue el siguiente CSS personalizado a la página:

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

Ancho de fila

Después de diseñar la información del código corto de woocommerce del módulo de texto, guarde la configuración y abra la configuración de la fila. Actualice el ancho máximo de la siguiente manera:

• Ancho máximo: 1250px

Parte 2: Diseño de la sección de productos destacados

Ahora que la información principal de la página de la cuenta está terminada, podemos diseñar la sección de productos destacados. Aquí es donde utilizaremos los módulos WooCommerce de Divi para obtener información del producto de forma dinámica. Luego, agregaremos algunos fragmentos de CSS para mostrar los productos cada vez que el usuario inicie sesión.

Crear la nueva sección y fila

Para comenzar, cree una nueva sección regular.

Luego agregue una fila de una columna a la sección.

Antes de agregar un módulo, copie la configuración de la sección y la configuración de la fila utilizada para el diseño de la página de nuestra cuenta anterior y péguelas en la nueva sección y fila que acabamos de agregar.

Agregar encabezado con módulo de texto

De manera similar a lo que hicimos para el encabezado principal de la página, vamos a crear un nuevo encabezado para la sección de productos destacados. Para hacer esto, agregue un nuevo módulo de texto a la fila de una columna y actualice lo siguiente:

Contenido del cuerpo:

<h2>Special Product Offer</h2>

• Fuente del título 2: Mensaje
• Peso de fuente del encabezado 2: Negrita
• Color del texto del encabezado 2: # 3f214f
• Tamaño del texto del encabezado 2: 56 px (escritorio), 36 px (tableta)
• Encabezado 2 espaciado de letras: 5px

Agregar segunda fila

A continuación, agregue una nueva fila con una estructura de columnas de 1/3 2/3.

Agregar módulo de imágenes de Woo

En la columna de la izquierda, agregue un módulo Woo Images.

Luego, seleccione el producto que desea que aparezca en el menú desplegable de productos.

Luego actualice el estilo de la insignia de oferta de la siguiente manera:

• Color de la insignia de venta: # f1be51
• Fuente de insignia de venta: Roboto
• Estilo de fuente de insignia de venta: TT
• Espaciado entre letras de la insignia de venta: 5px
• Altura de la línea de la insignia de venta: 1.3em

Agregar divisor

En la columna de la derecha, agregue un módulo divisor y actualice la configuración de la siguiente manera:

• Color de línea: #dddddd
• Peso del divisor: 3px
• Margen: 10px inferior

Agregar módulo de título Woo

Debajo del módulo divisor, agregue un módulo de título Woo.

Luego agregue el mismo producto que el agregado en el módulo de imágenes de cortejo.

Luego actualice la configuración de diseño de la siguiente manera:

• Nivel de encabezado del título: H3
• Fuente del título: Roboto
• Tamaño del texto del título: 38px

Agregar módulo de precio Woo

A continuación, agregue un módulo de precios Woo con el mismo producto.

Luego actualice la configuración de diseño de la siguiente manera:

• Fuente de precio: Roboto
• Color del texto del precio: # ad52b7

Agregar módulo de descripción de Woo

En el módulo de precio de Woo, agregue un módulo de descripción de Woo.

Luego agregue el mismo producto al módulo de descripción de woo.

Luego actualice la configuración de la siguiente manera:

• Color de fondo: #eeeeee
• Relleno: 20px arriba, 20px abajo, 20px izquierda, 20px derecha

Agregue el módulo Agregar al carrito

En el módulo de descripción de Woo, agregue el módulo Woo Add to Cart y seleccione el mismo producto.

Luego actualice la configuración de la siguiente manera:

• Usar estilos personalizados para el botón: SÍ
• Color del texto del botón: #ffffff
• Color de fondo del botón: # ad52b7

Actualizar la configuración de la fila

Luego actualice la configuración de la fila de la siguiente manera:

• Color de fondo (tableta): #ffffff
• Ancho máximo: 1250px
• Relleno (escritorio): 0px arriba, 0px abajo
• Relleno (tableta): 25px arriba, 25px abajo, 25px izquierda, 25px derecha

A continuación, abra la configuración de la columna izquierda y actualice lo siguiente:

• Color de fondo: # 3f214f
• Relleno: 25px arriba, 25px abajo, 25px izquierda, 25px derecha

Agregar más productos

El truco para agregar más productos a esta sección destacada es duplicar la fila que contiene los elementos de WooCommerce que componen el producto destacado. Luego abra el módulo Woo Images para el interior de la nueva fila duplicada y haga clic para usar Buscar y reemplazar en la opción Producto.

Luego, use las opciones de buscar y reemplazar para reemplazar la selección de productos con un nuevo producto de su elección. Asegúrese de reemplazar el producto para todas las opciones de productos dentro de esta fila. Luego haga clic en el botón Reemplazar.

Después de eso, los 5 módulos woo compartirán automáticamente el mismo producto nuevo.

Agregar ID de CSS

Para ocultar los usuarios de la sección de productos destacados que no han iniciado sesión, debemos agregar una clase CSS a la sección de productos destacados de la siguiente manera:

• Clase CSS: solo para iniciar sesión

Agregar CSS externo

Una vez que la clase CSS esté en su lugar, abra la configuración de la página y agregue el siguiente CSS personalizado justo debajo de nuestro fragmento de CSS anterior.

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

Este código ocultará la sección de forma predeterminada y luego mostrará la sección una vez que un usuario inicie sesión en su sitio de WordPress.

Resultado final

Aquí está la página de la cuenta antes de que un usuario inicie sesión.

Aquí está la página de la cuenta después de que un usuario inicia sesión.

Pensamientos finales

Tener una sección de productos destacados para la página de la cuenta de WooCommerce es una excelente manera de promover nuevas ofertas de productos en una ubicación específica en su sitio web. Divi facilita la personalización de la página de una cuenta de WooCommerce con un diseño completamente único en minutos. Además, los módulos Woo de Divi facilitan la creación de secciones de productos destacados. Además, tener los productos destacados solo se muestran a los usuarios que han iniciado sesión agrega valor e incentiva la oferta aún más.

Con suerte, esto le dará un poco de inspiración al diseñar su próxima página de cuenta en Divi.

Para obtener más información, obtenga más consejos sobre cómo diseñar páginas de cuentas en Divi. Y no olvide consultar la documentación completa sobre los módulos Woo para descubrir aún más posibilidades.

Espero tener noticias tuyas en los comentarios.

¡Salud!