Divi - Documentación en español

Actualizada v3.28

Los módulos de WooCommerce

Los módulos de WooCommerce de Divi le permiten editar y aplicar estilos a los elementos de WooCommerce con el constructor de Divi. Esto le permitirá usar el poder de Divi para añadir, eliminar y editar los estilos de los componentes de WooCommerce que integran el diseño de la página de un producto. Ya no tendrá que recurrir al CSS adicional o a la modificación de las plantillas de WooCommerce con código personalizado.

Introducción a los módulos de WooCommerce

Los módulos de WooCommerce no están limitados a las páginas del producto. También puede añadir módulos Woo en cualquier parte del sitio para presentar productos relacionados de manera dinámica, crear botones “Añadir al carrito” personalizados para un producto en particular, construir galerías de producto completamente personalizadas y mucho más.

Como si esto fuera poco, los datos de WooCommerce también están disponibles a través de la característica de contenido dinámico de Divi que incluyen todos los módulos. Eso significa que podrá mostrar fácilmente elementos de WooCommerce de la información del producto en cualquier módulo de Divi. Por ejemplo, si no quiere usar el módulo Woo – Pestañas para mostrar la información adicional del producto, puede añadirla a un módulo Conmutador con el contenido dinámico.

Cómo funcionan los módulos de WooCommerce

Los módulos de WooCommerce funcionan de manera muy parecida al contenido dinámico dentro del constructor de Divi. Cada módulo de WooCommerce requiere la selección de un producto para generar el contenido dinámico asociado con ese producto. El contenido dinámico se toma de la base de datos e incluye la información que ha introducido cuando añadió el producto en WooCommerce. Una vez seleccionado el producto, puede usar los ajustes del constructor de Divi para aplicar estilos al contenido dinámico del producto de WooCommerce, tal como lo haría con cualquier otro módulo de Divi.

Acceder a los módulos de WooCommerce desde el constructor

Los módulos de WooCommerce están accesibles desde dentro del constructor de Divi, al igual que los módulos estándar. No está de más decir, que es necesario tener el plugin WooCommerce instalado y activado para poder usar estas características.

Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. Si activa el constructor de Divi en una página de producto de WooCommerce, los módulos Woo reemplazarán automáticamente los elementos que se activaron en la página antes de activar Divi. También puede hacer clic en el botón Construir en la interfaz de usuario para iniciar el constructor en la modalidad visual. Y como alternativa, puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Divi - Activar el constructor visual

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero.

Divi - Módulos de WooCommerce

Localice el módulo que desea dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “Woo” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Divi - Woo - Meta

Usar los módulos de WooCommerce en las páginas de producto

Los módulos Woo de Divi funcionarán naturalmente con una página de producto de WooCommerce. Debajo se muestra un resumen de cómo usar los módulos Woo en una página de producto de Divi.

De manera predeterminada, Divi usará la plantilla de producto estándar de WooCommerce, la cual no es editable con el constructor.

Así es como se presenta la página de producto al editarla en la interfaz de administración.

Divi - Producto de WooCommerce

Lo único que necesita para activar los módulos Woo en la página es activar el constructor de Divi dentro de la página del producto con un clic en el botón Usar el constructor de Divi.

Divi - Activar constructor en producto

Una vez activado el constructor de Divi en una página de producto estándar, Divi convertirá automáticamente los elementos de la página en una colección de módulos de WooCommerce que “imitan” el diseño de la página del producto. Para cada uno de los elementos Woo que son relevantes en el producto, Divi tiene un módulo WooCommerce respectivo que le permitirá manejar ese elemento con todo el poder del constructor de Divi. Por ejemplo, el título del producto es reemplazado por un nuevo módulo Woo – Título, que tiene todas las opciones de diseño disponibles para personalizar el estilo con Divi.

Así es como se presenta la página del producto cuando está activado el constructor de Divi.

Divi - Elementos Woo

El usuario tendrá la libertad de personalizar todos los elementos de WooCommerce (como las imágenes del producto, el precio, la descripción, etc.) con el constructor de Divi. Esto le permitirá crear páginas de producto completamente personalizadas.

Es importante recordar que cada módulo Woo es dinámico, lo cual significa que depende de los datos de WooCommerce existentes que ya ha introducido al momento de crear los productos. Así que tendrá que asegurarse de que el producto contiene la información necesaria para poder mostrar el módulo. Por ejemplo, si no ha introducido ningún producto de venta dirigida dentro de un producto en particular, no podrá añadir o personalizar el módulo Woo – Venta dirigida en ese producto, ya que no tendrá datos para mostrar.

