Seleccionar página

 

Como seguro que ya sabéis soy un incondicional de la plantilla Divi para WordPress. Es sin lugar a dudas, una de mis plantillas favoritas cuando se trata de crear una tienda con Woocommerce. Aquí te dejo un enlace a una categoría de mi blog horizonweb solo dedicada a la plantilla Divi: Categoría Divi.

En este post vamos a ver las características específicas de Divi para Woocommerce. Vamos a ver principalmente el módulo tienda del Divi Builder y los módulos Woocommece que incluye el page builder.

NOTA IMPORTANTE: En este post se analiza el que antiguamente se llamaba módulo tienda, que cambió de nombre y ahora se llama módulo Woo Products. Aunque siguen siendo lo mismo. La ubicación del módulo también ha cambiado. Ahora está dentro del módulo: «Woo Modules»

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

MEGA GUÍA DE LA PLANTILLA DIVI: Mega guía Divi
Más info Funcionamiento del Divi Builder. El constructor de Divi: Divi Builder
Amplía las funcionalidades de Divi específicas para tienda online: Plugins Divi Woocommerce

 

 

 

Como puedes imaginar Divi es compatible con Woocommerce. Este no es un tema menor, cuando vayas a elegir una plantilla para Woocommerce debes estar seguro de que la plantilla es compatible con Woocommerce ya que si no tendrás problemas. Existen dos planes para poder comprar Divi. Vamos a verlos a continuación:

 

 

Ahora 10% de descuento

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins. Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 10% se te quedará en 80 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $80 con el descuento ya aplicado.

DESCUENTO  PLAN YEARLY ACCESS

 

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins. Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 10% se te quedará en 224$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO  PLAN LIFE TIME ACCESS

 

 

 

ÍNDICE TIENDA ONLINE CON DIVI & WOOCOMMERCE + MÓDULOS WOOCOMMERCE

 

 

1.- EL MÓDULO TIENDA (Ahora módulo Woo Products) DE DIVI

 

Divi dispone de un constructor o page builder denominado Divi Builder. Un constructor o page builder aporta una extraordinaria flexibilidad de composición y diseño a la hora de crear una página en WordPress.

El divi builder dispone de un constructor visual tipo Frontend y de un constructor tipo backend. El constructor tipo frontend ha sido la principal novedad de Divi 3.0, poniendo tierra de por medio con el resto de plantillas para wordpress.

Aquí tienes más información sobre el page builder tipo backend y aquí sobre las novedades de Divi 3.0, entre la que destaca el page builder tipo frontend.

El page builder de Divi está formado por secciones, filas y módulos. Los módulos son los elementos finales en las composiciones.

Divi dispone de un módulo específico para introducir productos de woocommerce en cualquier página de WordPress. Este es el “módulo tienda” (Ahora woo products)

Con el módulo tienda podremos crear un bloque en el que mostrar productos de la tienda. En una página de wordpress podremos incluir uno o varios módulos tipo tienda.

Habitualmente usaremos el módulo tienda de Divi en la página de inicio o home de la tienda online. Incluyendo uno o varios bloques de productos de diferentes características.

Para Woocommerce y Divi, el mejor hosting que puedes contratar es con Webempresa. Un hosting especializado en WordPress y Woocommerce. Aquí tienes un mega descuento Webempresa

 

 

1.1.- Configuración Módulo Tienda (Woo products) de Divi

 

En el módulo tenemos dos pestañas. La de “ajustes generales” y la de “ajustes avanzados de diseño”. En la de ajustes generales filtraremos que productos aparecerán en la tienda y su disposición y en la pestaña de ajustes de diseño personalizaremos la parte estética.

 

Personalizar el módulo tienda de la plantilla Divi

Configurar Módulo tienda de Divi

 

En la pestaña de ajustes generales del módulo tienda tenemos:

 

A) Tipo:

Aquí seleccionaremos qué tipo de productos van a mostrarse en el bloque. Podremos elegir entre:

*Productos recientes: si seleccionamos esta opción solo aparecerán en este bloque los últimos productos añadidos a woocommerce

