Los módulos WOO de Divo pueden ser útiles para presentar una sección de productos recomendados en cualquier lugar de su sitio web, incluidas otras páginas de WooCommerce, como la página de la cuenta. Esto facilita proporcionar a los usuarios ofertas especiales incluso cuando navegan en la información de su cuenta. En este tutorial, diseñaremos una página completa de la cuenta de WooCommerce de cero complementado con una sección práctica con los productos que utilizan los módulos WOO. Incluso incluiremos algunos fragmentos CSS que mostrarán la sección del producto presentada solo cuando el usuario esté conectado.
Vamos a empezar. Eche 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 se conecta.

Aquí está la página de la cuenta después de que un usuario sea autenticado. Como puede ver, la sección de los productos presentados aparece bajo el contenido de la página de la cuenta.

Descargue de forma gratuita el aspecto de la cuenta de producto recomendada para poner su mano en el aspecto de la cuenta en este tutorial, primero deberá descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Instale y active el complemento WooCommerce. Si esta es la primera vez que configura WooCommerce, deberá ejecutar el experto en configuración básica para preparar su tienda. Después de haber terminado, está listo para agregar los nuevos productos.
Cree algunos productos si aún no lo tiene. 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 producto recomendada en el Div.
Parte 1: Diseño de la página Cuenta Activar Divi Builder en la página de cuentas de WooCommerce Una vez que WooCommerce esté instalado y activado, la cuenta de WooCommerce se creará automáticamente para editar la página de la cuenta, puede encontrarlo desde el tablero de WordPress mediante el acceso a las páginas> Todas las páginas. Luego, vaya con el mouse a través de la página de la cuenta y haga clic en “Editar”. Luego notará el código corto de WooCommerce que se utiliza para generar el contenido de la página de la cuenta. Continúe y haga clic para usar Divic Builder.
El código corto se informará y se colocará en un módulo de texto. Ahora haga clic para usar Divic Builder en el front-end.

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

Color izquierdo del gradiente de fondo: # AD52B7

Color derecho del gradiente de fondo: RGBA (255,255,255,0,66)
Dirección de gradiente: 90 grados
Posición inicial: 33%
Posición final: 0%
Coloque el gradiente sobre la imagen de fondo: sí
Luego agregue una imagen de fondo con un ancho de al menos 1920 PX.
Agregue la apuesta 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 icono Gray Plus en el módulo de texto actual que contiene el código corto de WooCommerce.
Luego, apriete el módulo de texto de código corto de wooCommerce y actualice la configuración de la siguiente manera: contenido del cuerpo:

mi cuenta

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

Fuente del título: aviso
Título Fuente de peso: Bold
TOMA DE TEXTO DE COLOR: # 3F214F
Tamaño de texto ante: 90 PX (escritorio), 56 PX (tableta), 36 PX (teléfono)
Distancia entre las letras del encabezado: 5 PX
Personalice el contenido del código corto, incluso la información de la página de la cuenta de WooCommerce, se genera mediante un código corto, sin embargo, podemos orientar algunos de estos 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 Texto del párrafo, actualice lo siguiente:
Texto de fuente: Roboto

Tamaño de texto de texto: 16 PX
En la pestaña del enlace, actualice lo siguiente:
Enlace de texto en color: # AD52B7

En la pestaña Lista desordenada, actualice lo siguiente:
Tamaño de texto de la lista desordenada: 26 PX (escritorio), 18 PX (tableta)
Espaciado de letras desordenadas: 2 PX
Línea de altura Lista desordenada: 2EM
Alentado del elemento de lista desordenado: 0.01 PX
Incluso si no podemos verlo en este momento, aparecerá un título de H2 en el formulario de autenticación siempre que un usuario acceda a la página de la cuenta sin estar conectado. Para apuntar al encabezado H2, actualice lo siguiente:
2 Sección de fuentes: Roboto

Título 2 Dimensión de texto: 56 PX (escritorio), 32 PX (tableta)
Luego agregue algunos rellenos alrededor del módulo de texto:
Revestimiento: 3% más, 3% inferior, 3% izquierda, 3% derecho

Finalmente, le dé al módulo de texto una clase CSS personalizada.
Clase CSS: estilo de cuenta personalizado

Con esta clase, podemos apuntar al módulo con algunos CSS externos para dar algunos toques finales a los elementos de la información de la cuenta que no pudimos dirigir con la configuración de los módulos de texto. Agregar CSS externo para estilizar otros elementos de la información de la cuenta ya que tenemos la clase CSS en nuestro lugar, podemos usar CSS externo para estilizar otra información de la cuenta generada por el código corto. Esto no es necesario si desea controlar estos elementos desde la configuración de personalización de temas. Por ejemplo, el color de los lazos y los botones y los fondos de notificación se heredará del color secundario que ha seleccionado en los temas del tema. Para enfatizar los colores de ciertos elementos para esta página, abra la configuración de la página y agregue las siguientes páginas CSS Custom: .Custom-Account Style .WooOcommerce-Button.Button, .Custom-Account Style .WooOcommerce .WooCommerce-form.
Color: #ffffff! Importante;