Ajustes de página de Divi para las páginas de producto

Una vez activado el constructor de Divi en una página de producto, los ajustes de página de Divi contendrán opciones un tanto diferentes. Las dos opciones principales para destacar, especialmente cuando se trabaja con módulos Woo, son el Diseño de página y el Contenido del producto.

Diseño de página

Divi - Ajustes de página Woo

Use esta opción para cambiar el diseño de página del producto. Las opciones Barra lateral derecha y Barra lateral izquierda mostrarán la barra lateral predeterminada del tema Divi.

Si desea ocultar la barra lateral, puede seleccionar la opción Sin barra lateral o Ancho completo.

Algo para tener en cuenta, es que si desea mostrar una barra lateral personalizada (usando el constructo de Divi) conviene seleccionar el diseño Ancho completo.

Contenido del producto

Divi - Ajustes Woo - Contenido del producto

Los ajustes de Contenido del producto le permiten elegir entre dos opciones:

  • Predeterminado
  • Construir de cero (Build from scratch)

La opción Predeterminado activará la manera tradicional en que funciona el constructor de Divi con las páginas de producto de WooCommerce. Básicamente el constructor le permitirá añadir contenido solo al área de la descripción en el diseño de página de WooCommerce estándar.

La opción Build from Scratch es la que activa la funcionalidad de los módulos Woo para reemplazar el diseño de página del producto de WooCommerce estándar. No hay razón para elegir Predeterminado, a menos que necesite volver a la manera tradicional.

Usar los módulos Woo en páginas y entradas

Los módulos de WooCommerce de Divi  se pueden usar en cualquier página o entrada estándar del sitio (no solo en las páginas de producto de WooCommerce).

Por ejemplo, puede incluir fácilmente un botón Woo – Añadir al carrito para un producto específico de la tienda dentro de una página de aterrizaje que haya creado para ese producto.

Tan solo añada un módulo Woo – Añadir al carrito a la página, tal como lo haría con cualquier otro módulo de Divi.

Divi - Módulo Woo Añadir al carrito

Luego asegúrese de seleccionar el producto que desea vincular al módulo.

Divi - Woo - Último producto

 

En este caso, queremos seleccionar un producto específico. Por lo tanto, debemos buscar en el menú desplegable la lista de productos dentro del módulo para encontrar el producto que corresponda.

Divi - Woo Botón Añadir al carrito

Este será, por supuesto, el producto que queremos ofrecer en la página de aterrizaje. El módulo tomará los datos del producto de manera dinámica y, en este caso, añadirá el producto al carrito al hacer clic en el botón.

También puede combinar múltiples módulos de WooCommerce para obtener diseños totalmente personalizados de la información del producto. Por ejemplo, puede que quiera destacar un producto mediante varios módulos Woo que están vinculados al mismo producto, para que la información se actualice de manera dinámica.

Aquí hay un ejemplo de una página de aterrizaje que usa seis módulos Woo, los cuales muestran información del mismo producto de manera dinámica.

Divi - Constructor de WooCommerce

Y ya que el estilo de cada módulo Woo está editado con los poderosos ajustes de diseño integrados de Divi, obtendrá un producto destacado que se verá sensacional en una página de aterrizaje.

Divi - Landing page - Woo

Módulos Woo con otras páginas de WooCommerce

Los módulos de WooCommerce también funcionan en otras páginas de WooCommerce. Estas incluyen la página de la tienda, finalizar compra, y la página del carrito. Por ejemplo, puede mostrar productos especiales en la página de la cuenta de WooCommerce para que solo los usuarios registrados puedan verlos.

Y a no olvidar ser original. Puede usar módulos de Divi para crear su propia versión personalizada de la página de la tienda.

Los módulos Woo y sus ajustes

Comprendiendo los ajustes de los módulos

Los ajustes de los módulos Woo tienen la misma estructura e interfaz que los módulos normales de Divi, con sus tres pestañas: Contenido, Diseño y Avanzado.

Divi - Ajustes de módulo Woo

Contenido

Divi - Woo - Miga de pan

Las opciones de contenido variarán de acuerdo con el módulo de WooCommerce. De todas maneras, como cada módulo Woo está construido con la misma estructura de un módulo normal, la funcionalidad y el diseño serán familiares e intuitivos. En la mayoría de los casos, cada módulo Woo tomará contenido de un producto en particular. Así que, en lugar de tener un campo para introducir texto estátic, verá un menú desplegable para seleccionar el producto cuyos datos desea obtener.

Selección del producto

