Lo más destacado del complemento Divi: Divi WooCommerce Extended

Divi WooCommerce Extended es un complemento de terceros para Divi con el objetivo de ser la única herramienta que necesitará para crear sitios web de comercio electrónico con Divi. Incluye cinco módulos con muchas características y opciones. En esta publicación, veremos Divi WooCommerce Extended para ayudarlo a decidir si es el producto adecuado para diseñar su tienda WooCommerce.

Módulos extendidos de Divi WooCommerce

Divi WooCommerce Extended agrega 5 módulos a Divi Builder. Los módulos se pueden usar juntos, de forma independiente, en páginas de productos, páginas de tiendas y páginas normales.

Las características incluyen:

1. Mini carrito
2. Vista rápida
3. Carrusel de productos
4. Categorías
5. Búsqueda de Ajax
6. Administrador de pestañas
7. Gerente de pago y
8. Extensión de código abreviado de la biblioteca Divi

Echaremos un vistazo más de cerca a cada módulo, a través de los ojos de nuestro paquete de diseño de perfumería.

Minicarrito extendido Divi WooCommerce

El Módulo Mini Cart proporciona muchas opciones de visualización para el ícono del carrito. Para el tipo de icono, elija entre los iconos nativos de Divi o un icono personalizado. Los íconos nativos incluyen un selector de íconos.

La opción personalizada le permite elegir un icono o una imagen de su biblioteca multimedia.

El mini carrito puede mostrarse como un menú desplegable, superpuesto, fuera del lienzo o modal. Las opciones de activación incluyen hacer clic o pasar el mouse. Las opciones de ubicación incluyen arriba o abajo y a la derecha o a la izquierda. También puede agregar un título y elegir los elementos que se muestran de una lista.

Las opciones de texto incluyen el botón para ver el carrito, el botón para pagar y el texto del carrito vacío. También incluye una opción separada para el fondo del carrito.

Configuración de diseño

La configuración de diseño le permite personalizar el color del icono, el tamaño, la altura de la línea, la sombra del texto, las fuentes, etc. Incluye opciones para todo el texto, incluido el recuento de productos, el título del mini carrito, el nombre del producto, la cantidad y el precio, el subtotal. También incluye configuraciones para el botón de ver carrito, el botón de pago, el carrito vacío, el tamaño del carrito y la configuración estándar. Para este ejemplo, cambié el color y el tamaño del ícono y agregué una sombra de texto. Las opciones de texto no se muestran en Visual Builder, por lo que tendrá que verlas en la interfaz.

Ejemplos de mini carritos

Este ejemplo muestra el menú desplegable. Agregué un módulo de productos DWE y agregué algunos productos a mi carrito de compras. El número de artículos en el carrito aparece sobre el ícono del carrito. Cuando hago clic en el carrito, se abre un menú desplegable para mostrar el contenido de mi carrito. Todos los elementos se pueden diseñar. Cambié el color y el tamaño del carrito, agregué una sombra, cambié la fuente y aumenté el tamaño de las fuentes. También he diseñado los botones para que coincidan con los botones dentro del paquete de diseño.

Este ejemplo muestra Superposición. Puedes colocarlo en cualquiera de las cuatro esquinas de la pantalla.

Este ejemplo muestra Fuera del lienzo. La pantalla se empuja hacia un lado a medida que el contenido se bloquea en su lugar. Al hacer clic en cualquier parte de la pantalla, se cierra la ventana. Se puede colocar en el lado derecho o izquierdo de la pantalla.

Este ejemplo muestra Modal. Muestra el contenido del carrito en la pantalla e incluye ajustes para mostrar el botón de cerrar, la posición del botón de cerrar, elegir cerrar o esc y cerrar al hacer clic en segundo plano.

Divi WooCommerce Producto extendido Búsqueda Ajax

Divi WooCommerce Extended Product Ajax Search agrega una búsqueda de productos totalmente personalizable. Las personalizaciones de Configuración incluyen el marcador de posición del campo de búsqueda, el número de resultados de búsqueda, ordenar por, ordenar y el texto sin resultados.

Área de búsqueda

Para el área de búsqueda, puede elegir dónde el módulo realizará la búsqueda. Puede usar esta configuración para hacer que la búsqueda sea tan amplia o estrecha como desee.

Monitor

Las opciones de visualización le permiten elegir qué mostrar. Puede mostrar el icono de búsqueda, elegir los campos, seleccionar el número de columnas y elegir el espacio entre columnas. También puede mostrar u ocultar la barra de desplazamiento.

Fondo

Incluye muchas opciones de fondo que incluyen el fondo del cuadro de resultados de búsqueda, el fondo del elemento de resultados de búsqueda y la configuración de fondo normal.

Configuración de diseño

La configuración de diseño incluye todos los ajustes de fuente, bordes, fondos, etc. Ajuste los campos, el ícono de búsqueda, el cargador y más. En este ejemplo, cambié las fuentes y le di estilo al icono de búsqueda. También he redondeado las esquinas y cambiado los colores.

Ejemplos de búsqueda de productos Ajax

Así es como se ven los resultados de la búsqueda con la configuración predeterminada de 1 columna usando mi configuración de diseño del ejemplo anterior.

Este ejemplo muestra 2 columnas.

Productos extendidos de Divi WooCommerce

Divi WooCommerce Extended Products muestra los productos de WooCommerce como tarjetas dentro de una cuadrícula. Es totalmente ajustable con varios tipos de vistas y diseños. Este ejemplo utiliza el tipo de vista y el diseño predeterminados 1. Puede elegir la cantidad de productos para mostrar, agregar un número de compensación en caso de que un producto ya se muestre en otro módulo y establecer las opciones de pedido.

