Todo lo que necesita saber sobre los módulos de productos WooCommerce de Divi 5

La compatibilidad con WooCommerce ahora se ha ampliado a Divi 5, lo que le brinda control total sobre las páginas de productos sin depender de las plantillas incorporadas de WooCommerce. Los módulos de productos de WooCommerce recientemente integrados le permiten diseñar diseños atractivos para el usuario que coincidan con su marca y ayuden a aumentar las ventas, mientras aprovechan todas las características de Divi 5, incluidas Flexbox, para construir páginas de productos con control moderno.

En esta publicación, cubriremos las características clave de los módulos y le mostraremos cómo usarlas para su próximo sitio web de comercio electrónico Divi 5. Vamos a sumergirnos.

¿Cuáles son los módulos de productos de WooCommerce?

Los módulos de productos WOO son elementos de contenido especializados dentro de Divi 5, diseñados para personalizar páginas de productos y categorías para tiendas con WOO. Estos módulos reemplazan las plantillas de WooCommerce que son estándar con el complemento, lo que le permite crear diseños personalizables. A diferencia de estas plantillas tradicionales, los módulos de Divi 5 permiten la libertad creativa al tiempo que mantienen la compatibilidad con la funcionalidad central de WooCommerce.

La liberación de 17 módulos de WooCommerce en Divi 5 marca un hito significativo. Estos módulos, que cubren todos los aspectos de diseño de la página de productos y categorías, ya no están en modo heredado, lo que significa que todos están completamente optimizados para la arquitectura moderna de Divi 5. Con esta transición a una base más eficiente, Divi 5 funciona mejor, es más escalable y es compatible con el futuro de WordPress.

Se espera que los 8 módulos WOO restantes, centrados en las páginas de carrito y pago, se desplumen pronto.

Características clave de los módulos de productos WooCommerce de Divi 5

Revisemos las características clave que puede esperar ahora que los módulos de productos de WooCommerce se han integrado en Divi 5.

Conjunto de módulos integral

El primer lote de los módulos de productos WooCommerce de Divi 5 incluye herramientas diseñadas para manejar un aspecto específico del diseño de la página de productos y categorías. Estos módulos son:

• Woo BreadRumbs: Muestra senderos de pan de navegación para ayudar a los usuarios a navegar fácilmente por la tienda.
• Aviso de Woo: muestra mensajes del sistema como actualizaciones de carritos, errores o confirmaciones.
• Producto Woo Agregar al carrito: Rendera un botón Agregar al carrito con controles de cantidad opcionales.
• Descripción del producto Woo: emite la descripción principal del producto de forma larga.
• Galería de productos Woo: muestra imágenes de productos adicionales en formatos de cuadrícula o control deslizante.
• Imágenes del producto Woo: muestra la imagen principal del producto o una galería de imágenes.
• Información del producto WOO: Muestra detalles del producto como peso, dimensiones o atributos.
• Meta de productos Woo: muestra el sku de productos, categorías y etiquetas.
• Precio del producto Woo: muestra el precio del producto, incluidos los precios de venta.
• Calificación de producto Woo: muestra el recuento promedio de calificación de estrellas y revisión.
• Revisiones de productos WOO: permiten a los clientes ver y enviar revisiones de productos.
• Stock de productos WOO: indica disponibilidad del producto y niveles de stock.
• Pestañas de productos WOO: Muestra pestañas de producto predeterminadas para una descripción, información adicional y revisiones.
• Título del producto Woo: emite el nombre del producto como un rumbo personalizable.
• Producto WOO OPSELL: Promueve productos de venta adicional para fomentar las compras de mayor valor.
• Productos WOO: Crea cuadrículas de productos personalizables para páginas de categorías.
• Productos relacionados con WOO: Muestra productos relacionados basados ​​en categorías o etiquetas.

Juntos, estos módulos proporcionan todo lo que necesita para crear páginas de productos y categorías, desde migas de pan de navegación hasta pantallas dinámicas de productos.

Libertad creativa

Módulos de productos WooCommerce de Divi 5 usuarios gratuitos de las restricciones de las plantillas estándar de WooCommerce. Con estos módulos, puede controlar completamente el diseño, la estructura y el diseño de sus páginas de productos, creando experiencias únicas.

Los módulos admiten contenido dinámico, lo que significa que extraen datos de productos directamente de WooCommerce, asegurando actualizaciones en tiempo real para precios, niveles de acciones y descripciones. Esto le permite crear páginas que impulsen la participación y las conversiones sin requerir complementos de terceros o código personalizado.

Opciones de personalización

Cada módulo tiene una amplia configuración de diseño, todas manejables dentro del Visual Builder. Puede personalizar elementos como galerías de productos, insignias de venta, botones y más con opciones de tipografía, colores, espaciado y animaciones.