La pestaña Contenido tendrá opciones útiles que le permitirán elegir el producto asociado con el módulo. Por ejemplo, puede mantener la selección predeterminada, “Este producto”, en el módulo Woo – Título para mostrar el título del producto de la página actual.

Divi - Woo - Título

Esta es la selección predeterminada, ya que por lo general querrá mostrar la información para el producto asociado con esa página.

Sin embargo, puede elegir mostrar el “Último producto”, lo cual mostraría el contenido del módulo para el último producto que se haya añadido a la tienda.

Divi - Woo - Título - Último producto

O puede seleccionar un producto individual de la lista de productos que haya creado en WooCommerce.

En el caso de que tenga muchos productos, puede usar la barra de búsqueda de la parte superior (el campo con la leyenda Comience a escribir), o las flechas de navegación Anterior / Siguiente que aparecerán en la parte inferior de la lista.

Contenido de texto personalizado

En la mayoría de los casos, cada módulo Woo es relativo a un producto en particular de manera dinámica. Esto significa que el contenido generado en la página proviene de la información añadida al producto en la interfaz de administración de WooCommerce. Por lo tanto, en la mayoría de los módulos Woo, todo lo que necesita hacer en realidad es seleccionar un producto. Sin embargo, algunos módulos Woo tendrán una opción para añadir un contenido de texto personalizado pertinente al módulo. Un buen ejemplo de esto es el módulo Woo – Miga de pan, que le permite añadir un texto personalizado al enlace de la página de inicio, así como también un carácter separador personalizado.

Divi - Woo - Miga de pan - Personalizar

Mostrar u ocultar elementos

Algunos módulos Woo tienen múltiples elementos que se pueden mostrar dentro de un módulo. Si este es el caso, el módulo Woo le permitirá mostrar u ocultar esos elementos específicos que le pertenecen. Por ejemplo, en el módulo Woo – Pestañas puede elegir incluir la descripción, la información adicional y/o las valoraciones dentro de las pestañas.

Divi - Woo - Mostrar u ocultar elementos

Cada módulo Woo también tendrá los grupos de opciones de contenido comunes a la mayoría de los módulos de Divi, tales como Enlace, Fondo y Etiqueta de administración.

Divi - Woo - Opciones de contenido

Diseño

Cada módulo de WooCommerce tendrá las mismas poderosas opciones de diseño que son comunes a todos los módulos de Divi. Estos incluyen –pero no están limitados a– los siguientes grupos:

  • Texto
  • Tamaño
  • Espaciado
  • Borde
  • Sombra
  • Filtros
  • Transformación
  • Animación

Los módulos Woo también tendrán ajustes de diseño específicos al módulo en particular. Por ejemplo, el módulo Woo – Pestañas tiene opciones de diseño para el texto del contenido y el título de la pestaña, por si necesita aplicar estilo a esos elementos específicos.

Podrá encontrar más información sobre los ajustes de diseño para cada módulo Woo en esta documentación.

Avanzado

También tendrá opciones avanzadas comunes a los módulos de Divi, que incluyen:

  • Clases e ID CSS
  • CSS personalizado
  • Visibilidad
  • Transiciones

Resumen de cada módulo Woo y sus ajustes

En total hay dieciséis módulos Woo con ajustes únicos. A continuación un breve resumen de cada uno, incluidas algunas opciones de diseño destacadas.

El módulo Woo – Miga de pan

Divi - Woo - Miga de pan

El módulo Woo – Miga de pan permite al usuario modificar el elemento de WooCommerce migas de pan, que sirve para ayudar a navegar el sitio y la tienda mostrando la ruta del producto.