*Productos destacados: esta es mi opción favorita. Si marcamos esta opción solo aparecerán en el bloque los productos que hayamos marcado como destacados. Es decir, solo aparecerán los productos que nosotros queramos.

Para marcar un producto como destacado debes ir a “Productos > Productos” y hacer clic en el icono “estrella” del producto que queremos marcar como destacado.

 

Productos destacados de woocommerce en Divi

Marcar un producto de woocommerce como destacado

 

*Productos en oferta: en este caso aparecerían en el módulo solo los productos que tienen descuento.

*Productos más vendidos: si seleccionamos esta opción solo aparecerán los productos más vendidos de la tienda.

*Productos mejor valorados: en este caso aparecerían los productos mejor valorados de la tienda. Según las valoraciones que hacen los usuarios de los productos.

*Categoría de producto: esta opción también es muy interesante ya que podemos hacer que en el bloque solo se muestren los productos que pertenecen a una determinada categoría. Al marcar esta opción se despliega otra en la que puedes marcar las categorías cuyos productos quieres que aparezcan.

 

Filtrar productos por categoría en el modulo tienda de divi

Mostrar procutos que pertenecen a determinadas categorias

 

B) Número de artículos: Aquí indicaremos el número máximo de productos que queremos que se muestren en el bloque.

 

C) Cantidad de columnas: desde aquí estableceremos el número de columnas en las cuales queremos que se muestren los productos. Evidentemente, a mayor número de columnas los productos saldrán más pequeños.

Podemos elegir entre: 6 columnas, 5, 4, 3, 2 y 1 columna.

 

D) Ordenar por: aquí estableceremos la forma de ordenar los productos que van a aparecer en el bloque. Es decir, que criterio aplicaremos para indicar que productos aparecerán primero y cuales después. Podremos elegir entre: ordenar por popularidad, ordenar por puntuación, ordenar por fecha, ordenar por precio de menor a mayor y ordenar por precio de mayor a menor.

 

E) Desactivar el: aquí podemos elegir si queremos que el bloque no aparezca en algún tipo de dispositivo

 

F) Etiqueta de administración: este es el nombre del módulo (no lo cambiamos).

 

En la siguiente imagen puedes ver cómo quedaría el “módulo tienda” (Woo products) en la home de una tienda online realizada con Woocommerce y con la plantilla Divi (Mipequenoutlet).

El módulo sería lo que hay dentro del rectángulo naranja como he indicado con una flecha. En la parte superior del módulo se ha incluido un módulo de texto con el título: “Productos destacados”.

 

Ejemplo de como se ve el modulo tienda de divi, caso real

Modulo tienda añadido a una tienda woocommerce con Divi

 

Tanto el módulo de texto como el módulo de la tienda están dentro de una sección con color de fondo blanco.

Se podrían crear varios de estos bloques. Por ejemplo uno con productos destacados y otro con productos nuevos.

 

Aparte de la pestaña de “Ajustes generales” del módulo tienda de Divi, tienes también la pestaña de “Ajuste avanzados de diseño” donde podrás personalizar el tipo y diseño de la fuente de texto del título de producto y el precio, así como diseño del icono y capa que aparece al pasar el ratón por un producto.

DESCUENTO DIVI

 

 

2.- DIFERENTES DISEÑOS DE TIENDA CON EL MÓDULO TIENDA DE DIVI Y WOOCOMMERCE

 

Continuamos viendo las posibilidades de la plantilla Divi para Woocommerce, realizando diseños personalizados de la página de inicio con el módulo tienda de Divi.

 

MEGA GUÍA DE LA PLANTILLA DIVI : Mega Guía Divi
DESCUENTO DIVI

 

Vamos a dar un paso más allá en el diseño de nuestra tienda online con Woocommerce y la plantilla Divi. Cada plantilla muestra los productos de Divi con un determinado diseño y normalmente tampoco tienen muchas opciones de personalización. En la siguiente imagen puedes ver como muestra por defecto el módulo tienda de Divi los productos de Woocommerce.

 

Apariencia normal modulo tienda de divi para woocommerce