Color de fondo: #9452B7;
Color de borde: #9452b7;
}
.Custom-count Style .wooCommerce-Button.Button: Hover {
Color de fondo: #3F214F;
}
.
Color de fondo: #3F214F;
}
El ancho de la fila después del código corto para el código WooCommerce del módulo de texto se guarda, guarde la configuración y abra la configuración de la fila. Actualice el ancho máximo de la siguiente manera:
Ancho máximo: 1250 PX
Parte 2: Diseño de la sección del producto recomendada ahora que se completa la información principal de la página de la cuenta, ahora podemos diseñar la sección de productos presentados. Aquí utilizaremos los módulos de WooCommerce de la división para extraer dinámicamente la información del producto. Luego agregaremos algunos fragmentos CSS para mostrar los productos siempre que el usuario esté conectado. Creando la nueva sección y filas para comenzar, cree una nueva sección habitual. Luego agregue una fila con una columna a la sección.
Antes de agregar un módulo, copie la configuración de la sección y la configuración ordinaria utilizada para diseñar la página de cuenta anterior y pegue a la nueva sección y fila que acabamos de agregar.

Agregue el título con el modo de texto similar al que hemos hecho para el encabezado principal de la página, crearemos un nuevo encabezado para la sección del producto. Para hacer esto, agregue un nuevo módulo de texto en una fila con una columna y actualice lo siguiente: contenido del cuerpo: & amp; lt; h2 & amp; gt; oferta especial de producto & amp; lt;/h2 & amp; gt;

Fuente del Título 2: aviso

Título 2 Fuente de peso: Bold

Rúbrica 2 Color de texto: # 3F214F

Título 2 Dimensión de texto: 56 PX (escritorio), 36 PX (tableta)

Rúbrica 2 Espaciación de litros: 5 PX
Agregue la segunda fila y luego agregue una nueva fila con una estructura de columna 1/3 2/3.
Agregue el módulo de imágenes WOO a la columna izquierda, agregue un módulo de imágenes WOO.
Luego seleccione el producto que desea presentar desde la caída del producto.
Luego actualice el estilo de la insignia de venta de la siguiente manera:

Insignia de venta de color: # F1BE51

Vendo Fuente de la insignia: Roboto

Insignia de venta de venta de fuentes: TT

Venta del espacio de la carta: 5 PX
La altura de la línea de la insignia de venta: 1.3 divisor hecho en la columna derecha, agregue un módulo divisor y actualice la configuración de la siguiente manera:
Color de línea: #dddddd
Peso del divisor: 3 PX
Marja: 10 px abajo
Agregue el módulo de título WOO en el módulo Divisor, agregue un módulo de título WOO.

Luego agregue el mismo producto que el que se agregó al módulo de imágenes WOO.
Luego actualice la configuración de diseño de la siguiente manera:
Nivel de encabezado del título: H3
Título de la fuente: Roboto

Título Tamaño del texto: 38 PX

Agregue el módulo de precio de WOO y luego, agregue un módulo de precio WOO con el mismo producto.

Luego actualice la configuración de diseño de la siguiente manera:
Precio de fuente: Roboto
Color de texto de precio: # AD52B7
Agregue el módulo de descripción de Woo en el módulo de precio 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
Forro: 20 px arriba, 20 px abajo, 20 px izquierda, 20 px a la derecha

Agregue el módulo Agregar al carrito en el módulo de descripción de Woo, agregue el módulo Woo Agregar al CART y seleccione el mismo producto.

Luego actualice la configuración de la siguiente manera:

Use estilos personalizados para el botón: Sí
El color del texto del botón: #ffffff
El color de fondo del botón: # AD52B7

Actualice la configuración de la fila y luego actualice la configuración de la fila de la siguiente manera:

Color de fondo (tableta): #ffffff
Ancho máximo: 1250 PX
Relleno (escritorio): 0 px en la parte superior, 0 px en la parte inferior
Revestimiento (tableta): 25 px arriba, 25 px abajo, 25 px izquierda, 25 px a la derecha

Luego abra la configuración de la columna izquierda y actualice lo siguiente:
Color de fondo: # 3F214F
Forro: 25 px arriba, 25 px abajo, 25 px izquierda, 25 px a la derecha
Agregar varios productos El truco para agregar más productos a esta sección recomendada es la duplicación de la fila que contiene los elementos de WooCommerce que componen el producto presentado. Luego abra el módulo de imágenes WOO para el interior del nuevo duplicado y haga clic para usar y reemplazar en la opción del producto. Luego use las opciones de búsqueda y reemplazo para reemplazar la selección del producto con un nuevo producto. Asegúrese de reemplazar el producto para todas las opciones de producto en esta fila. Luego haga clic en el botón de reemplazo.
Después de eso, los 5 módulos WOO compartirán automáticamente el mismo nuevo producto.

Agregue un ID CSS para ocultar a los usuarios en la sección de productos presentados que no están conectados, debemos agregar una clase CSS a la sección del producto de la siguiente manera:
Clase CSS: solo conectado
Agregue CSS externo después de que la clase CSS esté en su lugar, abra la configuración de la página y agregue los siguientes CSS personalizados justo debajo del fragmento CSS anterior … registrado en solo {
Pantalla: ninguno;

}

.Gogged-in .logged-in-solo {

Bloqueo de pantalla;
}

Este código ocultará la sección de forma predeterminada y luego mostrará la sección después de que un usuario se conecta a su sitio de WordPress. El resultado final es la página de la cuenta antes de que un usuario se conecta.
Aquí está la página de la cuenta después de que un usuario se conecta.