Módulos WooCommerce de Divi
Los módulos WooCommerce de Divi te permiten editar y diseñar elementos de WooCommerce usando el constructor de Divi.
Demostraciones en Vivo de Páginas de Productos Usando Módulos Woo
Consulta las siguientes demostraciones en vivo para ver lo que es posible al diseñar páginas de productos con los Módulos Woo de Divi.
Cómo Usar los Módulos de WooCommerce de Divi
Introducción a los Módulos de WooCommerce
Ya no será necesario recurrir a CSS externo o modificar las plantillas de página de WooCommerce con código personalizado.
Los Módulos de WooCommerce no están limitados solo a las páginas de producto. Puedes agregar Módulos Woo en cualquier parte de tu sitio para:
-
Mostrar productos relacionados de forma dinámica
-
Crear botones personalizados de Añadir al carrito para un producto en particular
-
Crear galerías de productos completamente personalizadas
Y si esto fuera poco, los datos de WooCommerce también están disponibles a través de la función de contenido dinámico de Divi integrada en todos los módulos de Divi.
Esto significa que puedes fácilmente incorporar elementos de WooCommerce e información del producto en cualquier módulo de Divi.
Ejemplo: Si no quieres usar el módulo de Pestañas de Woo para mostrar información adicional de tu producto, agrégalo a un módulo de acordeón de Divi con contenido dinámico.
Cómo Funcionan los Módulos de WooCommerce
Los Módulos de WooCommerce funcionan como contenido dinámico ya existente dentro del Constructor Divi.
Cada módulo de WooCommerce requiere que selecciones un producto para generar contenido dinámico asociado a ese producto.
El contenido dinámico se extrae de la base de datos e incluye la información que ingresaste al configurar tu producto en WooCommerce.
Una vez seleccionado un producto, puedes usar las opciones del Constructor Divi para diseñar el contenido dinámico del producto WooCommerce como cualquier módulo normal de Divi.
Accediendo a los Módulos de WooCommerce desde el Constructor Divi
Los Módulos de WooCommerce son accesibles desde dentro del Constructor Divi, igual que los módulos normales de Divi.
Una vez que el Tema Divi esté instalado en tu sitio web, notarás un botón Usar Constructor Divi encima del editor de publicaciones cada vez que crees o edites un producto o página nueva.
Al hacer clic en este botón se activará el Constructor Divi, dándote acceso a todos los módulos del Constructor Divi, incluyendo los Módulos de WooCommerce.
Si activas el Constructor Divi en una página de producto WooCommerce, los Módulos Woo reemplazarán automáticamente los Elementos Woo que estaban activos antes de habilitar Divi.
También puedes hacer clic en el botón Construir en el Front End para iniciar el constructor en modo visual.
Además de eso, también puedes hacer clic en el botón Activar Constructor Visual en el front end mientras navegas por tu sitio web si has iniciado sesión en el panel de WordPress.
Una vez que hayas ingresado al Constructor Divi, haz clic en el ícono gris de más para agregar un nuevo módulo a tu página.
La lista de módulos es buscable, lo que significa que también puedes escribir woo para ver todos los Módulos Woo o escribir Título Woo para encontrar rápidamente el módulo de Título Woo.
Una vez que se ha agregado el módulo, aparecerá la lista de opciones del módulo, igual que un módulo normal de Divi. Estas opciones están separadas en tres grupos principales:
-
Contenido
-
Diseño
-
Avanzado
Así es como luce la página de producto predeterminada cuando se edita en el backend.
Para cada uno de los Elementos Woo que son relevantes para tu producto, Divi tiene un Módulo WooCommerce correspondiente que te permite desplegar y diseñar ese Elemento Woo con el poder del Constructor Divi.
Por ejemplo, el título del producto se reemplaza con un nuevo módulo de Título Woo con todas las opciones de diseño disponibles para personalizar el título con Divi.
Usando el constructor Divi, el usuario puede personalizar todos los elementos de WooCommerce (como imágenes de productos, precio, descripción, etc.).
Esto te permitirá crear páginas de producto completamente personalizadas. Es importante recordar que cada módulo Woo es dinámico, lo que depende de los datos existentes de WooCommerce que ya hayas ingresado al crear tus productos.
Por lo tanto, debes asegurarte de que el producto tenga la información necesaria para mostrar el módulo.
Ejemplo: Si no has incluido productos relacionados para un producto en particular, el módulo de productos relacionados en esa página no tendrá información para mostrar.
Configuración de página de Divi para páginas de producto
-
Diseño de página
-
Contenido del producto
Diseño de página
Usa esta opción para cambiar el diseño de la página de producto. Las opciones de barra lateral izquierda y derecha mostrarán la barra lateral predeterminada del tema Divi.
Selecciona la opción sin barra lateral o de ancho completo si quieres ocultar la barra lateral.
Contenido del producto
La configuración de contenido del producto te permite elegir entre dos opciones:
-
Predeterminado – Activa la forma antigua en que el constructor Divi funcionaba con las páginas de producto WooCommerce. El constructor Divi solo te permitirá agregar contenido en el área de descripción del diseño predeterminado de WooCommerce.
-
Construir desde cero – Activa la funcionalidad de los módulos Woo para anular el diseño predeterminado de la página de producto WooCommerce.
Usando los Módulos Woo en páginas y publicaciones normales
Ejemplo: Puedes agregar fácilmente un botón de Añadir al carrito para un producto específico de tu tienda en una página de aterrizaje personalizada que creaste para ese producto.
Asegúrate de seleccionar el producto que quieres vincular al módulo.
En este caso, quiero seleccionar un producto específico. Por lo tanto, necesitaría buscar en la lista desplegable de productos dentro del módulo para encontrar un producto específico en la base de datos de WooCommerce.
El módulo entonces obtendrá los datos del producto de forma dinámica y, en este caso, agregará el producto al carrito cuando se haga clic en el botón.
También puedes combinar múltiples módulos Woo para crear diseños personalizados con la información de tus productos.
Ejemplo: Puedes querer destacar un producto usando varios módulos Woo que estén todos vinculados al mismo producto para que la información se actualice dinámicamente.
En el siguiente ejemplo, una página de aterrizaje usa 6 módulos Woo que muestran información del mismo producto de forma dinámica.
Y dado que cada módulo Woo se diseña usando las potentes configuraciones de diseño integradas en Divi, puedes obtener una sección destacada de productos con excelente apariencia para tu página de aterrizaje.
Módulos Woo con otras páginas de WooCommerce
Los módulos Woo también funcionarán en otras páginas de WooCommerce.
Ejemplo: Podrías mostrar productos especiales en la página de cuenta de WooCommerce para que solo los usuarios con cuenta puedan verlos.
Lista completa de módulos WooCommerce
-
Migas de pan Woo – Documentación detallada
-
Aviso Woo – Documentación detallada
-
Imágenes de producto Woo – Documentación detallada
-
Título de producto Woo – Documentación detallada
-
Valoración de producto Woo – Documentación detallada
-
Precio de producto Woo – Documentación detallada
-
Descripción de producto Woo – Documentación detallada
-
Añadir al carrito de producto Woo – Documentación detallada
-
Meta de producto Woo – Documentación detallada
-
Pestañas de producto Woo – Documentación detallada
-
Productos relacionados Woo – Documentación detallada
-
Productos adicionales Woo – Documentación detallada
-
Productos en el carrito Woo – Documentación detallada
-
Ventas cruzadas Woo – Documentación detallada
-
Totales del carrito Woo – Documentación detallada
-
Facturación en el pago Woo – Documentación detallada
-
Envío en el pago Woo – Documentación detallada
-
Información del pago Woo – Documentación detallada
-
Detalles del pago Woo – Documentación detallada
-
Pago Woo – Documentación detallada
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
Usando las Opciones de Transformación de Divi
Las opciones de transformación de Divi son un conjunto de herramientas poderosas que te permiten manipular el diseño web de formas sorprendentes, creando profundidad y efectos visuales atractivos. Las opciones de transformación de Divi te permiten ...Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...Generación de Secciones con Divi AI
Aprende cómo usar la Generación de Secciones con Divi AI para crear contenido bien redactado y secciones de imágenes visualmente atractivas, todo impulsado por el poder de Divi AI. <br> Generación de Secciones con Divi ...Presets Globales de Divi
Aprende cómo crear presets de Divi y aplicarlos a módulos en todo tu sitio web. <br> Una visión general de la función de presets globales de Divi Un reemplazo poderoso para los valores predeterminados globales Los presets globales de ...El sistema de gestión de colores de Divi
Cómo usar las opciones avanzadas de color de Divi. El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress. El sistema de colores de ...