Apariencia estándar del módulo tienda de Divi

 

Personaliza al máximo tu tienda Woocommerce con este plugin para ampliar las funcionalidades de Divi como tienda online: Divi Shop Extended

Para crear la mayoría de diseños que vamos a ver a continuación, de manera general tendremos que seguir lo siguientes pasos:

i.- Crea una nueva página

ii.- Hacer clic en “Usar el constructor divi”

iii.- Insertar columna (s) en la fila que viene por defecto en el constructor

iv.- Seleccionar la primera opción (anchura completa)

v.- Hacer clic en insertar módulo

vi.- Elegir el módulo “Tienda”.

 

A continuación se abrirá la pestaña general de la configuración del módulo tienda de Divi.

 

 

2.1- Diseño módulo tienda Divi en la home «Tarjeta Plana” (FLAT CARD)

 

A ver qué te parece este diseño sencillo y elegante con el modulo tienda de Divi, muy interesante para tiendas online de ropa, pastelerías y otras. Aunque si cambiamos el tipo de letra utilizado y el color de fondo realmente nos puede valer para cualquier tipo de tienda online.

 

Diseño elegante con Woocommerce y divi

Diseño elegante con el módulo tienda de Divi

 

Una vez realicemos los pasos generales anteriores ahora haremos lo siguiente:

En la pestaña “Ajustes avanzados de diseño” del módulo tienda de la plantilla Divi podremos cambiar la fuente y tamaño de texto y precio. Para este diseño Flat Card pondremos:

a.- Fuente para el título: Satisfy con tamaño 30

b.- Título color de texto: ponemos #f35c81

c.- Fuente para el precio: Lato con tamaño 20

d.- Precio color del texto: ponemos #f35c81

 

ajuestes modulo tienda de divi con woocommerce

Ajustes de diseño modulo tienda divi

 

Ahora vamos a proceder a cambiar el color de fondo de los productos y a centrar los textos.

 

SUPER DESCUENTO DIVI

 

a.- color de fondo del producto: para cambiar el color de fondo del producto iremos a la pestaña “CSS Personalizado” y pondremos el siguiente código CSS de color en el bloque “Producto”:


background-color: #ffebee;

 

Ajustes CSS personalizado modulo tienda en el bloque producto

Ajustes CSS Personalizado modulo tienda

 

(Nota: puedes cambiar el código de color por el que quieras)

 

b.- Centrar textos y padding inferior: para centrar el nombre de producto y el precio seguiremos en la pestaña “CSS Personalizado”. En primer lugar pondremos el siguiente código en el bloque “Título”


text-align: center;

En el bloque “Precio” pondremos el siguiente código:

text-align: center;


padding-bottom: 15px;

 

 

Para Woocommerce y WordPress, el mejor hosting es Webempresa. Un hosting especializado en Woocommerce y WordPress. Aquí tienes super descuento Webempresa

 

 

2.2.- Diseño página inicio módulo tienda «Material Card»

 

Vamos a ver ahora un diseño parecido al Flat Card que antes hemos visto, añadiendo un sombreado que le da una sensación de 3 dimensiones o textura.

En principio debemos añadir el módulo tienda de Divi como hemos comentado al principio del post.

 

En la pestaña Ajustes avanzados de diseño:

 

a.- Título fuente: Cantana one

b.- Título tamaño de fuente: 18

c.- Precio fuente: Open Sans

d.- Precio de tamaño de fuente: 17

 

 

En la pestaña CSS Personalizado:

Iremos al bloque Producto y pondremos el siguiente código para dar ese relieve a los productos.


-webkit-box-shadow: 10px 5px 0px rgba(0,0,0,0.4);


-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);


box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);

 

borde sombreado productos modulo tienda de divi

Diseño productos divi woocommerce con borde sombreado

 

 

2.3.- Diseño página Inicio Minimalista Módulo tienda Divi

 

Si quieres un diseño minimalista en el que no aparezca ni el nombre del producto ni el precio, tras el proceso habitual de añadir el módulo de tienda de Divi iremos a la pestaña “CSS Personalizado” del módulo y pondremos en los bloques “Título” y “Precio” el código:

