Índice
Como ya sabrás, la plantilla Divi de Elegant Themes es una plantilla especialmente completa que incluye contructor web visual para diseñar páginas webs.
Este contructor web funciona con secciones (filas) y con módulos. Entre sus módulos incluye uno que no todas las plantillas premium cuentan con él, el de Tienda, el cual permite incluir una sección para mostrar los productos de tu tienda online con WooCommerce de forma automática.
Y eso es lo que quiero mostrarte en este post, cómo configurar el módulo Tienda de WooCommerce en Divi, para que los productos que vendes online aparezcan en tu página web.
Diseñar una Home Page para WooCommerce con la plantilla Divi
Normalmente, el módulo de Tienda se suele usar en la Home o Página de Inicio de una tienda online.
Se usa para mostrar un listado de los productos que más vendes, de los productos que te interesa destacar (por ejemplo, porque te dan más margen de beneficio), de los productos que el usuario ha consultado recientemente o de los productos que tienes actualmente en oferta.
El diseño general (aunque varía según el tipo de negocio) que usan las tiendas de productos online suele tener casi siempre el mismo formato:
- Slider o imagen de cabecera.
- Selección de productos de la tienda (a veces se incluyen varios, uno al principio y otro al final de página. Por ejemplo, uno de productos en oferta y otro de productos destacados).
- Ventajas de comprar en ese sitio web.
- Categorías y tipos de productos que se ofrecen.
- Testimonios de otros clientes que ya compraron.
- Formulario de suscripción al newsletter.
Diseñar una Página de Inicio de un WooCommerce con Divi que incluya todas estas secciones es sencillo y no necesitarás conocimientos muy avanzados para ello. Aunque sí tendrás que conocer bastante bien cómo funciona la plantilla y qué opciones tiene.
Si quieres conocer más sobre cómo funciona la plantilla, puedes ver nuestros tutoriales para aprender a diseñar webs con Divi paso a paso.
Añadir y configurar el módulo «Tienda» de Divi
Entre algunos de los módulos de la plantilla Divi que te pueden interesar están el de Texto, Imagen, Blog, Botón, Código, Galería, Deslizador, Contador de barra… y muchos más, hasta 49.
En este caso vamos a ver cómo configurar el módulo de Tienda de Divi paso por paso.
Añadir el módulo Tienda
- Lo primero que tienes que hacer es subir todos tus productos (o al menos una cantidad considerable) a tu tienda, a través de WordPress -> Productos -> Añadir productos.
- A continuación, entra en la edición de la página en la que quieres que aparezca una selección de tus productos (normalmente es la Página de Inicio).
- Activa el botón «Usar el contructor Divi» si aún no lo habías hecho.
- Añade una Sección estándar (por defecto, Divi ya te habrá creado la primera).
- Inserta una Columna con la estructura que desees. En este caso la hemos elegido de tres columnas.
- Una vez tengas la estructura de las columnas, elige el módulo que quieras añadir. En este caso el de Tienda. Haz esto en cada una de las columnas.
- Cada vez que necesites editar la configuración del módulo Tienda, clica en el icono de las tres líneas a la izquierda.
En el siguiente gif puedes ver este proceso.
Configurar el módulo Tienda
Divi es una plantilla totalmente compatible con WooCommerce, es decir, está adaptada para que en las tiendas online hechas con este plugin, el diseño y el funcionamiento de la plantilla no de fallos y muestre todas las secciones integradas.
Esto hace que editar el módulo de Tienda de Divi sea bastante sencillo y que permita mostrar productos de forma variada y dinámica, siguiendo el criterio que tú especifiques.
Vamos a ver por pasos todas las opciones de diseño y configuración que se incluyen en este módulo:
Ajustes generales
Aquí se configura el diseño de la sección. Puedes indicar que el orden en el que se muestra la selección de productos sea por:
- Productos más vendidos.
- Productos destacados.
- Productos en oferta.
- Productos recientes.
- Productos mejores valorados.
- Categoria de productos.
Esta elección dependerá del tipo de negocio que tengas y se puede ir cambiando periódicamente según convenga. Incluso, como comentaba en el apartado anterior, se puede optar por incluir varias secciones de Tienda, una en la parte superior de la Home Page y otra más abajo.
De todas formas, una Página de Inicio conviene que se vea clara, que no esté saturada para el usuario. Ten en cuenta que para mostrar todos los productos ya está la Página de Tienda, donde se muestra todo el catálogo.
En este apartado de ajustes generales también puedes indicar el número de artículos que quieres mostrar y en cuántas columnas.
Mi recomendación es no añadir demasiados productos, ya que en los diseños móviles (donde a veces se concentran la mayoría de las visitas), la sección mostrará los productos uno a uno y habrá que hacer un largo scroll para visualizar la página al completo.
A continuación los puedes ordenar por defecto, por popularidad, por puntuación, por fecha o por precio (de menos a mayor o de mayor a menor).
En la úlitma opción de ajustes generales puedes deshabilitar esta sección según el dispositivo que se trate, teléfono, tableta o escritorio.
Ajustes avanzados de diseño
En este apartado se editan básicamente, los estilos de la tipografía de los enunciados y del precio de los productos. Se puede modificar el tamaño, el color, el interlineado y el espacio entre letras.
También puedes configurar el diseño hover al pasar el ratón por el producto, añadiendo un icono (el símbolo +, por ejemplo) y una capa superpuesta, que normalmete suele ser un color más claro o transparente que no cubra por completo al producto.
Puedes seleccionar los códigos de los colores que vas a usar en tu marca con esta tabla de códigos de colores HTML.
Css personalizado
Por último, en este apartado puedes modificar el CSS de este módulo en concreto.
Por ejemplo, puedes añadir un color de fondo a cada producto, eliminar el campo precio, personalizar los espacios entre producto y producto…
Estas son todas las configuraciones que se incluyen en el módulo de Tienda de Divi y que te permiten mostrar productos en la Página de Inicio de tu tienda online con WooCommerce.
Además de esta sección, en las webs de comercios online, también puedes personalizar las páginas propias de un eCommerce; Página de Tienda, Ficha de Producto, Página de carrito y Página de Pago.
Estas ya están por defecto adaptadas a la plantilla, pero también puedes darles estilo propio con todas las opciones de configuración general de Divi.
Hola tengo una duda sobre el modulo de tienda de divi que se utiliza para insertar productos en cualquier pagina.
El problema me viene porque la etiqueta de html que inserta en el nombre del curso es un h2 y desde seo me indican que debe ser h3. Alguien sabe como se puede cambiar esa etiqueta.
GRacias
hay alguna forma de hacer que en el formato de novedades se pueda hacer que un producto no salga el primero. He probado cambiando la fecha y no lo consigo.
gracias y un saludo,
Estimados, me encanto el blog, felicitaciones
Estoy reemplazando la tienda que viene por defecto en woocommerce y estoy intentado recrear la pagina que me muestra categorias y subcategorias que conducen a sus respectivos productos (mas de 4000) lo unico que he logrado hasta ahora es generar una pagina con modulos imagen que como link apuntan a las diferentes subcategorias y es bastante tedioso y de dificil mantencion, la pregunta contreta es: hay algun modulo que permita la configuracion de categorias y subcategorias en DIVI dentro de Woocommerce? gracias
hola,yo tengo hecha mi pagina en modo «catálogo» con DIVI.
Quiero poner el carrito de la compra pero no se si tengo que instalarlo en cada producto o si al instalarlo,se pone de forma automática.
¿crees que debería empezar de nuevo?
me estoy volviendo loca…
Gracias
Apariciencia / Editor / functions.php
IMPORTANTE! Esto lo debes hacer sobre la plantilla hijo que hayas creado y no directamente sobre el tema padre.
Y agrega aquí el siguiente código PHP:
// register add to cart action
function dac_add_cart_button () {
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_add_to_cart’, 10 );
}
add_action( ‘after_setup_theme’, ‘dac_add_cart_button’ );
Hola!
Por favor, a ver si me puedes ayudar porque me está saliendo humo de la cabeza 🙁
Estoy haciendo una tienda online con divi y woocommerce y tengo un problema porqu no soy capaz de personalizar la página de categoría.
Te paso el enlace para que puedas verlo:
https://chachocarp.com/product-category/los-mas-vendidos
Lo que quiero cambiar es:
1. Tengo 24 productos en esa categoría y en vez de mostrarlo en dos páginas de 12 productos, los muestra en tres páginas de 9, 9 y 6 y queda fatal claro.
2. No me ha mantenido la configuración del hover al pasar el ratón por encima de los productos. Me gustaría que la transparencia fuera azul y que las letras de «ver producto fueran naranaja» como en el módulo de tienda de la página principal.
3. Me gustaría que apareciera una barra lateral izquierda para mostrar todas las categorías y subcategorías.
¿Cómo lo haaaaaaaaaaaaago?
Gracias por tu ayuda
Hola, a mi me gusta mucho como tienes la web, te quería preguntar dos cosas, las categorias que tengo son por defecto la pagina que trae woocommerce, pero me muestra los productos de una forma feisima, 3 productos luego uno solo luego otros 3 y así sucesivamente, y no se donde configurar, tu has creado página por categoría?.
Otra cosa si tu tema es divi, como haces para poner el texto de añadira la carro en los productos?. Gracias si me respondes. o quien me pueda ayudar.
Saludos
Gloria, encontraste alguna solución ? estoy con e mismo problema !!!
Gracias
Hola, estoy construyendo mi página web con Divi en WordPress. Asimismo, estoy construyendo mi tienda en dicha página con woocommerce. Mis productos con sus títulos y precios se ven claramente en mi tienda. Hasta ahí todo bien. El problema que no logro resolver es que al darle clic a cualquier producto, cuando despliega su información, tanto el precio como las etiquetas, no se ven porque son están del mismo color que el fondo blanco de dicha sección o apartado. Por más que lo he intentado, no logro corregir el error. Ojalá puedan ayudarme con este asunto que me tiene de cabeza. Gracias.
Fantástico artículo. Muy bien explicado todo. Muchas gracias.
Tengo una duda: He seguido tus pasos uno por uno, pero no hay manera de que Divi – Woocommerce me muestre las categorías de productos. Me muestra solamente los productos.
Para ver las categorías con sus correspondientes subcategorías y, depués de clicar en ellas, ver los productos, he de crear una nueva página y desde los ajustes de woocommerce, decirle que esa nueva página recién creada es la página de la tienda.
¿Cuál es el problema? Que ahora me gustaría añadirle una cabecera con un slide fotos, … y no hay tu tía. Al editarlo con Divi Builder me vuelve a mostrar solamente los productos sin categorías.
¿Alguna sugerencia?
Estimado Alejandro, hace horas que estoy tratando de resolver lo que a ti te pasa, encontraste alguna solución? veo mucha gente preguntando lo mismo pero ninguno encuentra la respuesta, mil gracias
Estimado, buenas muy bueno el artículo.
Te realizo una consulta, estoy realizando una tienda sobre DIVI y Woocommerce.
Tenes idea como puedo poner 2 columnas de productos en celulares?
Hola Gustavo, en principio está configuración no se incluye en las opciones de Divi, pero dejo aquí tu comentario por si alguien propone otra solución 😉
Saludos.
Como puedo hacer, para que en la version movil mi pagina de tienda.
Losbprodicto se cizualicen de 2 en 2 y no de 1 en 1 como esta actualmente.
Gracias por su ayuda.
Hola!! ¿Cómo podría utilizar el modulo tienda de divi pero mostrando productos por etiquetas y no por categorías?
La verdad sería muchísimo más practico.
Muchas gracias por tu ayuda!!
Hola Enrique! Por el momento parece que no es posible mostrar los productos por etiquetas dentro del módulo Tienda de Divi. Saludos!
Hola. Enhorabuena por la entrada.
Me gustaría saber si en el módulo tienda de Divi se puede incluir el desplegable para que el cliente ordene los productos a du gusto (por precio, alfabético, etc).
Gracias y un saludo
Hola Marc, gracias por tu comentario 🙂
Por ahora no se incluye este desplegable en el Módulo Tienda de Divi. Tan solo tú puedes seleccionar los que deseas mostrar (productos recientes, destacados, ofertas, más vendidos…). Saludos!
Hola, como puedo añadir la descripción corta en los productos. Gracias
Hola Jordi!
Entra en la edición del producto en tu WordPress y ve al final, donde pone «Descripción corta del producto» junto con un editor de texto. Un saludo!
Hola, me refiero en el constructor Divi, eligiendo la opción tienda, no se como hacer para que aparezca la descripción corta
Hola de nuevo Jorge! Pues el módulo de Tienda de Divi no permite añadir una descripción. Así que dejo aquí tu duda por si alguien utiliza alguna otra alternativa 😉 Saludos!
Buenas tardes, estoy armando mi tienda de ensenanza virtual, pero en el telefono, aparece el menu y el buscador, creo que para los alumnos y la venta, seria mas facil si apareciera el boton de miembros y el carrito, como puedo hacer para que esto aparezca en el telefono?
Muchas Gracias
Hola Jose Miguel!
Para mostrar el enlace a una página de «Miembros», «Login» o cualquier otra, crea un «Menú Secundario» en Apariencia > Menús y añade esta página. Y para que se te muestre en ordenador igual que en la pantalla del teléfono móvil, puedes añadir este código a las opciones del tema:
@media (max-width: 980px) {
#et-secondary-menu,#et-secondary-nav {
display: inline-block !important;
}
}
Saludos y hasta pronto!
Estoy muy interesado en comprar el tema elegant, como hago para que en la tienda aparezca la opocion carrusel, y en todo caso, como haria para mejorar la calidad de la imagen en la web. Muchas Gracias
Hola Jose,
Activando el constructor de Divi en la página de Tienda podrás añadir un carrusel o cualquier otra personalización. Además, para mejorar la calidad de tu web, con la nueva versión de Divi, se han añadido a la Biblioteca 21 Packs de Layouts de todas las temáticas; empresas, moda, educación, salud, tecnología, viajes… por lo que tan solo tendrás que agregar una, modificar los textos y las imágenes de los ejemplos y tu web ya estará diseñada!
Puedes comprar la licencia de Elegant Themes desde este enlace: http://www.elegantthemes.com/affiliates/idevaffiliate.php?id=39913&url=32289 (es mi enlace de afiliado, pero a ti te seguirá costando el mismo precio 😉 😉 )
Un saludo y hasta pronto!
Hola! me interesa mucho tu blog! estoy diseñando mi propia tienda online, y no consigo averiguar la manera de que en la version movil se vean los productos en dos columnas. En el ordenador lo tengo puesto en 4,.
Va por código también? muchas gracias!
Hola Rebeca!
Por defecto, la plantilla solo muestra una columna de productos en la versión móvil, lo cual es lógico para poder mostrar un diseño limpio y legible. Por otro lado, si necesitas hacer esto para mostrar un listado de productos más corto en la versión móvil, puedes crear una sección de Tienda personalizada y desactivarla en escritorio y crear otra sección de Tienda y desactivarla en tablet y teléfono.
Saludos y gracias por seguir el blog 😉