Gratis Hosting
+ Dominio .com
+ Correos Corporativos
+ Certificado SSL
+ Primer año de servicios 100% Gratis.
+Promoción valida para clientes de Diseño Web, Tiendas Virtuales y Landing Pages.

Cómo diseñar páginas de categoría atractivas en WooCommerce con Elementor

Cómo diseñar páginas de categoría atractivas en WooCommerce con Elementor - KOM Agencia Digital Lima Peru

En Lima y el resto del Perú, donde 18.7 millones de personas compran online según CAPECE 2024, las páginas de categoría son el segundo punto de contacto más importante de una tienda WooCommerce después del homepage. Sin embargo, la mayoría de tiendas virtuales peruanas dejan estas páginas en su estado por defecto: una grilla básica de productos sin personalización, sin filtros visibles y sin elementos que guíen al comprador. Con Elementor Pro puedes transformar las páginas de categoría en experiencias de navegación que reducen la tasa de rebote y aumentan las ventas. Esta guía te muestra cómo personalizar el diseño de categorías en WooCommerce usando Elementor y WooCommerce para el mercado peruano.

Qué son las páginas de categoría y por qué importan para tu tienda en Lima

Las páginas de categoría (también llamadas archive pages) son las que muestran todos los productos agrupados bajo una misma clasificación: «Ropa de mujer», «Tecnología», «Accesorios para mascotas», por ejemplo. En WooCommerce, estas páginas se generan automáticamente cuando creas categorías de producto, pero el diseño por defecto es genérico y no aprovecha el espacio para comunicar tu propuesta de valor.

Para un emprendedor en Lima que vende en categorías competitivas como moda, tecnología o cosmética (las tres líderes del retail e-commerce peruano según CAPECE 2024), una página de categoría bien diseñada marca la diferencia entre que un visitante explore tus productos o se vaya a Mercado Libre. El diseño de categorías afecta directamente el tiempo de permanencia, la profundidad de navegación y la tasa de conversión de la tienda.

Requisitos para personalizar categorías con Elementor Pro

Necesitas Elementor Pro activo (los widgets de archive y loop no están en la versión gratuita), WooCommerce instalado con al menos dos categorías creadas y productos asignados, y un tema ligero como Hello Elementor o Astra. También es recomendable tener el plugin WooCommerce instalado correctamente; si no lo has hecho, revisa primero cómo instalar WooCommerce en WordPress en Perú.

Para crear el template, accede a Elementor > Theme Builder > Product Archive y haz clic en «Add New». Selecciona el tipo «Product Archive» y comienza a diseñar.

Estructura de una página de categoría que convierte

Lo primero que el visitante debe ver es un banner visual que identifique la categoría. Usa el widget Archive Title de Elementor Pro para mostrar el nombre de la categoría dinámicamente, y combínalo con una sección de fondo que use la imagen de categoría que asignas en WooCommerce > Productos > Categorías. Agrega debajo una breve descripción (la que configuras en el campo «Descripción» de cada categoría en WooCommerce) usando el widget Archive Description.

Este banner cumple dos funciones: orientar al comprador sobre dónde está dentro de tu tienda y aportar texto indexable para SEO. En el mercado peruano, donde el e-commerce creció 21.2% en 2024, cada página de categoría optimizada es una oportunidad para captar tráfico orgánico desde Google.

Agrega breadcrumbs (migas de pan) justo encima o debajo del banner. Elementor Pro no tiene un widget nativo de breadcrumbs, pero puedes usar el de Rank Math, Yoast o un shortcode. Los breadcrumbs ayudan al usuario a navegar entre categorías y subcategorías, y generan rich snippets en Google que mejoran el CTR de tus páginas.

Filtros laterales de precio, color y atributos

Los filtros son indispensables para tiendas con más de 20 productos por categoría. En Elementor Pro, puedes crear un layout de dos columnas: sidebar con filtros a la izquierda y grid de productos a la derecha. Los widgets nativos de WooCommerce para filtros incluyen: Filter by Price, Filter by Rating, Filter by Attribute y Active Filters.

Para tiendas de moda en Lima, los filtros más usados son: precio (rango con slider), talla, color y marca. Para tiendas de tecnología: precio, marca, capacidad/tamaño y valoración. Configura los filtros según tu rubro para que el comprador encuentre rápido lo que busca.

Grid de productos optimizado

Usa el widget Products de Elementor Pro o el Loop Grid para mostrar los productos. Configura entre 3 y 4 columnas en desktop y 2 en mobile. Cada tarjeta de producto debe mostrar: imagen, nombre, precio (con precio tachado si hay descuento), estrellas de valoración y botón de agregar al carrito.

Un detalle que funciona bien en el mercado peruano: agrega badges visuales como «Envío gratis», «Más vendido» o «Oferta» sobre las imágenes de producto. Esto llama la atención del comprador y acelera la decisión de compra, especialmente considerando que el ticket promedio online en Perú es de S/200.

Paginación y carga infinita

Para categorías con muchos productos, configura la paginación o la carga infinita (load more). La paginación clásica es mejor para SEO porque genera URLs indexables para cada página. La carga infinita es mejor para experiencia de usuario en mobile. Evalúa qué es más prioritario para tu tienda.

Cómo agregar subcategorías visuales dentro de una categoría