visibility: hidden;

Luego puedes personalizar el apartado “Color de capa superpuesta al pasar el ratón” de la pestaña “Ajustes avanzados de diseño”, si la pones transparente aun será más minimalista.

Sólo te quedaría ya personalizar el “Color de icono al pasar el ratón”.

 

Módulo tienda divi para woocommerce sin precio ni titulo

Diseño minimalista sin precio ni título con modulo tienda de Divi

 

SUPER DESCUENTO DIVI

 

 

2.4.- Diseño Home Módulo tienda divi mala sin margen

 

Para conseguir que salgan los diferentes productos sin margen entre ellos tendrás que añadir el módulo tienda como hemos realizado en las anteriores ocasiones.

Haz clic en la configuración de la fila (ojo!, no del módulo sino de la fila) y en la pestaña ajustes generales ve al apartado “El uso personalizado de Canalón de ancho” (separación personalizada) y marca «SI».

En el apartado de abajo “Espacio entre columnas” pon el selector en 0 (aquí estarás definiendo el margen entre elementos).

 

Productos modulo tienda woocommerce sin margen

Productos sin margen

 

 

2.5.- Filas combinadas con diferentes números de Productos

 

Otro efecto interesante sería añadir varios módulos tipo tienda (uno debajo de otro) pero con diferente número de columnas.

Recuerda que el número de columnas lo puedes encontrar en la pestaña “Ajustes generales” del módulo “tienda” de Divi. Concretamente en el apartado “Cantidad de columnas”.

En el diseño del ejemplo el módulo tienda superior tiene 3 columnas y el inferior 5 columnas.

Además si quieres que no aparezca el precio y título del producto como en el ejemplo, ya sabes que debes ir a la pestaña “CSS Personalizado” del módulo tienda de Divi y poner el siguiente código en el bloque título y el bloque precio:


visibility: none;

filas combinadas con divi y woocommerce

Filas con varias columnas de productos con divi y woocommerce

 

 

 

3.- OCULTAR O VISUALIZAR EL SIDEBAR EN WOOCOMMERCE CON DIVI

 

Esta cuestión me la han planteado en varias ocasiones en los comentarios del blog. Por defecto en algunas pantallas de woocommerce te aparecerá el sidebar o barra lateral.

Según cual sea la página de woocommerce en el que se muestre el sidebar se ocultará desde un lugar u otro:

 

A) Sidebar en Categorías y página de la tienda: para eliminar el sidebar en las páginas de categorías de Woocommerce con Divi o para eliminarlo de la página principal de la tienda (midominio.com/tienda) debemos ir a “Divi > Opciones del tema”. Ahora en la pestaña general busca la opción: “Diseño de página de tienda y de la página de categorías para Woocommerce”. Podrás seleccionar 3 opciones:

Barra lateral derecha: mostramos el sidebar en el lateral derecho

Barra lateral izquierda: mostramos la barra lateral en el lateral izquierdo

Ancho completo: con esta opción eliminamos la barra lateral o sidebar

 

mostrar u eliminar sidebar en woocommerce con divi

Mostrar u ocultar sidebar en páginas de catogorías y tienda en Woocommerce

 

 

B) Sidebar en el resto de páginas de woocomemrce: para ocultar o visualizar la barra lateral en el resto de páginas de woocommerce utilizando la plantilla Divi, como por ejemplo en las páginas: página del carrito, página de registro, página de un producto, etc. Tendrás que acceder a la página en concreto y buscar el bloque: “Ajustes de página de Divi”.

En el bloque verás una opción que dice: “Diseño de página” y podrás elegir entre:

Barra lateral derecha: muestra la barra lateral a la derecha

Barra lateral izquierda: muestra el sidebar o barra lateral en la zona izquierda

Ancho completo: oculta el sidebar y el contenido ocupará toda la página

 

mostrar u ocultar barra lateral en paginas woocommerce

Mostrar u ocultar sidebar en páginas

 

SUPER DESCUENTO DIVI

 

 

