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.

 

 

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.

 

 

Ahora 20% 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 20% se te quedará en 70 $ + 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 $70 con el descuento ya aplicado.

DESCUENTO 20% 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 20% se te quedará en 199$ + 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 20% PLAN LIFE TIME ACCESS

 

 

 

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

 

 

1.- EL MÓDULO TIENDA 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”.

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 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” 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.

 

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;