Por ejemplo, puede ajustar el diseño del módulo de Galería de productos Woo para mostrar imágenes en un control deslizante o cuadrícula, diseñar el producto Woo Agregar al botón Cart con colores personalizados y efectos de desplazamiento, o ajustar el módulo de calificación de productos WOO para alinear las clasificaciones de estrellas perfectamente con su diseño.

Estas configuraciones le permiten crear páginas cohesivas y de marca con facilidad.

Plantillas dinámicas con constructor de temas

El constructor de temas de Divi 5 le permite adoptar todo el potencial de los módulos de productos de WooCommerce al permitirle crear plantillas globales para páginas de productos y categorías. Con Temer Builder, puede diseñar una plantilla única que se aplique a todos los productos y categorías en su tienda, asegurando un aspecto consistente y cohesivo.

Bucle builder para contenido dinámico de wooCommerce

El Divi 5 Loop Builder ofrece una forma alternativa de construir contenido dinámico de Woo. Con Loop Builder, puede consultar productos de WooCommerce y diseñar bucles de productos flexibles utilizando cualquier elemento Divi, creando diseños, listas y carruseles que van más allá de la estructura fija de los módulos de productos dedicados. Para diseños de productos únicos, use los módulos de productos WOO; Para colecciones y archivos de productos, use el bucle de bucle.

Cómo usar los módulos de productos WooCommerce de Divi 5

Esta sección lo guiará mediante la creación de una página de producto en el constructor de temas de Divi 5 utilizando los nuevos módulos de productos de WooCommerce.

Crea una nueva plantilla de constructor de temas

Navegue a Divi> Builder de temas en el tablero de WordPress. Haga clic en + Agregar nueva plantilla .

Haga clic en Construir una nueva plantilla cuando aparezca el cuadro de diálogo.

A continuación, tendremos que asignar nuestra plantilla a nuestros productos. En productos , seleccione todos los productos para asignar la plantilla.

Haga clic en Crear plantilla para asignarla.

Haga clic en Agregar cuerpo personalizado . Esto nos permitirá construir el cuerpo de nuestra plantilla de página del producto.

Elija construir cuerpo personalizado cuando aparezca el cuadro de diálogo.

Construir la plantilla de producto

Cuando se lanza el constructor de temas, puede construir una plantilla desde cero, elegir un diseño prefabricado o construir con AI. Seleccionaremos Build de Scratch para este tutorial.

Haga clic en el icono Green + para agregar una nueva fila.

Cuando aparezcan las opciones , elija la fila de dos columnas. Las nuevas filas que agregue a cualquier página o plantilla de Divi 5 usará FleBox de forma predeterminada. El sistema de diseño Flexbox de Divi 5 le brinda más control sobre cómo se ven las páginas de sus productos que nunca, incluido el cambio de cómo sus módulos de productos WooCommerce se acumulan en diferentes tamaños de pantalla.

Desplácese hacia abajo para revelar la opción de módulos de productos WOO . Una vez hecho clic, tendrá 17 módulos Divi 5 Woo y 8 módulos Legacy (Divi 4).

Agregue el módulo de imágenes de productos Woo

Busque y seleccione el módulo de imágenes del producto WOO y agréguelo a la primera columna.

Esta publicación se selecciona de forma predeterminada en el campo del producto en la pestaña de contenido . Si desea construir la plantilla con un producto existente, elija en el menú desplegable. Esta es una excelente manera de obtener una vista previa de cómo se verá su plantilla mientras la creará. Recuerde cambiarlo de nuevo a esta publicación antes de la salvación final.

Expanda el menú desplegable de elementos para revelar la configuración. Aquí, puede controlar qué imágenes se muestran en el módulo, incluida la imagen destacada, las imágenes de la galería y la insignia de venta.

Haga clic en el menú desplegable de la imagen en la pestaña Diseño para revelar la configuración. Aquí, puede obligar a la imagen a ocupar todo el espacio disponible (Force FullWidth), agregar un borde, sombra de caja, ajustar el espacio o agregar filtros.

También puede diseñar la insignia de venta asignando un color de fondo, texto, bordes y más.

Agregue el módulo de título del producto WOO

En la segunda columna, haga clic en Módulos de productos WOO y desplácese para seleccionar el módulo de título de producto WOO .

Use el menú desplegable en el campo de producto de la pestaña Contenido para seleccionar un producto y ver previsualización de cómo se verá en la plantilla.

Luego, navegue hasta la pestaña Diseño del módulo y expanda el menú desplegable de texto del título . Aquí, puede asignar una fuente y diseñar el encabezado como desee.

Agregue el módulo de precio del producto WOO

En el título del producto, haga clic para agregar un nuevo módulo. Seleccione los módulos de producto WOO y desplácese para seleccionar el módulo de precio del producto WOO .

