Lo más destacado del complemento Divi: Woo Essential

Woo Essential es un complemento de terceros que agrega 8 nuevos módulos Woo Commerce a Divi Builder. También agrega varias funciones para agilizar el proceso de compra, lo que le permite mostrar productos y categorías en múltiples diseños y muchas opciones de funciones. En esta publicación, veremos los módulos y las funciones de Woo Essential para ayudarlo a decidir si es el producto adecuado para sus necesidades.

Módulos Divi esenciales de Woo

Woo Essential agrega 8 módulos a Divi Builder. Algunas de las funciones requieren los complementos YITH WooCommerce Compare y YITH WooCommerce Wishlist. Las versiones gratuitas están bien para esto. Verá una notificación si no los tiene instalados. Simplemente haga clic en la notificación para instalarlos y activarlos después de activar el complemento Woo Essential.

No verá todos los módulos en Divi Builder al principio. En su lugar, verá un módulo llamado Woo Essential. Haga clic en este módulo.

Todos los módulos esenciales de Woo se mostrarán en el modal. Ahora puede agregar los módulos a cualquier diseño de Divi para mostrar los productos de WooCommerce.

Echemos un vistazo más de cerca a cada uno de los módulos esenciales de Woo. Mostraré la configuración predeterminada y luego mostraré un ejemplo de algunas de las características de diseño.

Acordeón Categoría Woo

El módulo de acordeón de categorías Woo muestra las imágenes de las categorías de productos. Las imágenes se expanden al pasar el mouse para mostrar una descripción de la categoría y la cantidad de artículos en esa categoría. Mostrará la imagen de categoría si tiene una configurada.

Tienes control total sobre el diseño de cada elemento. En este ejemplo, agregué una sombra de cuadro, redondeé las esquinas y cambié los colores y tamaños de fuente para el nombre, el recuento y la descripción de la categoría. También agregué relleno y altura de línea a la descripción.

Carrusel de categorías Woo

Woo Category Carousel crea un control deslizante completo con navegación y deslizamiento automático. Tiene muchas configuraciones para ajustar el carrusel.

Cuadrícula de categorías de Woo

Woo Category Grid muestra las categorías como tarjetas en una cuadrícula. La cuadrícula es ajustable, por lo que puede cambiar el número de columnas.

Para este, agregué un borde, redondeé las esquinas, ajusté las fuentes y cambié el número de cuadrículas y la configuración de espacios.

Woo Categoría Albañilería

El módulo de mampostería de categorías de Woo coloca las categorías dentro de una cuadrícula de mampostería.

En este ejemplo, ajusté el número de cuadrícula y el espacio, y cambié las fuentes.

Woo producto acordeón

El acordeón de productos Woo funciona como el acordeón de categorías Woo, excepto que muestra los productos en sí. Se expande al pasar el mouse para mostrar la información del producto. Elija qué elementos mostrar desde el botón Agregar al carrito, precio, calificación de estrellas, descripción, insignia de producto destacado, tipo de insignia de venta y texto de insignia de venta. También puedes controlar cómo funciona el acordeón. Todos los módulos del producto muestran la imagen destacada por defecto.

En este ejemplo, ajusté el fondo del contenido, cambié los colores de fuente, cambié el color de la insignia, aumenté el tamaño de fuente del nombre del producto y cambié el color del botón Agregar al carrito.

Carrusel de productos Woo

El carrusel de productos Woo muestra los productos en una de las seis opciones de diseño. Cada uno incluye un efecto de desplazamiento diferente para los botones. También puede elegir qué elementos mostrar, ajustar la configuración del carrusel, etc.

Puede ajustar cada elemento de forma independiente. He ajustado muchos colores, bordes y fuentes en este ejemplo. También he añadido flecha de navegación. Este es el Diseño 3, que coloca el carrito y otros enlaces en la parte inferior de la imagen al pasar el mouse.

Filtro de producto Woo

El filtro de productos Woo agrega una cuadrícula de productos WooCommerce con un filtro personalizable. Puede elegir cuál de los elementos mostrar.

Tiene control total sobre cada elemento, incluido el filtro, la cuadrícula, las fuentes, los colores, etc. Cambié varios de los colores, los tamaños de fuente y ajusté el recuento de la cuadrícula en este ejemplo. También agregué una sombra de cuadro tanto al filtro como a la cuadrícula del producto.

Cuadrícula de productos Woo

El módulo de cuadrícula de productos de Woo muestra los productos en una cuadrícula con un banner que muestra los recuentos de productos. Tiene 8 opciones de diseño para la cuadrícula que cambia el tamaño de la imagen y coloca los botones en diferentes ubicaciones al pasar el mouse. Puede seleccionar los elementos que se muestran. Esto muestra el diseño 8, que coloca los íconos a la derecha de la imagen y el botón Agregar al carrito en la parte inferior de la imagen al pasar el mouse.