4.- MÓDULOS WOOCOMMERCE DE DIVI

 

A partir de la versión 3.29 de Divi, se incluyen en el divi builder los módulos Woocommerce. Los módulos Woocommerce nos van a permitir personalizar totalmente la página de producto o ficha de producto de Woocommerce utilizando la plantilla Divi.

 

Con el theme builder de Divi, que incluye la palntilla Divi a partir de la versión 4.0. Podremos asignar un diseño personalizado de ficha de producto a todos los productos de la tienda. También podremos asignar un diseño para unos productos y otro diseño diferente para otros productos. Es decir, podremos hacer casi cualquier cosa que se nos ocurra. Echa un vistazo a la primera parte de este post y el vídeo, donde se habla del Theme builder: Divi 4.0 y el theme builder

 

 

4.1.- Opción “Product” en módulos Woocommerce de Divi

 

No solo podremos personalizar la página de producto de nuestra tienda Woocommerce. Sino que podremos crear páginas especiales donde podremos mostrar varios productos con sus correspondientes botones de añadir al carrito.

¿y esto cómo es posible?

Gracias a que en la configuración de determinados módulos Woocommerce encontrarás un selector denominado “Producto”.

En este selector, por defecto, vendrá seleccionada la opción “este producto” (This product) que es la opción normal cuando estamos creando una estructura para todas las páginas de producto. Pero, con este selector también podremos elegir cualquier producto de la tienda. Por lo que podremos crear páginas en las que insertemos varios productos con sus correspondientes botones de “Añadir al carrito”, con el diseño que queramos, y dichos productos estarán perfectamente operativos para ser añadidos al carrito de la tienda.

 

elegir producto opción modulos woocommerce

Selector «Producto» en módulos Divi Woocommece

 

 

 

4.2.- Cómo crear una página de producto con el Divi builder y Woocommerce.

 

Puedes crear una ficha de producto para todos los productos de tu tienda o crear varios diseños diferentes para diferentes productos. Para crear un diseño común a todos los productos, podemos hacerlo de varias formas, una de ellas sería hacerlo creando un producto en Woocommerce.

Posteriormente, lanzaremos el constructor Divi haciendo clic en el botón “Usar el constructor Divi”. Se nos mostrará el diseño estándar de la ficha de producto que modificaremos y personalizaremos con los módulos Woocommerce hasta dejarlo a nuestro gusto.

Posteriormente guardaremos todo el diseño de la ficha de producto haciendo clic en el icono con forma de círculo cortado por una flecha hacia abajo: “Guardar en la biblioteca”. Podremos nombre al diseño y guardaremos.

Ahora cada vez que vayamos a crear un nuevo producto en la tienda, lanzaremos el constructor, y haremos clic en el icono en forma de signo “+”: Cargar de biblioteca” y cargaremos el diseño de la ficha de producto.

 

 

4.3.- Módulos Divi para Woocommerce incluidos en el Divi builder

 

Vamos a ir haciendo un recorrido por los diferentes módulos para Woocommerce según su posición habitual en la ficha de producto. Empezaremos por la parte superior de la página e iremos desplazándonos hacia abajo.

 

 

4.3.1.- Módulo Divi Woo BreadCrumb (módulo Woo migas de pan)

 

Este módulo sirve para mostrar las migas de pan o bread crumbs en la ficha de producto. Las migas de pan indicarán la visitante la ruta hasta llegar a la página de producto.

Por ejemplo: Inicio > Complementos hombre > zapatos

Además, cada palabra de las migas de pan será un enlace para acceder a esa ubicación en la web. En la pestaña: “contenido” podremos establecer la posición de inicio del breadcrumb y ponerle el correspondiente enlace, así como establecer el separador.

Habitualmente se coloca en la parte superior de la ficha de producto.

 

 

 

4.3.2.- Módulo Divi Woo Cart Notice (Módulo notificación de añadir al carrito)

 

Después de que un usuario haga clic en el botón de añadir al carrito, este módulo es el encargado de mostrar el aviso de que el producto ha sido añadido correctamente y mostrar un botón que lleve directamente al carrito de Woocommerce.