Si tu tienda tiene una estructura de categoría > subcategoría (por ejemplo, «Ropa» > «Camisas», «Pantalones», «Zapatos»), puedes mostrar las subcategorías como cards visuales antes del grid de productos. Usa el widget Products con la opción de mostrar categorías, o crea una sección manual con Image Box widgets que enlacen a cada subcategoría.

Esta técnica es especialmente útil para tiendas de moda y accesorios en Lima, donde un visitante que llega a «Ropa de mujer» quiere segmentar rápidamente por tipo de prenda antes de ver el catálogo completo.

Optimización SEO de páginas de categoría

Las páginas de categoría tienen un potencial SEO enorme que la mayoría de tiendas WooCommerce en Perú desperdicia. Para aprovecharlo necesitas redactar una descripción única de 150 a 300 palabras para cada categoría (no la dejes vacía), incluir la keyword principal de la categoría en el título H1 y la descripción, configurar meta title y meta description personalizados con Rank Math, usar URLs limpias (evitar /product-category/ si es posible) y agregar enlaces internos a otras categorías y al blog.

Para profundizar en estrategias SEO para WooCommerce, revisa nuestra guía sobre SEO para tiendas WooCommerce: cómo rankear primero en Google Perú.

Diseño responsive: categorías que funcionan en celular

Con el 73% del tráfico e-commerce peruano viniendo desde móviles, el diseño responsive de tus páginas de categoría no es opcional. En la vista mobile de Elementor, ajusta estos elementos: el banner debe reducir su altura a no más de 200px, los filtros deben colapsar en un botón «Filtrar» que abra un panel lateral, el grid debe pasar a 2 columnas (o incluso 1 para productos con mucha información), y la paginación debe tener botones lo suficientemente grandes para tocar con el dedo.

Prueba la navegación completa en un celular real antes de publicar. Lo que se ve bien en el simulador de Elementor puede comportarse diferente en un Samsung o Xiaomi (las marcas más vendidas en Perú).

Cómo aplicar el template a categorías específicas

Elementor Pro permite crear un template general para todas las categorías y templates específicos para categorías individuales. Por ejemplo, puedes tener un diseño general para la mayoría de categorías y uno especial para «Ofertas» con banner rojo y countdown timer.

Para configurar las condiciones, en el Theme Builder selecciona tu template de Product Archive y en Conditions define: «Include > Product Categories» para aplicar a todas, o «Include > Product Categories > In > [categoría específica]» para aplicar solo a una categoría determinada. El template con condición más específica siempre tiene prioridad.

Preguntas frecuentes sobre categorías WooCommerce Elementor

¿Puedo personalizar las páginas de categoría con Elementor?

Sí, pero necesitas Elementor Pro. Con la versión Pro accedes al Theme Builder y al widget de Product Archive, que te permiten diseñar visualmente las páginas de categoría de WooCommerce sin tocar código. La versión gratuita de Elementor no incluye esta funcionalidad.

¿Cómo agrego filtros de precio y atributos?

En tu template de Product Archive, agrega una columna lateral (sidebar) y arrastra los widgets de filtro de WooCommerce: Filter by Price (con slider de rango), Filter by Attribute (para talla, color, marca) y Active Filters (para que el usuario vea qué filtros tiene activos). Estos widgets funcionan automáticamente con los atributos que configuras en WooCommerce > Productos > Atributos.

¿Los filtros de producto mejoran el SEO?

Los filtros mejoran la experiencia de usuario, lo que reduce la tasa de rebote e indirectamente beneficia el SEO. Sin embargo, ten cuidado con las URLs que generan los filtros: si cada combinación de filtros crea una URL diferente, puedes tener problemas de contenido duplicado. Usa canonicals y configura en Rank Math qué URLs de filtro deben indexarse y cuáles no.

¿Cuántos productos debo mostrar por página en la categoría?

Entre 12 y 24 productos es el rango óptimo para la mayoría de tiendas. Menos de 12 hace que la página se vea vacía; más de 24 aumenta el tiempo de carga y satura al comprador. Para móviles, 12 productos con botón «Cargar más» es una buena configuración.

Categorías bien diseñadas venden más

Las páginas de categoría son una parte fundamental de la experiencia de compra en tu tienda WooCommerce. Personalizarlas con Elementor Pro te permite diferenciarte de la competencia, facilitar la navegación del comprador y mejorar tu posicionamiento en Google, todo con un editor visual sin código.

En KOM Agencia Digital diseñamos tiendas WooCommerce con categorías optimizadas para el mercado peruano. Si quieres que tu tienda virtual tenga un diseño profesional que convierta visitantes en compradores, escríbenos por WhatsApp al +51 923 222 223.

Picture of Christian Otero
Christian Otero
Founder & CEO @ KOM Agencia Digital | Pionero en Generative Engine Optimization (GEO) y SEO Técnico Internacional | +24 Años escalando operaciones digitales | Ex-Nextel, Entel, Prosegur | Ingeniero de Sistemas
Más Visitadas
Artículos relacionados
¿Tienes un proyecto?

Escríbenos:

¿Preguntas?
¡Te asesoramos gratis!
Si prefieres llámanos o escríbenos...

Estamos atentos a tu comunicación para poder implementar tus nuevas herramientas digitales.

EMPRESA REGISTRADA Ante SUNAT e INDECOPI PAGO 100% SEGURO A través de KOM Pay TRANSPARENCIA TOTAL Precios 100% Públicos POTENCIADOS CON IA Usamos Inteligencia Artificial