Opciones clave del módulo Woo – Miga de pan

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Miga de pan incluye las siguientes:

  • Producto – Aquí es donde se selecciona el producto.
  • Texto del Inicio – Aquí es donde se crea el texto para el enlace a a página de inicio dentro de la miga de pan.
  • Enlace al Inicio – Aquí es donde se puede añadir una URL de redireción personalizada para el enlace del inicio.
  • Separador – Aquí se puede cambiar el separador con un carácter personalizado (por ej. “//”, “-”, “:”, “|”).

En la pestaña Diseño, puede usar el grupo de opciones de texto para aplicar estilo a los elementos con enlaces dentro de las migas de pan, aparte del texto del contenido. Esto permitirá a los usuarios distinguir entre la página actual y los enlaces a páginas superiores.

El módulo Woo – Título

 

Divi - Módulo Woo - TítuloEl módulo Woo – Título permite al usuario agregar y modificar el título del producto de WooCommerce. Puede elegir mostrar el producto de la página actual o mostrar cualquier otro producto existente. Con este módulo, podrá colocar el título en cualquier parte de la página, y este se actualizará de manera dinámica en caso de que lo modifique desde la página del producto individual.

Opciones clave del módulo Woo – Título

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Título incluye la siguiente:

  • Producto – Aquí es donde se selecciona el producto.

En la pestaña Diseño, puede usar el grupo de opciones de texto para aplicar estilo al título del producto, así como también elegir el nivel del encabezado (h1, h2, h3, etc.).

Esto le permitirá añadir múltiples títulos de producto a la página, y estps se actualizarán de manera dinámica.

El módulo Woo – Imágenes

Divi - Módulo Woo - Imágenes

El módulo Woo – Imágenes permite al usuario añadir y modificar los elementos de imagen del producto de WooCommerce. Con este módulo puede mostrar la imagen individual del producto y/o la galería de imágenes que presentan como un carrusel de miniaturas. También puede elegir mostrar y personalizar la placa de oferta que aparece sobre la imagen.

Opciones clave del módulo Woo – Imágenes

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Título incluye las siguientes:

  • Mostrar imagen destacada – Aquí puede elegir si la imagen del producto debe mostrarse o no.
  • Mostrar imágenes de la galería – Aquí puede elegir si la galería de productos debe mostrarse o no.
  • Mostrar placa de ofertas – Aquí puede elegir si la placa de oferta debe mostrarse o no.

En la pestaña Diseño, puede usar el grupo de opciones de imagen para aplicar estilo a la imagen principal e imágenes de la galería del producto de manera colectiva. También tiene opciones para aplicar estilos a la placa de oferta.

Divi - Módulo Woo - Galería

El módulo Woo – Galería permite al usuario añadir una galería de producto de WooCommerce. Con este módulo puede controlar y aplicar estilos a las imágenes de la galería de manera colectiva, tal como lo haría con el módulo estándar Galería de Divi.

Opciones clave del módulo Woo – Galería

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Galería incluye las siguientes:

  • Mostrar título y leyenda – Aquí puede elegir si se muestran o no el título y la leyenda de las imágenes, en caso de tener uno o ambos.
  • Mostrar paginación – Aquí puede elegir si se muestra o no la paginación.

El resto de los ajustes del módulo Woo – Galería será igual a los del módulo de Divi Galería.

El módulo Woo – Precio

Divi - Módulo Woo - Precio

El módulo Woo – Precio le da la posibilidad de añadir el precio del producto de WooCommerce a cualquier página, entrada o página de producto. Mostrará el precio asociado al producto seleccionado. Esto también incluye los distintos precios que correspondan a productos variables.

Opciones clave del módulo Woo – Precio

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Precio incluye las siguientes:

  • Precio Texto – Aquí puede aplicar estilos al texto y número del precio, incluyendo el símbolo de moneda.
  • Precio de oferta anterior Texto – Aquí puede aplicar estilo al precio del producto seleccionado antes de la oferta (si corresponde)
  • Precio de oferta nueva Texto – Aquí puede aplicar estilo al precio de oferta del producto seleccionado (si corresponde)

El módulo Woo – Añadir al carrito

Divi - Módulo Woo - Añadir al carrito

El módulo Woo – Añadir al carrito le permite diseñar el botón para añadir al carrito un producto de WooCommerce, así como también incluir el selector de cantidad y mostrar el número de unidades disponibles (si ha activada la gestión de inventario).

Un clic en el botón Añadir al carrito, añadirá al carro de compras el producto seleccionado.

El inventario del producto mostrará la cantidad de unidades disponibles para la compra (si corresponde).

El campo cantidad permitirá al usuario seleccionar la cantidad de productos que desee comprar.

Si desea desdoblar esos elementos en módulos separados para tener un mayor control en el diseño, puede reemplazar este módulo por dos módulos Woo que muestran la misma información: Woo – Añadir al carrito y Woo – Inventario.

Opciones clave del módulo Woo – Añadir al carrito

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Añadir al carrito incluye las siguientes:

  • Mostrar campo de cantidad – Aquí puede elegir si el campo de cantidad debe añadirse antes del botón Añadir al carrito.
  • Mostrar inventario – Aquí puede elegir si se muestra o no el número de existencias (cuando se gestiona el inventario del producto).

En la pestaña Diseño, puede controlar el diseño de cada uno de los elementos, con los grupos de opciones para:

  • Campos – Estas opciones aplicarán estilos al campo de cantidad.
  • Menús desplegables – Estas opciones aplicarán estilos al menú desplegable de los elementos que presentan atributos de producto variable añadidos en los ajustes de WooCommerce (si corresponde).
  • Botón – Estas opciones aplicarán estilos al botón Añadir al carrito.
  • Texto – Estas opciones aplicarán estilos al elemento de texto correspondiente a la cantidad de existencias del producto.

El módulo Woo – Valoración

Divi - Módulo Woo - Valoración

El módulo Woo – Valoración le permite añadir las calificaciones de usuarios para un producto de WooCommerce seleccionado. La valoración del producto mostrará el promedio de calificaciones de estrellas otorgado por los compradores. También mostrará la cantidad de reseñas de los usuarios como un enlace. El elemento de valoración solo se mostrará si al menos se ha dejado una reseña para ese producto.

También puede usar los ajustes de diseño integrados de Divi para controlar la apariencia de la valoración del producto con facilidad.

Opciones clave del módulo Woo – Valoración

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Valoración incluye las siguientes:

  • Mostrar valoración con estrellas – Aquí puede elegir si se muestra o no la calificación con estrellas del producto.
  • Mostrar número de reseñas de clientes – Aquí puede elegir si se muestra o no la cantidad de reseñas del producto realizadas por los clientes.

En los ajustes de diseño puede personalizar las siguientes características:

  • Diseño – Aquí puede elegir si los elementos se muestran en línea o apilados.
  • Valoración con estrellas – Aquí puede aplicar estilo a los iconos de las estrellas.
  • Texto – Estas opciones sirven para aplicar estilo al texto del número de reseñas.

El módulo Woo

Divi - Módulo Woo - Inventario

El módulo Woo – Inventario le permite añadir la cantidad de existencias de un producto de WooCommerce a cualquier página de Divi. Esto permite al usuario saber si el producto está disponible y cuántas unidades hay en inventario. También puede usar los ajustes de diseño integrados para controlar la apariencia del texto.

Opciones clave del módulo Woo – Inventario

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Inventario incluye las siguientes:

  • Hay existencias Texto – Con estas opciones puede aplicar estilos al texto del inventario.
  • Agotado Texto – Con estas opciones puede aplicar estilos al texto “Agotado”.
  • Disponible para reserva Texto – Con estas opciones puede aplicar estilos al texto “Disponible para reserva”.

El módulo Woo – Meta

Divi - Módulo Woo - Meta

El módulo Woo – Meta le permite añadir la sección de información meta del producto de WooCommerce a cualquier página de Divi. Esa sección incluye elementos tales como el SKU del producto, las categorías y las etiquetas. No solo puede elegir los elementos para mostrar, sino también puede usar los ajustes de diseño integrados para cambiar con facilidad la apariencia de la sección meta.

Opciones clave del módulo Woo – Meta

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Meta incluye las siguientes:

  • Separador – Aquí puede cambiar el separador de los metadatos con un carácter personalizado (por ejemplo, “//”, “-”, “:”, “|”)
  • Mostrar SKU – Aquí puede elegir si se muestra o no el SKU del producto.
  • Mostrar categorías – Aquí puede elegir si se muestran o no las categorías del producto.
  • Mostrar etiquetas – Aquí puede elegir si se muestran o no las etiquetas del producto.

En la pestaña Diseño puede cambiar la presentación de los metadatos para que se muestren en línea o apilados. También hay un grupo de opciones Texto para aplicar estilos al texto de la sección meta.

El módulo Woo – Descripción

Divi - Módulo Woo - Descripción

El módulo Woo – Descripción le permite añadir la descripción o la descripción corta del producto de WooCommerce a cualquier página de Divi. Con los ajustes de diseño integrados, puede controlar la apariencia con facilidad.

Opciones clave del módulo Woo – Descripción

Además de las opciones comunes a todos los módulos de Divi, Contenido, Diseño y Avanzado, el módulo Woo – Descripción incluye las siguientes:

  • Tipo de descripción – Aquí puede elegir mostrar la descripción del producto o la descripción corta.

El resto de los ajustes del módulo Woo – Descripción será igual a los del módulo de Divi Texto, incluyendo opciones de estilo para el contenido y el título.

El módulo Woo – Pestañas

Más módulos próximamente…

Compartir en facebook
Facebook
Compartir en google
Google+
Compartir en twitter
Twitter
Compartir en linkedin
LinkedIn
Compartir en whatsapp
WhatsApp
Compartir en skype
Skype
Compartir en email
Enviar por correo
Compartir en print
Imprimir

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba