Como seguro que ya sabéis soy un incondicional de la plantilla Divi para WordPress. También es mi plantilla favorita 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.

 

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


VER CURSOS

 

 

 

Amplía las funcionalidades de Divi específicas para tienda online: Plugins Divi Shop Extended

 

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.

 

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

 

DESCUENTO PLANTILLA DIVI

 

 

 

 

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

 

 

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

 

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.