Cómo usar contenido dinámico para crear un acordeón de información de producto WooCommerce en Divi


Al crear una página de producto en Divi, podemos utilizar el módulo de acordeón para mostrar información del producto utilizando contenido dinámico. Esto le dará a las páginas de productos un diseño único y también preservará un valioso espacio en la página.

En este tutorial, le mostraremos cómo usar la funcionalidad de contenido dinámico de Divi para crear un acordeón de información del producto y también cómo diseñar el acordeón (y su contenido) usando Divi Visual Builder.

Empecemos.

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descargue el diseño del acordeón de información del producto GRATIS

Para poner sus manos en el diseño de diseño 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.

Tenga en cuenta que debe tener una configuración de producto como se describe en este tutorial para ver los mismos resultados.

Vayamos al tutorial, ¿de acuerdo?

Empezando

Para comenzar, deberá hacer lo siguiente:

  • 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).
  • 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.
  • Cree un nuevo producto como se indica a continuación. Para obtener más información sobre cómo agregar un nuevo producto, consulte este tutorial.
  • Configurar el producto de ejemplo

    Para configurar el producto de ejemplo para este tutorial, navegue a Productos> Agregar nuevo. Asigne al producto el título "Masaje (sesión única)" y haga clic para usar Divi Builder.

    acordeón de información del producto

    A continuación, actualice la siguiente configuración de la página del Producto e información del producto:

    1) En Configuración de página Divi, seleccione el diseño Sin página de barra lateral.

    2) Agregar / seleccionar una categoría de producto

    3) Agregar la imagen del producto

    4) Agregue el siguiente contenido de descripción larga del producto:

    Quality Massage

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Vestibulum sagittis orci ac odio dictum tincidunt.
    • Donec ut metus leo.

    Our Gaurantee

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    5) Debajo de Datos del producto, cambie el tipo de producto a Producto variable.

    6) Agregue un atributo llamado "Tipo" con los siguientes valores: sueco | Piedra caliente | Aromaterapia | Tejido profundo. Asegúrese de seleccionar "Usado para variaciones".

    acordeón de información del producto divi

    7) Luego, en la pestaña de variaciones debajo de la alternancia de datos del producto, use la entrada desplegable para crear variaciones de todos los atributos.

    acordeón de información del producto divi

    acordeón de información del producto divi

    8) Seleccione "Establecer precios regulares" en el menú desplegable para establecer el precio regular para las tres variables.

    acordeón de información del producto divi

    9) En el cuadro emergente, ingrese el valor "50" y seleccione Aceptar.

    acordeón de información del producto divi

    10) Una vez que haya terminado, guarde o publique el producto.

    Ahora está listo para comenzar a diseñar su diseño con un acordeón de información de producto personalizado.

    Creación del acordeón de información del producto con contenido dinámico en Divi

    El diseño predeterminado del producto muestra información del producto utilizando varios módulos Woo en todo momento. Para este ejemplo, queremos usar el acordeón para mostrar tres piezas principales de información del producto: descripción del producto, información adicional del producto y revisiones del producto. Las tres piezas de contenido se muestran actualmente dentro del módulo woo tabs. Todo lo que tenemos que hacer es eliminar el módulo de pestañas woo y reemplazarlo con un módulo de acordeón con la misma información extraída a través de contenido dinámico.

    Aquí te explicamos cómo hacerlo.

    Primero, haga clic para usar Divi en el front end para implementar el generador visual. Luego, elimine el módulo Woo Tabs.

    acordeón de información del producto divi

    Luego agregue un nuevo módulo de acordeón para reemplazar las pestañas.

    acordeón de información del producto divi

    En la ventana emergente Configuración de acordeón, haga clic en el icono de engranaje en el primer acordeón para abrir la configuración individual de acordeón.

    acordeón de información del producto divi

    Ingrese el título, "Acerca del producto".

    Luego, desplace el cursor sobre el cuadro de entrada de contenido del cuerpo y haga clic en el ícono de contenido dinámico.

    acordeón de información del producto divi

    Seleccione "Descripción del producto" de la lista de contenido dinámico.

    acordeón de información del producto divi

    Esto atraerá la descripción larga del producto que hemos establecido para el producto en el backend.

    acordeón de información del producto divi

    Después de tener el primer contenido de acordeón en su lugar, abra la configuración para el segundo acordeón y actualice lo siguiente:

    • Título: Especificaciones

    A continuación, agregue el contenido dinámico "Información adicional del producto" al cuerpo.

    acordeón de información del producto divi

    Una vez que el contenido del segundo acordeón esté listo, agregue un nuevo elemento de acordeón y actualice la configuración de ese acordeón de la siguiente manera:

    • Título: Comentarios

    A continuación, agregue el contenido dinámico "Reseñas de productos" al cuerpo para atraer el elemento / contenido de revisión de productos.

    NOTA: Asegúrese de haber agregado al menos una revisión al producto para ver el contenido en la página en vivo.

    Diseño del acordeón y contenido de información del producto con Divi

    Ahora que nuestro acordeón de información del producto tiene el contenido dinámico necesario para mostrar la información del producto, estamos listos para diseñar el acordeón usando la configuración del módulo de acordeón incorporado.

    Abra la configuración del Módulo de acordeón y actualice lo siguiente:

    • Color del icono: # ff9375
    • Usar tamaño de fuente de icono: SÍ
    • Tamaño de fuente del icono: 26 px

    acordeón de información del producto divi

    • Color de fondo de alternar cerrado: #ffffff
    • Color del texto del título abierto: # ff9375
    • Color del texto del título: # 222222
    • Fuente del título: Lato
    • Peso de la fuente del título: negrita
    • Estilo de fuente del título: TT
    • Tamaño del texto del título: 20 px
    • Espacio entre letras de título: 0.2em
    • Altura de la línea de título: 2em

    acordeón de información del producto divi

    • Fuente del cuerpo: Lato
    • Tamaño del texto del cuerpo: 16px
    • Altura de la línea del cuerpo: 1.8em

    acordeón de información del producto divi

    • Color del texto del enlace: # ff9375

    Esto apuntará a los enlaces que tenga dentro del contenido dinámico para cada acordeón, incluidos elementos como la calificación de estrellas de revisión.

    acordeón de información del producto divi

    • Color de texto de lista desordenada: # ff9375
    • Tipo de estilo de lista desordenada: círculo
    • Sangría de elemento de lista desordenada: 5%

    acordeón de información del producto divi

    • Ancho del borde: 0px
    • Ancho del borde superior: 1px
    • Color del borde superior: # 222222

    acordeón de información del producto divi

    Y para un último paso, agreguemos un pequeño fragmento de CSS para eliminar el margen predeterminado entre los conmutadores de acordeón.

    En la pestaña avanzada, agregue el siguiente CSS al elemento Toggle:

    margin-bottom: 0px;
    

    Ahora veamos el diseño final del acordeón de información del producto.

    acordeón de información del producto divi

    Ajustes finales al diseño

    Hay algunos ajustes que podemos hacer al diseño para que coincida con el diseño del acordeón. Por ejemplo, podemos ajustar la fuente para cada uno de los módulos a Lato, agregar un borde personalizado y un radio de borde alrededor del menú desplegable variable, y actualizar el botón Agregar al carrito con un color de fondo sólido para que coincida.

    Una vez hecho esto, aquí está el resultado final.

    acordeón de información del producto divi

    He incluido este diseño de diseño como una descarga gratuita arriba. Siéntase libre de comprobarlo usted mismo. Tenga en cuenta que debe tener la configuración del producto como se describe en este tutorial para ver los mismos resultados.

    NOTA: El color predeterminado para muchos de los elementos de WooCommerce para un producto en Divi se hereda del valor de color secundario de la Configuración del personalizador de temas. Puede ser más fácil actualizar este color secundario una vez en lugar de actualizar los colores por módulo woo.

    Pensamientos finales

    Como hemos aprendido, los módulos Woo no son los únicos elementos que se pueden usar para obtener información dinámica del producto. El acordeón de información del producto es un gran ejemplo de cómo puede usar cualquier módulo Divi para mostrar la información del producto de una manera única y concisa. Siéntase libre de explorar nuevos y emocionantes diseños de acordeón para las páginas de sus productos. Y, por supuesto, puede usar múltiples módulos de alternancia en lugar de un acordeón para lograr resultados similares.

    Espero tener noticias suyas en los comentarios.

    ¡Salud!