Habitualmente se coloca en la parte superior de la ficha de producto. Ten en cuenta que este aviso solo aparecerá cuando un visitante añada un producto al carrito.

 

 

4.3.3. – Módulo Divi Woo Images (Módulo imagen Woocommerce)

 

Este módulo es en encargado de mostrar la imagen de producto y la galería. El módulo nos permitirá mostrar u ocultar:

a.- Mostrar la imagen de producto: mostrar o no la imagen destacada

b.- Mostrar la galería de imágenes: Show gallery images

c.- Mostrar el cartelito de venta: Show sale badge o credencial de venta

 

 

Posiciones modulos woocommerce de divi

Módulos Woocommerce de Divi

 

SUPER DESCUENTO DIVI

 

 

4.3.4.- Módulo Divi Woo Title (Módulo título producto Woocommerce)

 

Este módulo es el encargado de mostrar el título del producto.

 

 

4.3.5.- Módulo Divi Woo Raiting (Módulo valoraciones)

 

Este módulo es el encargado de mostrar una media de las valoraciones del producto realizadas por los clientes e indicar el número de valoraciones realizadas. Habitualmente se suele colocar bajo el título de producto. Si aún no hay valoraciones del producto, este módulo no se mostrará.

Desde la configuración podemos establecer si mostrar las “estrellitas” y el nº de valoraciones.

 

 

4.3.6.- Módulo Woo Price (Módulo precio de producto)

 

Este módulo es el encargado de mostrar el precio del producto. Con este módulo podremos establecer también el diseño del precio original y el precio con descuento.

 

 

4.3.7.- Módulo Divi Woo Description (Módulo Descripción)

 

Este es el módulo encargado de mostrar la descripción corta del producto. Es decir, la descripción que habitualmente aparece en la parte superior de la ficha de producto, debajo del precio.

Bueno, realmente con este módulo podríamos mostrar tanto la descripción corta como la descripción larga. Esta elección la realizamos desde la pestaña de contenido de la configuración del módulo. Concretamente desde el selector: “Description Type (Tipo de descripción)”. Desde este selector podremos elegir:

a.- Description (Descripción): Descripción larga del producto, que habitualmente se pone en la parte inferior de la ficha de producto

b.- Short Description (Descripción corta): Descripción corta que habitualmente se coloca en la parte superior de la ficha de producto.

 

 

4.3.8.- Módulo Divi Woo Add to cart (Módulo añadir al carrito Woocommerce)

 

Este módulo sirve para la visualización y diseño de varios elementos:

a.- Campo de unidades: campo para establecer cuantas unidades del producto se quieren añadir al carrito

b.- Botón de añadir al carrito: botón para añadir el producto al carrito.

c.- Selector de variaciones: selectores a través de los cuales el cliente podrá seleccionar el valor correspondiente al atributo, según la variación o combinación de producto que quiera añadir al carrito. Todo esto en caso de que el producto sea un producto con atributos. Es decir, un producto variable.

d.- Stock: stock o existencias del producto, en caso de que en Woocommerce esté configurado para que se muestre.

 

Opciones principales de visualización:

Desde la pestaña “Contenido > Elementos” podremos establecer si mostrar el campo de stock y el de selección de unidades de producto.

Desde “Diseño > Campos” personalizaremos el diseño del selector de variaciones y el campo para elegir el número de unidades.

Desde “Diseño > botón” personalizaremos el diseño del botón de añadir al carrito.

 

 

4.3.9.- Módulo Divi Woo Meta (Módulo meta información)

 

Este módulo muestra meta información como la categoría a la que pertenece el producto, tags o la referencia del producto SKU. Desde la configuración del módulo podremos seleccionar que elementos de la meta información de producto mostrar y cuales no. Además, de personalizar su diseño.

SUPER DESCUENTO DIVI

 

 

4.3.10.- Módulo Additional Info (Módulo información adicional)

 

Este módulo permite poner el título de “información adicional” que suele mostrarse encima de las pestañas de información adicional, correspondientes al Módulo Woo Tabs, que veremos en el siguiente apartado.

 

