Layout de categorías de productos en Divi (Theme Builder)

Cuando una persona entra a tu tienda online y navega por una categoría de productos, lo primero que ve no es un producto individual — es esa página de categoría. Y si esa página se ve genérica, sin estilo, con la maquetación por defecto de WooCommerce, estás perdiendo la primera batalla de la experiencia de compra antes de que el cliente haya llegado a ver un solo precio. Personalizando el layout de categorías de productos en Divi con el Theme Builder puedes controlar exactamente qué aparece ahí: título dinámico, banner de la categoría, filtros, breadcrumbs y la grilla de productos con el diseño que tú defines.

En esta guía te muestro el proceso completo: desde cómo asignar la plantilla en el Generador de Temas hasta los elementos adicionales que puedes añadir para que esa página funcione como parte coherente de tu marca. Si quieres ver la demo en vivo de lo que se puede lograr, puedes revisarla en test.uxdividemos.com.

¿Por qué la página de categorías por defecto arruina tu tienda?

La vista por defecto de WooCommerce para las categorías de productos es funcional, pero nada más. Muestra un listado de productos en una grilla básica, sin identidad visual, sin banner, sin jerarquía clara. El problema real no es que se vea fea — es que interrumpe el flujo de diseño que tú construiste con tanto cuidado en el resto del sitio. Tu home tiene un estilo definido, tus páginas de producto también, pero llega alguien a /categoria/ropa/ y de repente parece que está en otra tienda.

Desde el punto de vista de conversión, esto importa. Una página de categoría bien diseñada guía al visitante visualmente, le confirma que está en el lugar correcto y hace que el proceso de explorar productos sea placentero. Las páginas de categoría típicamente reciben mucho tráfico orgánico en tiendas con catálogos medianos o grandes — Google indexa esas URLs con fuerza. Tener un diseño coherente y funcional ahí no es opcional si te tomas en serio la tienda.

Consejo: antes de diseñar el layout, revisa qué páginas de categoría ya tiene indexadas tu tienda en Google Search Console. Si algunas tienen tráfico real, prioriza que el diseño no rompa los elementos de contenido que esas páginas ya tenían.

Paso a paso para crear el layout de categorías con el Theme Builder

El proceso empieza en el Generador de Temas (Theme Builder) de Divi, no en el editor de páginas normal. Aquí es donde defines qué plantilla se usa para qué tipo de contenido dinámico, y las páginas de categorías de WooCommerce son exactamente ese tipo de contenido.

Paso 1: Crear la plantilla en el Generador de Temas

Ve a Divi → Generador de Temas desde el panel de WordPress. Una vez ahí, haz clic en Añadir nueva plantilla. El sistema te preguntará a qué tipo de contenido quieres asignar esta plantilla. Selecciona Categorías de productos de WooCommerce — puedes elegir entre todas las categorías o una categoría específica. Para empezar, "Todas las categorías de productos" es la opción que más cobertura te da con una sola plantilla.

Una vez asignadas las condiciones, la plantilla aparece en tu lista del Generador de Temas con la asignación visible. Desde ahí puedes abrir el constructor visual haciendo clic en Construir cuerpo de la página.

Paso 2: Añadir el módulo de tienda con configuración dinámica

Dentro del constructor visual del Theme Builder, añade el módulo Tienda de Divi (WooCommerce Shop Module). Este es el módulo que renderiza la grilla de productos. La configuración clave está en dos opciones:

• Tipo de vista: selecciona "Categorías" para que el módulo muestre los productos de la categoría actual en lugar de todos los productos de la tienda.
• Categoría actual: activa esta opción para que el módulo lea dinámicamente la categoría de la URL que está visitando el usuario. Sin esto, el módulo mostraría siempre los mismos productos sin importar en qué categoría esté el visitante.

Con esas dos opciones configuradas, el módulo ya muestra los productos correctos para cada categoría de forma dinámica. Puedes ajustar el número de columnas, el espaciado entre cards y todos los estilos visuales desde las pestañas de diseño del módulo.

🎓 ¿Quieres construir una tienda completa con Divi?
El Curso de Tiendas Online con Divi 5 y WooCommerce te da el sistema completo: plantillas dinámicas, checkout personalizado y flujo de compra optimizado para conversión.

Paso 3: Añadir el encabezado de la categoría

Una página de categoría que solo muestra productos sin contexto no ayuda al visitante a orientarse. Lo mínimo que deberías tener arriba de la grilla es el título de la categoría y, opcionalmente, su descripción. Divi tiene un módulo nativo de Título de publicación de WooCommerce que lee el nombre de la categoría actual de forma dinámica — úsalo en lugar de escribir el título a mano. Así cada categoría muestra su propio nombre sin que tengas que configurarlo individualmente.

Paso 4: Configurar los parámetros de la sección de productos

Más allá del módulo de tienda en sí, hay algunos parámetros que vale la pena revisar para que la página funcione bien en todos los escenarios. El número de productos por página lo controlas desde WooCommerce (Ajustes → Productos), pero la presentación visual — cuántas columnas mostrar, el gap entre cards, si quieres mostrar las valoraciones o no — lo ajustas en las opciones del módulo Tienda de Divi. También puedes activar u ocultar los controles de ordenamiento y filtro que WooCommerce añade por defecto arriba de los productos.

Elementos que puedes añadir al layout de categorías

El módulo de tienda es el núcleo, pero la página de categoría puede llevar muchos más elementos que la hacen más funcional y más consistente con el diseño general del sitio. Estos son los que más impacto tienen en la experiencia del usuario.

