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
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.
->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
- 2.- DIFERENTES DISEÑOS DE TIENDA CON EL MÓDULO TIENDA DE DIVI Y WOOCOMMERCE
- 3.- OCULTAR O VISUALIZAR EL SIDEBAR EN WOOCOMMERCE CON DIVI
-
4.- MÓDULOS WOOCOMMERCE DE DIVI
- 4.1.- Opción “Product” en módulos Woocommerce de Divi
- 4.2.- Cómo crear una página de producto con el Divi builder y Woocommerce.
-
4.3.- Módulos Divi para Woocommerce incluidos en el Divi builder
- 4.3.1.- Módulo Divi Woo BreadCrumb (módulo Woo migas de pan)
- 4.3.2.- Módulo Divi Woo Cart Notice (Módulo notificación de añadir al carrito)
- 4.3.3. – Módulo Divi Woo Images (Módulo imagen Woocommerce)
- 4.3.4.- Módulo Divi Woo Title (Módulo título producto Woocommerce)
- 4.3.5.- Módulo Divi Woo Raiting (Módulo valoraciones)
- 4.3.6.- Módulo Woo Price (Módulo precio de producto)
- 4.3.7.- Módulo Divi Woo Description (Módulo Descripción)
- 4.3.8.- Módulo Divi Woo Add to cart (Módulo añadir al carrito Woocommerce)
- 4.3.9.- Módulo Divi Woo Meta (Módulo meta información)
- 4.3.10.- Módulo Additional Info (Módulo información adicional)
- 4.3.11.- Módulo Divi Woo Tabs (Módulo pestañas de información)
- 4.3.12.- Módulo Divi Woo Reviews (Módulo valoraciones 2)
- 4.3.13.- Módulo Divi Woo Gallery (Módulo galería de imágenes)
- 4.3.14.- Módulo Divi Woo Stock (Módulo inventario o stock)
- 4.3.15.- Módulo Divi Woo Upsell (Módulo ventas cruzadas)
- 4.3.16.- Módulo Divi Woo Related product (Módulo posts relacionados)
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.
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.
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.
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.
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”.
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.
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 estándar del módulo tienda de Divi
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 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
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
(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;
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);
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”.
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 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 con varias columnas de productos con divi y woocommerce
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 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 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.
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.
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.
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
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 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.
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
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola! Queremos abrir una tienda online con woocommerce. Ya tenemos wordpress y el plugin woocommerce instalado sin nada personalizado.
Ahora queríamos instalar este tema de DIVI: https://www.elegantthemes.com/layouts/business/hardware-store-home-page
Pero no sabemos cómo. ¿hay que descargarse previamente algún puglin de DIVI?
En el paso a paso que aparece en la pág. del tema no nos queda claro cuando pone «añadir nueva página» porque no visualizamos lo mismo que la captura de ese paso a paso.
Así que, suponemos que algo nos falta o estamos haciendo. ¿puedes ayudarnos?
Buenas Esther,
Has de tener el tema Divi instalado. Aquí te paso enlaces con infromación:
Descuento Divi: https://www.xn--diseowebmurcia1-1qb.es/planes-precios-descuentos-elegant-themes/
Plantillas de Divi instalar layotus: https://www.xn--diseowebmurcia1-1qb.es/disenos-demos-layouts-gratis-paginas-wordpress-divi/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso Blog WordPress, Curso seguridad y actualizaciones en wordpress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso seguridad y actualizaciones en WordPress, Curso Divi, Curso Flatsome, Curso Elementor, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, Curso como gestionar un blog, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, etc… (Más de 30 cursos)
Hola Joaquin,
Soy asiduo tuyo desde hace ni se sabe…Aprendo ni se sabe!
Una pregunta, sabes cómo poner las estrellas de valoración para que se vean en cada producto? O plugging…
Gracias!
Javier
Hola Javier,
un placer saludarte
Con el Theme builder y los módulos de Woocommerce divi, que se comentan en este post, puedes crear una ficha de producto personalizada. En ella podrás mostrar las estrellitas de las reviews, ya que tienes disponible el módulo «Divi Woo Raiting» (Módulo valoraciones)
Hola Joaquin, primero darte las gracias por tus articulos, tengo un problema con el tema divi, y es que las imagenes de la ficha de producto aparecen muy pequeñas cuando utilizo el constructor, hay alguna manera de solucionarlo?
Hola David.
Así, sin acceder a tu instalación no sé que puede ser.
Lo primero que haría sería tenerlo todo actualizado y si persiste el problema acudir al soporte de Elegant themes
Hola Joaquín, gracias por este post.
Estoy a punto de comprar el tema, pero tengo una duda, ¿se pude crear una pagina de producto personalizada y que sea esa por defecto para todos los productos?. tengo que subir muchos productos por CSV y no quiero tener que entrar uno a uno a modificar la ficha del producto, o a tener que cargarlo de la biblioteca.
Gracias
Hola Daniel.
Sí es posible ahora gracias al theme builder de Divi.
Echa un vistazo a este post (solo al apartado 1) correspondiente a Divi 4.0 y el theme builder): Divi 4.0 y el theme builder
También echa un vistazo a este vídeo para que veas un poco de que va el theme builder: https://www.youtube.com/watch?v=vm293otHxWE
un saludo
Voy a echarle un vistazo!
Muchas gracias!!!
Hola, muchas gracias por todas tus publicaciones. Para mi son de gran ayuda.
¿Hay alguna manera de mostrar la fotografía de la categoría en una página de tienda hecha con DIVI en lugar de los productos?
Gracias.
Hola María josé.
El módulo tienda de Divi solo sirve para mostrar Productos, no es posible mostrar categorías con él
Hola Joaquín,
En primer lugar, felicidades por tus artículos. Son muy fáciles de entender.
Tengo un problema con Divi – Woocommerce. Quiero hacer una página para la tienda que no muestre precios, solamente en plan catálogo de productos. (Hasta ahí todo bien, ahora viene el problema).
a) Si lo hago desde la propia página que crea woocommerce va perfecto porque muestra el esquema siguiente: Categoría Principal –> Clicando en ella –> Subcategoría –> Clicando en ella –> Diferentes productos.
¿Lo malo? que quisiera mejorar un poco la página poniéndole por ejemplo una cabecera con fotos …
b) Si por el contrario uso el divi – builder, pongo mi cabecera, mis fondos con imágenes, … peeeeeeeerooooo no hay manera humana de que desde el «módulo tienda» aunque le marque la opción «TIPO –> CATEGORÍA DE PRODUCTO» y tenga marcadas las opciones de «INCLUIR CATEGORÍAS», me muestre las categorías principales.
Me acaba mostrando los productos. No las categorías.
Así que… no se como arreglar el estropicio. ¿Alguna sugerencia?
Buenas.
El módulo tienda sirve para mostrar productos no para mostrar categorías de la tienda. Cuando marcas categorías en el filtro del módulo, estás seleccionando las categorías cuyos productos quieres que se muestren.
Buenas,
Lo primero enhorabuena por tan estupendos artículos. Por otra parte, me gustaría saber si tienes idea de cómo puedo crear un módulo «portafolio» en modo «rejilla» (apareciendo mis «proyectos») en el que la imágenes de cada portafolio sea diferente.
Busco crear un efecto tipo el que puedes ver en la siguiente web:
https://www.zaragoza-ciudad.com
Muchísimas gracias.
Buenas,
Básicamente, las formas que tiene Divi de mostrar el portfolio son estas:
Portfolio rejilla con filtro
Portfolio rejilla sin filtro
Porfolio 1 columna
Portfolio 1 columna con filtro
Hola Joaquín,
Mi problema con DIVI es que quise utilizar una plantilla en la página de la tienda, desde el repositorio de DIVI, Jeweler (es un layout pack), me gusta su aspecto pero quiero una sidebar para poder filtrar (uso WOOF), se la añadí desde el constructor y aparece pero no funciona, no filtra.
Probé con otras plantillas, pero pasa lo mismo.
Sólo cuando paso a «usar editor por defecto» me funciona la barra que selecciono en los Ajustes de página, Diseño de página, Barra lateral derecha. Pero entonces pierdo el aspecto de la plantilla.
No tengo conocimientos como para programar, toco algo el código, pero sólo cuando tengo las indicaciones.
Espero que me puedas ayudar.
Gracias de antemano,
Mabel.
Buenas,
Si estás utilizando un plugin específico para filtrar los productos, yo lo que haría sería consultar a los desarrolladores del plugin, por qué razón no filtra cuando utilizas el constructor de una plantilla Divi u otra
Hola, no me dan contestado a mi consulta…
¿Podrías por lo menos ayudarme a poner un marco con padding a las imágenes de los productos de la Tienda?
Esta página no tengo forma de modificarla en modo Editor por defecto, ¿tendría que añadir el código en el CSS personalizado de: DIVI-Opciones del tema?
Gracias por las molestias
Un saludo
Mabel
Buenas,
Si estás trabajando con el page builder, sería en alguna sección o módulo del builder. Pero, si en la página estás usando el editor por defecto de WordPress, si tendrías que utilizar la ventana de CSS Personalizado de Opciones del tema
Aquí tienes más info sobre la regla css Margin, que imagino será la que tengas que utilizar
Buenas Joaquín,
Cómo puedo quitar el padding bottom de los productos del módulo shop de DIVI?, al quitarle el precio y hacerlo más estilo minimalista para la página de inicio, se me queda el margen de abajo y sobra.
Buenas,
en el apartado 1b del post se habla de añadir en el apartado CSS Personalizado, en el bloque precio un padding-bottom.
Prueba modificando el CSS de algunos de estos elementos a ver si consigues reducir el padding bottom.
Buenas como estas? eres un excelente experto me ha ayudado mucho lo que haces.. muchas gracias disculpa como hago para colocar los articulos de esta manera?
Los productos en lista y forma vertical?
https://www.bookyogaretreats.com/es
Hola Carlos,
Eso va a depender de cada plantilla,
en el caso de la plantilla divi no hay ninguna opción en la configuración del módulo tienda para mostrar los productos en filas de a 1 como comentas.
Existe un plugin que se llama divi shop extended que amplía las funcionalidades de la plantilla divi para Woocommerce y aporta un módulo con el cual se pueden mostrar los productos en modo carrusel, pero tampoco tiene una opción para mostrar los productos como tu dices.
Un saludo
Hola, tengo un problema con la galeria de fotos de mis productos, no puedo ni pasar entre imagenes, ni zoom ni cerrar la vista previa de las mismas. Te dejo un link, http://www.muebleriageneralpaz.com/producto/bajo-mesada-120-cm-centro-estant/
Hola,
he echado un vistazo y a mí si me ha funcionado bien,
1.- al hacer clic en cada imagen de la galería, ésta aparece arriba.
2.- hace zoom tipo lupa al pasar el raton por la imagen
3.- al hacer clic sobre el icono lupa de la imagen, ésta se amplía y se puede cerrar la ventana emergente haciendo clic en el aspa «x».
Ten en cuenta que en Woocommerce 3.0 se establecieron cambios en la visualización de las galerías e imágenes de productos. Si has actualizado la versión de woocommerce estos cambios se habrán producido.
Echa un vistazo a este post, concretamente ve al apartado 3: Cambios en las imágenes de productos en woocommerce 3.0
Hola Joaquin, súper interesante tus explicaciones, me gustó mucho lo de la sombra de los productos, es genial !!, ahora tengo una duda y no sé si la manejas, o mejor dicho 2 cosas de woocommerce dentro de DIVI que me trae de cabeza y son:
1) Tengo un Sidebar en mi tienda y dentro de ella coloqué las categorías y subcategorías usando un widget que creé y le adicioné como te comenté anteriormente las Categorías y Subcategorías mediante un Menú que hice en Apariencia/Menú»..me quedó muy bien, pero la pregunta es, como puedo hacer paraque solo se muestren las categorías y que las subcategorías solo se muestren de forma deslizante al hacer click en un símbolo «+»..usé un plugin que se llama «Collapsing Categories» pero lo instalo y no se me ven las categorías..no lo entendí y el resto disponible no son compatibles con mi versión de WP por lo que no los quise testear, tendrás alguna otra forma que no sea la que viene por defecto en WC que es muy fea, no se si tienes algún CSS o plugin que me recomiendes que sea hermoso y estético?
2) Otro tema….cuando hago click en el sidebar en una subcategoría, me lleva bien a donde debe ir, pero lo extraño es que donde llego no se vé el sidebar..es eso correcto? y de ser asi, que se puede hacer para hacerla visible?, eso es todo, discúlpame tanta preguntas pero navego y navego por internet y no encuentro nada y casualmente llegué a tui blog y me fascinó tu sapiencia en DIVI y Woocommerce, bueno estar´pe muy agradecido por tu ayuda, sin otro particular, me despido cordialmente,Agustín desde Venezuela.
Hola Agustín,
1.- no conozco ningún plugin para añadir al widget de menú que te has añadido a la barra lateral para que se muestren las subcategorías como desplegables.
2.- es muy raro que en la subcategoría a la que llegues no te aparezca el sidebar, si te debería aparecer. Comprueba que en: «Divi > Opciones del tema», en la pestaña «General», en la opción: «Diseño de la página de tienda y de la página de categorías para WooCommerce» tienes seleccionada la opción: «Barra lateral derecha».
Un saludo
Hola! muy interesante tus explicaciones! quería preguntarte como se pone el botón de añadir al carrito, sin la necesidad de meterte dentro de la ficha de producto, que se pueda añadir al carrito desde la galería.
Gracias!
Hola Rebeca,
en un tiempo tengo previsto realizar un post en el que se indique como añadir el botón de añadir al carrito en el módulo tienda de Divi,
pero por el momento puedes probar el código que se indica en este post
Un saludo
Añade éste código a DIVI/opciones de tema/CSS personalizado
.products .price {
width: 70%;
text-align:left;
}
.products .price .woocommerce-Price-amount{
font-size:14px;
}
.products .add_to_cart_button {
float: right;
padding: 5px;
position: relative;
bottom: 40px;
font-size:14px;
}
Leugo añade éste código en el archivo functions.php ojalá tengas un Child theme jejeje
add_filter( ‘add_to_cart_text’, ‘woo_custom_single_add_to_cart_text’ ); // < 2.1
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_single_add_to_cart_text' ); // 2.1 +
function woo_custom_single_add_to_cart_text() {
return __( 'Order Now', 'woocommerce' );
}
Y listo. Elegant Themes no toma como necesario éste botón, ya que si aguien desea un producto verá la descripción primero, y al verla si le dará al respectivo boton (Comprar).. bueno, saludos !!
Gracias por tu aportación Agustín.
hola estimados: como dejar las imagenes de la tienda del mismo tamaño? ya que las imagenes ya tienen todas la misma dimension, pero al subirlas a la tienda una queda mas pequeña que la otra…saludos
Hola Alejandro,
es muy raro lo que comentas, si las imágenes son del mismo tamaño no deben aparecer en la web de tamaños diferentes,
1.- me puedes pasar un enlace a la página para que pueda verlo
2.- Los ajustes de las imágenes se hacen desde: Woocommerce > Ajustes > Productos > Mostrar > imágenes del producto» ¿has cambiado algo aquí?
Un saludo