Módulos Woocommerce del divi builder

Módulos Woocommerce del Divi Builder de la parte inferior de la ficha de producto

 

 

4.3.11.- Módulo Divi Woo Tabs (Módulo pestañas de información)

 

Este módulo se utiliza para mostrar varias pestañas con información sobre el producto como: descripción larga, ficha técnica (características) y valoraciones (reviews).

Además de personalizar el diseño o apariencia del contenedor de pestañas, también podremos seleccionar que pestañas se deben mostrar y cuales no. Podremos hacerlo desde la pestaña contenido de la configuración del módulo.

Este módulo se suele colocar en la parte inferior de la ficha de producto.

 

 

4.3.12.- Módulo Divi Woo Reviews (Módulo valoraciones 2)

 

Este módulo mostrará las valoraciones y comentarios realizados por los clientes sobre el producto y los campos necesarios para poder hacer una nueva valoración.

Habitualmente esta funcionalidad aparece incluida en las pestañas del bloque de más información del producto (módulo Woo related producto, que veíamos antes). Pero, podemos usar este módulo para mostrar esta funcionalidad fuera de dicho bloque de pestañas. Para hacerlo simplemente tendremos que añadir este módulo y en el módulo Woo Reviews desactivar la opción de mostrar reviews.

 

 

4.3.13.- Módulo Divi Woo Gallery (Módulo galería de imágenes)

 

En primer lugar, debemos tener en cuenta que el módulo Woo images ya muestra la galería de imágenes del producto.

Entonces ¿para qué sirve este módulo?

Este módulo muestra la galería de imágenes del producto a modo de slider. El uso de este módulo es poco común en la ficha de producto. Sobre todo, si estamos usando el módulo Woo Image

 

 

4.3.14.- Módulo Divi Woo Stock (Módulo inventario o stock)

 

Con este módulo podrás visualizar el número de stock del producto. Es decir, el número de unidades disponibles.

Ten en cuenta que Woocommerce ha de estar configurado también para que se utilice el stock y que éste se muestre. Habrás visto que en el módulo Woo add to cart ya era posible mostrar el stock justo encima del selector de unidades.

Con el módulo Woo Stock, podremos mostrar el stock en otro parte de la ficha de producto.

 

 

4.3.15.- Módulo Divi Woo Upsell (Módulo ventas cruzadas)

 

Este módulo permite, a través de las ventas cruzadas, mostrar otros productos que podemos configurar desde: “Productos relacionados > ventas dirigidas”.

En la configuración del módulo podremos establecer el nº máximo de productos a mostrar y el número de columnas a mostrar en la rejilla.

Habitualmente, este bloque se muestra al final de la ficha de producto.

 

 

4.3.16.- Módulo Divi Woo Related product (Módulo posts relacionados)

 

Con este módulo podremos mostrar el bloque de productos relacionados de ficha de producto. Desde este módulo podremos personalizar el diseño, el número de columnas a mostrar y el número máximo de productos que aparecerán.

Los productos que se muestran en el bloque lo establece automáticamente Woocommerce.

DESCUENTO DIVI + CURSOS REGALO

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO CLAVES PARA CREAR UNA TIENDA ONLINE DE ÉXITO (9 Clases)
2.- CURSO PRESTASHOP (56 Clases)
3.- CURSO WOOCOMMERCE (39 Clases)
4.- CURSO ACTUALIZACIONES Y SEGURIDAD PRESTASHOP (7 Clases)
5.- CURSO ACTUALIZACIONES Y SEGURIDAD WORDPRESS (9 Clases)
6.- CURSO SEO TIENDAS ONLINE (12 Clases)
7.- CURSO PLANTILLA WAREHOUSE (26 Clases)
8.- CURSO PLANTILLA FLATSOME (36 Clases)
9.- MC: GOOGLE ANALYTICS PARA ECOMMERCE
10.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
11.- CURSO BLOG PRESTASHOP (12 Clases)
12.- CURSO WORDPRESS (44 Clases)
ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com