Banner con imagen dinámica de la categoría

WooCommerce permite asignar una imagen a cada categoría de productos. Divi puede leer esa imagen de forma dinámica y mostrarla como banner en la parte superior de la página. El módulo Imagen dinámica de WooCommerce es el que maneja esto. Puedes usarlo como fondo de una sección hero con el nombre de la categoría superpuesto — el resultado se ve profesional y cada categoría tiene su propia identidad visual sin que tengas que crear una plantilla separada para cada una.

Breadcrumbs de navegación

Los breadcrumbs en las páginas de categoría tienen doble función: le dicen al usuario dónde está dentro de la tienda y añaden texto semántico que Google lee como contexto de la página. Divi incluye un módulo de breadcrumbs que funciona bien en el Theme Builder — colócalo justo debajo del banner y arriba del título de la categoría para que el flujo de navegación sea claro.

Descripción de la categoría

Si tus categorías tienen descripciones escritas en WooCommerce (Productos → Categorías → editar), el módulo Descripción de WooCommerce las muestra de forma dinámica. Esto es especialmente útil para SEO: una descripción específica de cada categoría puede marcar la diferencia en el posicionamiento de esa página. Muchas tiendas dejan este campo vacío y pierden esa oportunidad.

Consejo: escribe las descripciones de tus categorías desde el panel de WooCommerce (no desde el Theme Builder) para que sean administrables sin tocar código o el constructor visual. El módulo las lee automáticamente.

Sidebar con filtros de productos

Para tiendas con catálogos más grandes, añadir una barra lateral con los widgets de filtros de WooCommerce (filtro por precio, por atributo, por valoración) cambia completamente la usabilidad de la página. Divi te permite crear un layout de dos columnas en el Theme Builder: la columna principal para los productos y una columna lateral para los filtros. Los widgets de WooCommerce se insertan con el módulo Widget de WordPress de Divi.

También puedes integrar plugins de filtros más avanzados que ofrecen filtros AJAX sin recarga de página — eso mejora mucho la experiencia en móvil, donde la navegación con filtros puede volverse lenta si hay recarga completa cada vez.

Divi 5 y el Loop Builder: más control sobre la grilla de productos

Si estás trabajando con Divi 5, tienes una opción adicional más poderosa que el módulo de tienda clásico: el Loop Builder. Con el Loop Builder puedes diseñar completamente la card de producto — cómo se ve la imagen, dónde va el título, el precio, el botón de añadir al carrito, si quieres una badge de oferta, qué pasa al hacer hover. No estás limitado a los estilos que ofrece el módulo de tienda estándar.

El Loop Builder de Divi 5 consulta los productos de la categoría actual de la misma forma dinámica, pero te da control pixel a pixel sobre cada card. Yo lo uso cuando el cliente tiene un brief de diseño específico que el módulo de tienda no puede cumplir. Si quieres entender mejor la base sobre la que construye este nivel de control, el artículo sobre el sistema de diseño en Divi 5 te da el contexto que necesitas antes de lanzarte con el Loop Builder en proyectos de cliente.

🎓 ¿Quieres dominar el Theme Builder de Divi para tiendas?
El Curso de Tiendas Online con Divi 5 y WooCommerce cubre el Theme Builder completo: plantillas de categoría, producto individual, carrito y checkout. Todo con diseño profesional y dinámico.

Preguntas frecuentes

¿Puedo tener layouts diferentes por cada categoría?

Sí. En el Generador de Temas puedes crear múltiples plantillas y asignar cada una a una categoría específica. Si tienes una categoría de "Ofertas" que quieres que se vea diferente a las categorías de productos regulares, creas una plantilla para esa categoría y otra para el resto. Las condiciones de asignación del Theme Builder son muy flexibles en ese sentido.

¿Funciona también para las etiquetas de productos?

Sí, el Theme Builder tiene condiciones de asignación para etiquetas de WooCommerce además de categorías. El proceso es idéntico — solo cambias el tipo de asignación al crear la plantilla. Ten en cuenta que las etiquetas de productos son páginas de archivo distintas a las categorías, así que necesitan su propia plantilla si quieres un diseño diferenciado.

¿Cómo añado filtros de precio?

WooCommerce incluye un widget nativo de filtro por precio que puedes insertar con el módulo de Widget de WordPress de Divi. Para que funcione, tu tema debe tener activado el soporte de widgets de WooCommerce, que Divi trae por defecto. Si quieres filtros con AJAX (sin recarga de página), necesitas un plugin de filtros compatible — hay opciones gratuitas y de pago que funcionan bien con Divi.

Conclusión

La página de categorías de productos es uno de los puntos de contacto más importantes de tu tienda y una de las más ignoradas en el diseño. Con el Theme Builder de Divi y los módulos dinámicos de WooCommerce puedes construir un layout profesional que sea coherente con el resto del sitio, ayude al visitante a orientarse y potencie la conversión. El proceso es directo: crear la plantilla, asignar la condición, añadir los módulos dinámicos y configurar los parámetros de categoría actual. A partir de ahí, cada categoría de tu tienda hereda ese diseño automáticamente, sin trabajo extra por cada una.

🎓 ¿Quieres construir una tienda online profesional con Divi?
El Curso de Tiendas Online con Divi 5 y WooCommerce te da el sistema completo para diseñar, personalizar y optimizar cada página de tu tienda, incluyendo el Theme Builder dinámico.