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.

página inicio divi woocommerce

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

  1. 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.
  2. 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).
  3. Activa el botón “Usar el contructor Divi” si aún no lo habías hecho.
  4. Añade una Sección estándar (por defecto, Divi ya te habrá creado la primera).
  5. Inserta una Columna con la estructura que desees. En este caso la hemos elegido de tres columnas.
  6. 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.
  7. 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.

añadir módulo tienda a plantilla divi

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.

mostrar productos página inicio

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:

  1. Productos más vendidos.
  2. Productos destacados.
  3. Productos en oferta.
  4. Productos recientes.
  5. Productos mejores valorados.
  6. 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.

editar productos tienda online

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.

diseño producto tienda woocommerce

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…

css sección tienda online divi

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.

¿Quiéres seguir aprendiendo sobre WooCommerce y Divi? Te aconsejo apuntarte a esta Masterclass gratuita donde aprenderás a crear una tienda online desde cero 😉

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, ¿Te ha resultado útil? ¡Danos un 5!)
Cargando…

También te puede interesar...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
¡GRATIS! 

Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

Consentimiento

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!