En la pestaña Design , puede diseñar cada aspecto del precio del producto, incluido el texto, el texto de venta, el nuevo texto de precio y más.

Agregue el módulo de calificación de producto Woo

A continuación, agregaremos el módulo de calificación de productos WOO en el módulo de precio WOO.

En la pestaña de contenido en elementos , puede optar por mostrar u ocultar el recuento de calificación de estrellas y revisiones de clientes.

En la pestaña Design , el menú desplegable de diseño le permite elegir cómo mostrar la clasificación de estrellas. Los elementos se pueden mostrar en línea o apilados.

Otras opciones de estilo incluyen asignar un color, tamaño de texto y espaciado de letras para las estrellas y opciones de estilo para el texto de calificación.

Agregue el módulo de descripción del producto woo

En el módulo de calificación Woo Star, haga clic para agregar un nuevo módulo Woo. Esta vez, seleccionaremos el módulo de descripción del producto WOO . En la pestaña Contenido , elija qué descripción se muestra (descripción o descripción breve).

En la pestaña de diseño , puede diseñar la descripción con opciones de fuente, peso, estilo, alineación, color, tamaño y más.

Agregue el producto Woo Agregar al módulo CART

A continuación, agregaremos el módulo CART del producto WOO al módulo CART . Permitirá a sus clientes agregar el producto a sus carros y elegir cualquier variación asignada al producto.

Los elementos alternan en la pestaña de contenido le permiten mostrar u ocultar el campo de cantidad y el stock disponible. Nota rápida: para que se muestre la cantidad de stock, debe verificar el stock de administración en el propio Producto Woo.

Puede diseñar las etiquetas de campo, el texto, los menús desplegables (para variaciones) y el botón para que coincida con su marca en la pestaña de diseño .

Continúe agregando módulos, como el meta módulo del producto WOO para mostrar números y categorías de SKU.

También puede agregar el módulo de pestañas de productos WOO para mostrar una descripción, revisiones e información adicional sobre su producto.

Para el máximo alcance, puede mostrar una serie de productos relacionados en la plantilla de su producto para alentar a los visitantes de su sitio a explorar productos adicionales en su tienda, aumentando las posibilidades de una conversión.

Guardar la plantilla

Una vez terminado de agregar módulos, realice cualquier cambio adicional que necesite y luego guarde la plantilla haciendo clic en el botón Guardar en la esquina superior derecha del constructor de temas.

A continuación, haga clic en el botón Salir para volver al tablero del constructor de temas.

De vuelta en el tablero del constructor de temas, haga clic en Guardar cambios para guardar la plantilla y aplicarla a sus productos Woo.

Como puede ver, crear una plantilla de producto con los módulos de productos WOO de Divi 5 es un proceso simple. No cubriremos todos los módulos en este tutorial, pero utilizando todos ellos, puede crear impresionantes páginas de productos o categorías que mantengan a sus visitantes comprometidos.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master 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 suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

¿Qué sigue para la integración de WooCommerce de Divi 5?

El segundo lote de módulos de WooCommerce, centrados en las páginas de carrito y pago, se lanzará en las próximas semanas, concluyendo la integración con WooCommerce. Estas adiciones permitirán a los usuarios personalizar completamente todo el embudo de comercio electrónico, desde la navegación de productos hasta el pago. La Beta Pública Divi 5 refinará aún más estas características, incorporando comentarios de los usuarios y correcciones de errores adicionales para garantizar la estabilidad.

Más allá de la compatibilidad e integración de WooCommerce, Divi 5 continúa evolucionando con características recientes como el módulo de carrusel grupal para crear controles deslizantes dinámicos de productos, el módulo Lottie para agregar animaciones livianas y un nuevo sistema de diseño FlexBox para un control de diseño mejorado. Estas adiciones complementan los módulos WOO, que ofrecen aún más posibilidades creativas para los sitios de comercio electrónico.

Pruebe los módulos de productos Woo de Divi 5 hoy

Los módulos de productos WOO de Divi 5 le permiten crear páginas de productos y categorías cautivadoras con flexibilidad y creatividad incomparables. Los módulos ofrecen una combinación de libertad creativa, integración dinámica de contenido y rendimiento, todo dentro de una interfaz intuitiva. Desde galerías de productos personalizables hasta diseños personalizados a través del constructor de temas, Divi 5 facilita la creación de páginas de tiendas de alta conversión.

¿Estás listo para sumergirte en Divi 5? Descargue el último alfa público de Divi 5 para explorar estos módulos y vea cómo pueden transformar su sitio de WooCommerce. Nos encantaría escuchar tus pensamientos. Comparta sus comentarios en los comentarios o conéctese con nosotros en nuestros canales de redes sociales.