Cómo crear una página de cuenta de WooCommerce con una sección de productos destacados para usuarios registrados


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

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

Empecemos.

Vistazo

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

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

sección de productos destacados divi

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

sección de productos destacados divi

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

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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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 Divi Theme instalado (o el complemento Divi Builder si no usa el tema Divi).
  2. Instala y activa 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, está 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 cuenta

Active 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 pase el cursor sobre la página Cuenta y haga clic en "editar".

sección de productos destacados divi

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.

sección de productos destacados divi

El shortcode se transferirá y se colocará en un módulo de texto. Ahora haga clic para usar Divi Builder en el Front End.

sección de productos destacados divi

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:

  • Gradiente de fondo Color izquierdo: # ad52b7
  • Gradiente de fondo derecho Color: rgba (255,255,255,0.66)
  • Dirección de degradado: 90 grados
  • Posición de inicio: 33%
  • Posición final: 0%
  • Coloque el gradiente sobre la imagen de fondo: SÍ

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

sección de productos destacados divi

Agregar encabezado usando 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 abreviado de WooCommerce.

sección de productos destacados divi

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

Contenido del cuerpo:

My Account

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)
  • Espacio entre letras de encabezado: 5px

sección de productos destacados divi

Personalizar contenido de shortcode

Incluso si la información de la página de la cuenta de WooCommerce está siendo generada por un código corto, todavía podemos apuntar a algunos de esos elementos usando la configuración del módulo de texto.

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

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

sección de productos destacados divi

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

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

sección de productos destacados divi

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 desordenada: 26 px (escritorio), 18 px (tableta)
  • Espaciado entre letras de la lista desordenada: 2px
  • Altura de línea de lista desordenada: 2em
  • Sangría de elemento de lista desordenada: 0.01px

sección de productos destacados divi

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 orientar ese encabezado h2, actualice lo siguiente:

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

sección de productos destacados divi

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

  • Relleno: 3% superior, 3% inferior, 3% izquierda, 3% derecha

sección de productos destacados divi

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

  • Clase CSS: estilo de cuenta personalizada

sección de productos destacados divi

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

Agregar CSS externo al estilo de otros elementos de información de la cuenta

Como tenemos nuestra clase CSS en su lugar, podemos usar CSS externo para diseñar otros elementos de información de cuenta generados por el shortcode. Esto no es necesario si desea controlar estos elementos desde la Configuración del personalizador de temas. Por ejemplo, el color de los enlaces y botones y los fondos de notificación se heredarán 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áx .: 1250px

sección de productos destacados divi

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

Ahora que la información de la página principal de la cuenta está terminada, ahora podemos diseñar la sección de productos destacados. Aquí es donde usaremos los Módulos WooCommerce de Divi para extraer la información del producto dinámicamente. 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.

sección de productos destacados divi

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

sección de productos destacados divi

Antes de agregar un módulo, copie la configuración de sección y la configuración de 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.

sección de productos destacados divi

Agregar encabezado con módulo de texto

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>

sección de productos destacados divi

  • Título 2 Fuente: Aviso
  • Título 2 Peso de la fuente: negrita
  • Título 2 Color del texto: # 3f214f
  • Encabezado 2 Tamaño del texto: 56 px (escritorio), 36 px (tableta)
  • Encabezado 2 letras espaciadas: 5px

sección de productos destacados divi

Agregar segunda fila

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

sección de productos destacados divi

Añadir módulo de imágenes Woo

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

sección de productos destacados divi

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

sección de productos destacados divi

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

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

sección de productos destacados divi

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
  • Divisor de peso: 3px
  • Margen: fondo de 10px

sección de productos destacados divi

Añadir Woo Title Module

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

sección de productos destacados divi

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

sección de productos destacados divi

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

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

sección de productos destacados divi

Añadir módulo de precios Woo

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

sección de productos destacados divi

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

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

sección de productos destacados divi

Añadir módulo de descripción Woo

En el Módulo de precios de Woo, agregue un Módulo de descripción de Woo.

sección de productos destacados divi

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

sección de productos destacados divi

Luego actualice la configuración de la siguiente manera:

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

sección de productos destacados divi

Agregue el módulo Agregar al carrito

En el Módulo de descripción de Woo, agregue el Módulo Agregar al carrito de Woo y seleccione el mismo producto.

sección de productos destacados divi

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

sección de productos destacados divi

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áx .: 1250px
  • Relleno (escritorio): 0px arriba, 0px abajo
  • Acolchado (tableta): 25 px arriba, 25 px abajo, 25 px izquierda, 25 px derecha

sección de productos destacados divi

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

  • Color de fondo: # 3f214f
  • Relleno: 25 px arriba, 25 px abajo, 25 px izquierda, 25 px 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 conforman el producto destacado. Luego abra el módulo Woo Images dentro de la nueva fila duplicada y haga clic para usar Buscar y reemplazar en la opción Producto.

sección de productos destacados divi

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 producto dentro de esta fila. Luego haga clic en el botón Reemplazar.

sección de productos destacados divi

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

sección de productos destacados divi

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 inicio de sesión

sección de productos destacados divi

Agregar CSS externo

Después de 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 CSS anterior.

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

sección de productos destacados divi

Este código ocultará la sección de forma predeterminada y luego la mostrará 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.

sección de productos destacados divi

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

sección de productos destacados divi

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 una página de cuenta de WooCommerce con un diseño completamente único en minutos. Y, los Módulos Woo de Divi hacen que crear secciones de productos destacados sea muy fácil. Además, tener los productos destacados solo se muestra a los usuarios que han iniciado sesión agrega valor e incentiva la oferta aún más.

Esperemos que esto te inspire un poco al diseñar tu próxima página de cuenta en Divi.

Para más información, aprenda más consejos sobre diseño de páginas de cuenta en Divi. Y no olvides echarle un vistazo completo documentación sobre módulos Woo para descubrir aún más posibilidades.

Espero tener noticias suyas en los comentarios.

¡Salud!