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 cuenta. Esto facilita hacer 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 completa de la cuenta de WooCommerce 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

Parte 1: Diseño de la página de 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 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 Shortcode 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:

01
<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)
  • 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 de letras de 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
  • Encabezado 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 algo de 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 cuenta

Dado que 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:

01
02
03
04
05
06
07
08
09
10
11
12
.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 obtener información dinámica del producto. 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:

01
&amp;amp;lt;h2&amp;amp;gt;Special Product Offer&amp;amp;lt;/h2&amp;amp;gt;

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 la 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
  • Acolchado: 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): 25px arriba, 25px abajo, 25px izquierda, 25px 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

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 CSS anterior.

01
02
03
04
05
06
.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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!