Puede agregar paginación con botones a cada página o un botón Cargar más. Agregué el botón Cargar más en este ejemplo y lo diseñé. Este es el diseño 3, que coloca el título y el precio debajo de la imagen y agrega los íconos cerca de la parte inferior de la imagen al pasar el mouse.

Más características esenciales de Woo

Hay muchas características, la mayoría incluidas dentro de los módulos, que agregan funcionalidad a las listas de WooCommerce. He aquí un vistazo rápido a varias de esas características.

Mini carrito Woo Essential Woo

La función Mini Cart agrega un menú emergente al carrito de compras. Se agrega automáticamente al encabezado predeterminado de WordPress. Solo funciona con el encabezado predeterminado, por lo que no podrá agregarlo a los encabezados creados con Divi Builder. Esto significa que no es tan versátil como las otras características de este complemento. Puede personalizar los tres elementos de forma independiente con el personalizador de temas.

Incluye cuatro secciones de configuración para la configuración principal del carrito, el diseño del carrito, el botón de ver el carrito y el botón de pago.

Controla cómo funciona y cambia el tamaño, la forma, los colores, las fuentes, los íconos, etc. Haz que se abra al pasar el mouse, al hacer clic o deslizar desde la derecha o la izquierda.

El Mini Cart abre un pequeño modal que muestra el contenido de su carrito. También puede abrir una ventana a la derecha o a la izquierda, según su configuración. Este ejemplo muestra la apertura modal al pasar el mouse. La opción Fly-In, que se desliza desde la derecha o la izquierda, le da al modal la altura completa de la pantalla.

Ventana emergente de vista rápida de Woo Essential

Puede ver los detalles del artículo sin salir de la página actual. El icono de vista rápida se agrega a varios de los módulos. Al hacer clic en este icono, se abren los detalles en un modal. La ventana emergente es rápida y facilita ver los detalles del producto sin cargar otra página.

Los detalles incluyen toda la información del producto, como la descripción, la galería, el botón Agregar al carrito, la categoría, etc.

Woo Essential Comparar productos

Puede comparar varios productos seleccionando el icono de comparación. Este proceso puede ser un poco complicado al principio, por lo que es posible que muchos usuarios no sepan que pueden comparar productos.

Para hacer la comparación, vea los productos individualmente que desea comparar. Luego, haga clic en el ícono de comparación en uno de los productos. El modal de comparación con abierto con los productos comparados en una tabla. Esto funciona, pero no es tan intuitivo como me gusta. Tomó un poco de trabajo averiguarlo. La información que necesitaba estaba en la documentación. Puede desplazarse por la comparación y cerrar el modal cuando esté listo.

Ajustes esenciales de Woo

Woo Essential agrega un enlace al panel de WordPress. Seleccione este enlace para abrir la configuración. La primera página, Inicio, incluye enlaces a la base de conocimientos, soporte y comentarios, solicitud de funciones y el canal de YouTube de DiviNext.

Seleccione Módulos para ver la segunda página. Aquí, puede deshabilitar o habilitar cualquiera de los módulos esenciales de Woo. Esto es bueno si desea restringir el diseño a solo unos pocos módulos. Todos están habilitados por defecto.

Woo Plantillas Esenciales

El sitio web del editor contiene 8 diseños de inicio gratuitos para ayudarlo a comenzar con sus diseños. También requieren otro complemento Divi para funcionar, por lo que su usabilidad está limitada a aquellos con ambos complementos. Se ven geniales y ofrecen muchas secciones para usar.

Compra Woo Esencial

Wii Essential está disponible en Divi Marketplace por $79. Incluye uso ilimitado, una garantía de devolución de dinero de 30 días y un año de soporte y actualizaciones.

pensamientos finales

Esa es nuestra mirada a Woo Essentials para Divi. Estos 8 módulos Divi brindan muchas opciones para rejillas y acordeones de productos. Muestra productos y categorías individuales con facilidad y dales estilo con Divi Builder. Vea fácilmente el contenido del carrito, los detalles del producto y compare productos. Me gustaría ver el Mini Cart como un módulo Divi para que pueda agregarse a los encabezados creados con Divi Builder. Sin embargo, funciona bien si está utilizando el encabezado predeterminado de WordPress. Si está interesado en expandir sus páginas de productos de WooCommerce con muchas cuadrículas interesantes, vale la pena echarle un vistazo a Woo Essentials.

Queremos escuchar de ti. ¿Has probado Divi Essentials? Háganos saber lo que piensa al respecto en los comentarios.