Para el tipo de vista, elija la opción predeterminada o seleccione mostrar productos destacados, productos en oferta, productos más vendidos o productos mejor calificados.

Incluye 3 opciones de diseño. Colocan los elementos en diferentes lugares dentro de las tarjetas. El diseño 1 coloca el precio sobre el botón Agregar al carrito. Este ejemplo muestra el diseño 2, que los coloca uno al lado del otro.

El diseño 3 coloca el botón Agregar al carrito sobre el título.

Puede mostrar u ocultar los productos agotados. Si los oculta, puede etiquetarlos como agotados si lo desea o agregar cualquier etiqueta que desee usar. También puede elegir las categorías y etiquetas para incluir y elegir la relación de taxonomía para algún control lógico.

Monitor

Las opciones de visualización le permiten elegir el número de columnas, el espacio entre las columnas, mostrar mampostería, mostrar un menú desplegable de clasificación, mostrar un enlace de vista rápida, agregar texto de vista rápida y un icono, elegir qué elementos mostrar, agregar efectos de zoom, elegir el tamaño de la miniatura, y mucho más. Puede habilitar cualquiera de los elementos individualmente, por lo que puede deshabilitar las imágenes, la insignia de venta, etc. Cambié este ejemplo a 2 columnas, le di estilo a la etiqueta de Venta y personalicé el botón.

Paginación

La paginación agrega números de página. También puede habilitar los enlaces anterior y siguiente y agregar el texto que desea que se muestren.

Antecedentes del producto

La configuración de fondo del producto controla el fondo del área de texto de la tarjeta.

Configuración de diseño

La configuración de Diseño le permite ajustar cada elemento de forma independiente. Tiene control total sobre los tamaños, colores, fuentes, fondos, bordes, etc. He ajustado muchas de las configuraciones en este ejemplo.

Carrusel de productos extendidos de Divi WooCommerce

Divi WooCommerce Extended Products Carousel presenta los productos de WooCommerce dentro de un control deslizante. Incluye la misma configuración que el módulo de productos WCE y agrega las del carrusel. Puede seleccionar el tipo de producto, el diseño, el número a mostrar, el orden de clasificación, ocultar productos agotados, elegir categorías, etc.

Monitor

Todas las opciones de visualización también son las mismas. Muestre un botón de vista rápida, elija los elementos para mostrar u ocultar, agregue texto y muestre la insignia de venta.

Deslizador

No incluye paginación. En cambio, tiene opciones de control deslizante. Elija el efecto de diapositiva entre Slide, Cube, Coverflow y Flip. Cada una de las opciones tiene una configuración diferente. Seleccione la cantidad de productos para mostrar dentro de una diapositiva, ajuste el espacio entre las diapositivas, iguale las alturas, habilite el bucle, habilite la reproducción automática, ajuste la velocidad, etc. Este ejemplo muestra Coverflow.

El control deslizante también incluye los tipos estándar de navegación. Puede mostrarlos o desactivarlos. También puede elegir las flechas de la lista de iconos, mostrarlas solo al pasar el mouse por encima y elegir su posición entre 8 opciones. Esto muestra la opción predeterminada dentro del control deslizante. Este ejemplo muestra las flechas en su posición predeterminada.

Este ejemplo muestra las flechas en la parte superior central.

También incluye paginación de puntos con 6 estilos para elegir. Este ejemplo muestra un punto sólido.

Este ejemplo muestra Línea redondeada.

También tiene una opción llamada Dynamic Dots. Esto cambia el tamaño de los puntos para mostrar que los que están más cerca de la diapositiva actual son más grandes que los que están más lejos.

Configuración de diseño

La configuración de Diseño incluye opciones para cada elemento del control deslizante. He ajustado los colores de fuente, los colores de fondo, los bordes, las flechas y los puntos en este ejemplo.

Categorías de productos extendidos de Divi WooCommerce

Las categorías de productos extendidos de Divi WooCommerce crean tarjetas que representan cada una de las categorías en su tienda WooCommerce. Incluye 2 diseños y puede seleccionar las categorías que desea mostrar. Este es el diseño 1. Coloca el título y la cantidad de elementos en esa categoría debajo de la imagen destacada de la categoría.

Este es el diseño 2. Coloca el título y el número de elementos sobre la imagen y muestra la tarjeta como un cuadrado delineado.

Monitor

Las opciones de visualización incluyen el número de columnas, el espacio entre columnas, la mampostería, la miniatura, el efecto de zoom, el tamaño de la miniatura y el número de productos.

Fondo

La configuración de fondo coloca un color de fondo detrás del título y los recuentos de productos.

Así es como se ve el fondo con el diseño 2.

Configuración de diseño

Los ajustes de diseño incluyen opciones para todos los elementos. En este ejemplo, ajusté los colores, tamaños, pesos y espacios del texto para que coincidan con el estilo que usamos en la plantilla de página y del paquete de diseño de perfumería.

Dónde comprar Divi WooCommerce Extended

Divi WooCommerce Extended está disponible en Divi Marketplace por $59. Incluye uso ilimitado, 1 año de soporte y actualizaciones, y una garantía de devolución de dinero de 20 días.

pensamientos finales

Ese es nuestro vistazo rápido a Divi WooCommerce Extended. Estos cinco módulos agregan muchas funciones a Divi para crear páginas de compras para sus productos WooCommerce. Solo he mencionado las funciones principales y es fácil ver lo poderoso que es. Si está interesado en agregar nuevas funciones a su tienda WooCommerce, vale la pena echarle un vistazo a Divi WooCommerce Extended.

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