Tienda WooCommerce con categorías y subcategorías en Divi

Introducción

Mi nombre es Jefferson Maldonado y te doy la bienvenida a UXDivi. En este tutorial, vamos a ver cómo configurar tu tienda en línea utilizando Divi y WooCommerce para mejorar la navegación y la organización de tus productos, sigue los siguientes pasos para lograr este objetivo.

Antes de meternos en la configuración, quiero que entiendas por qué este cambio vale tanto la pena. Cuando una tienda tiene pocos productos, mostrarlos todos juntos en la página principal funciona bien. Pero en cuanto tu catálogo empieza a crecer (digamos veinte, cincuenta o cien productos) esa misma pantalla se convierte en un muro abrumador. El visitante llega, ve una avalancha de productos sin un orden claro y muchas veces se va sin saber por dónde empezar. Organizar la tienda por categorías y subcategorías resuelve eso de raíz: le das al usuario un camino lógico que lo lleva de lo general a lo específico, igual que los pasillos de una tienda física bien señalizada.

Si quieres aprender a configurar WooCommerce en su totalidad, sigue nuestro curso de WooCommerce Básico para que no te pierdas cada detalle de esta poderosa herramienta.

Lo mejor de todo es que esta configuración no requiere ningún plugin adicional ni conocimientos avanzados de programación. WooCommerce ya trae nativamente la capacidad de mostrar categorías y subcategorías en la página de tienda; lo que pasa es que viene desactivada por defecto y mucha gente no sabe que existe. En este tutorial vamos a activarla, ajustar un par de detalles visuales con un poco de CSS sencillo, y dejar la tienda con una navegación profesional. Tómate tu tiempo en cada paso y verás que el resultado vale el esfuerzo.

Paso 1: Configuración inicial

1.1 Eliminar diseño existente en el Theme Builder

Si ya tienes un diseño creado con el Theme Builder, primero debes eliminarlo. Guarda el diseño en la biblioteca si deseas reutilizarlo más adelante. En caso de que no tengas el diseño de tu tienda creado con el Theme Builder de Divi, puedes ignorar este paso.

1. Accede al Theme Builder: Dirígete al menú de Divi y selecciona "Theme Builder".
2. Elimina el diseño de la tienda: Busca el diseño asignado a la tienda y elimínalo. Asegúrate de guardar una copia en la biblioteca si planeas reutilizarlo.
3. Guarda los cambios: Una vez eliminado, guarda los cambios en el Theme Builder.

La razón por la que eliminamos cualquier plantilla personalizada del Theme Builder es importante de entender. Cuando construyes una página de tienda completamente a mano en el Theme Builder, normalmente usas un módulo de "Productos de la tienda" que está programado para listar productos directamente, sin pasar por la lógica de categorías de WooCommerce. Eso sobrescribe el comportamiento nativo que queremos aprovechar. Al volver a la plantilla por defecto, le devolvemos a WooCommerce el control sobre cómo se muestra la tienda, y así puede respetar la configuración de categorías y subcategorías que vamos a activar más adelante.

1.2 Volver al editor predeterminado

1. Dirígete a "Páginas": Desde el panel de administración de WordPress, ve a "Páginas" y selecciona la página de la tienda.
2. Edita la página: Abre la página de la tienda para editarla.
3. Quita el constructor visual: Si la página está utilizando el constructor visual de Divi, selecciona "Volver al editor predeterminado".
4. Configura la página de tienda: Asegúrate de que la página de la tienda esté configurada correctamente como la página de tienda predeterminada en los ajustes de WooCommerce. Para hacerlo, ve a "WooCommerce" > "Ajustes" > "Productos" y selecciona la página de tienda adecuada.

Paso 2: Configurar la visualización de la tienda

2.1 Ajustar la barra lateral

1. Accede a las opciones de Divi: Ve a "Divi" > "Opciones del tema".
2. Configura la barra lateral: En la sección de "Diseño de la barra lateral para la tienda", selecciona "Izquierda" si deseas que la barra lateral aparezca a la izquierda de la página. Guarda los cambios. Este es un paso opcional, puedes mantener la barra lateral a la derecha si así lo deseas, esto dependerá de lo que quieras en tu tienda, en nuestro caso lo hicimos así.

La barra lateral cumple un papel más estratégico de lo que parece. En una tienda organizada por categorías, esa columna lateral es el lugar perfecto para colocar los filtros y el listado de categorías, de modo que el usuario siempre tenga a la vista cómo moverse por el catálogo sin perder el contexto. Decidir si va a la izquierda o a la derecha es cuestión de gusto y de tu diseño general, pero ten presente que la mayoría de los usuarios occidentales lee de izquierda a derecha, por lo que una barra de navegación a la izquierda suele sentirse más natural cuando su función principal es guiar la exploración.

2.2 Configurar categorías y subcategorías

1. Abre el personalizador de temas: Ve a "Apariencia" > "Personalizar".
2. Selecciona WooCommerce: En el personalizador de temas, selecciona "WooCommerce" y luego "Catálogo de productos".
3. Configura la visualización de la tienda: En "Visualización de la página de tienda", selecciona "Mostrar categorías".
4. Configura la visualización de las categorías: En "Visualización de la página de categoría", selecciona "Mostrar subcategorías". Publica los cambios.

Este es el corazón del tutorial, así que conviene entender bien las dos opciones que estamos tocando, porque trabajan en conjunto. La primera, "Visualización de la página de tienda" con la opción "Mostrar categorías", controla qué ve el usuario cuando llega a la página principal de tu tienda: en lugar de productos sueltos, verá las categorías principales. La segunda, "Visualización de la página de categoría" con "Mostrar subcategorías", define qué pasa cuando el usuario hace clic en una de esas categorías: si esa categoría tiene subcategorías, se las mostrará primero antes de listar productos. Es esta combinación la que crea el recorrido completo de tienda → categoría → subcategoría → productos.

WooCommerce te ofrece varias combinaciones en estos menús ("Mostrar productos", "Mostrar categorías" o "Mostrar categorías y productos"). Si eliges "Mostrar categorías y productos", el sistema mostrará las categorías arriba y debajo los productos sueltos que no estén dentro de ninguna categoría. Para una navegación limpia por niveles, mi recomendación es usar solo "Mostrar categorías" en la tienda principal, así el usuario siempre empieza por elegir una categoría y no se mezcla la jerarquía.

Consejo: Para que esta navegación se vea profesional, asígnale una imagen de portada a cada categoría desde "Productos" > "Categorías". Una tienda que muestra categorías sin imagen se ve incompleta; con buenas imágenes de categoría, esa primera pantalla se convierte en una vitrina atractiva que invita a explorar.

Paso 3: Personalización adicional con CSS

3.1 Eliminar líneas no deseadas

1. Inspecciona la línea no deseada: Usa las herramientas de desarrollador del navegador (clic derecho > "Inspeccionar") para identificar la línea no deseada en la página, en este caso nos referimos a la línea de la barra lateral de Divi que viene en gris por defecto.
2. Copia el CSS correspondiente: Copia el CSS que controla esa línea y ajusta el background-color a #fff para que sea blanco.
3. Añade el CSS personalizado: Ve a "Apariencia" > "Personalizar" > "CSS adicional" y pega el CSS modificado.

CSS a usar:

@media (min-width: 981px) {
    #main-content .container:before {
        background-color: #fff;
    }
}

Déjame explicarte qué hace este pequeño fragmento de CSS, porque entenderlo te va a servir para muchos otros ajustes en Divi. Por defecto, cuando activas la barra lateral en la tienda, Divi dibuja una línea divisoria vertical de color gris entre el contenido y la barra. Esa línea se genera con un pseudo-elemento :before sobre el contenedor principal. Lo que hacemos aquí es sobrescribir su color de fondo a blanco (#fff) para que se funda con el resto de la página y quede invisible. La regla @media (min-width: 981px) hace que este ajuste solo se aplique en pantallas de escritorio, que es donde aparece esa línea, dejando el comportamiento móvil intacto.

3.2 Ajustar el tamaño de los títulos

1. Inspecciona los títulos: Usa las herramientas de desarrollador del navegador para identificar el tamaño de los títulos.
2. Ajusta el font-size: Modifica el font-size en el CSS según tus preferencias.
3. Añade el CSS personalizado: Ve a "Apariencia" > "Personalizar" > "CSS adicional" y pega el CSS modificado.

Saber usar la herramienta de inspección del navegador es una habilidad que te va a dar autonomía total sobre el aspecto de tu tienda. Cuando haces clic derecho sobre cualquier elemento y eliges "Inspeccionar", el navegador te muestra exactamente qué clase CSS controla ese elemento y qué propiedades tiene. A partir de ahí puedes copiar el selector, llevarlo al "CSS adicional" del personalizador y ajustar lo que necesites. No tengas miedo de experimentar: los cambios en el panel de inspección son temporales y solo afectan tu vista; nada se rompe hasta que decides guardarlo de forma permanente en el personalizador.

Paso 4: Configurar la barra lateral

4.1 Añadir widgets a la barra lateral

1. Ve a "Apariencia" > "Widgets": Accede a la sección de widgets desde el panel de administración de WordPress.
2. Crea una barra lateral nueva o edita la existente: Puedes crear una nueva área de widgets o editar la barra lateral existente.
3. Añade los widgets necesarios: Arrastra y suelta los widgets que necesitas en la barra lateral, tales como "Filtrar por precio", "Categorías de productos", "Productos vistos recientemente", entre otros.

Los widgets de la barra lateral son los que terminan de darle a tu tienda esa sensación de catálogo profesional y navegable. El widget de "Categorías de productos" refuerza la estructura jerárquica que acabamos de crear, permitiendo al usuario saltar entre categorías sin tener que volver atrás. El de "Filtrar por precio" es especialmente valioso en tiendas con productos de rangos variados, porque deja que el comprador acote rápidamente lo que entra en su presupuesto. Y "Productos vistos recientemente" ayuda a que el usuario retome lo que estaba mirando, algo que aumenta las probabilidades de que complete la compra.

Consejo: No satures la barra lateral con widgets. Tres o cuatro bien elegidos (categorías, filtro de precio y quizá un buscador) funcionan mucho mejor que diez widgets que distraen. En diseño de tiendas, menos elementos casi siempre significan más conversiones.

Paso 5: Validar y ajustar

1. Revisa la tienda: Ve a tu tienda en línea y verifica que las categorías y subcategorías se muestran correctamente.
2. Ajusta cualquier configuración adicional: Si es necesario, realiza ajustes adicionales en el personalizador de temas o mediante CSS personalizado para asegurarte de que todo funcione y se vea correctamente.

La validación es un paso que muchos se saltan y luego lamentan. No te limites a revisar la tienda en tu computadora: ábrela también en el celular y en una tablet si puedes. WooCommerce y Divi son responsivos, pero la forma en que se apilan las categorías y la barra lateral en pantallas pequeñas puede requerir un ajuste fino. Recorre el flujo completo como si fueras un cliente: entra a la tienda, elige una categoría, baja a una subcategoría y abre un producto. Si en algún punto del recorrido te sientes perdido o algo se ve raro, ese es justo el lugar donde tu usuario también tropezaría, y vale la pena pulirlo.

¿Necesito un plugin para mostrar categorías y subcategorías en WooCommerce?

No. WooCommerce trae esta funcionalidad de forma nativa; solo está desactivada por defecto. Todo lo que necesitas hacer es activarla desde "Apariencia" > "Personalizar" > "WooCommerce" > "Catálogo de productos", como vimos en el Paso 2. Los plugins de filtrado avanzado pueden sumar funciones extra, pero para la estructura básica de categorías y subcategorías no hacen falta.

¿Por qué no aparecen mis subcategorías?

Las subcategorías solo se muestran si efectivamente existen como categorías hijas dentro de una categoría padre, y si esa categoría padre tiene productos o subcategorías asignados. Verifica en "Productos" > "Categorías" que hayas creado la jerarquía correctamente, eligiendo una categoría superior en el campo "Categoría superior" al crear cada subcategoría. Si la jerarquía está bien pero no aparecen, limpia el caché del sitio.

¿Esto afecta el SEO de mi tienda?

Lo afecta de forma positiva. Una estructura clara de categorías y subcategorías crea una jerarquía de URLs lógica que los buscadores entienden y valoran. Además, mejora la experiencia de navegación, lo que reduce la tasa de rebote y aumenta el tiempo en sitio, dos señales que Google interpreta como indicadores de calidad.

Conclusión

Siguiendo estos pasos, podrás configurar tu tienda en línea para que sea más fácil de navegar y esté mejor organizada, lo que mejorará la experiencia de tus clientes. Si deseas aprender más sobre cómo optimizar y personalizar tu tienda en línea, visita nuestro sitio UXDivi y suscríbete a nuestros cursos.

Lo más valioso de esta configuración es que escala con tu negocio. Hoy quizás tengas tres categorías, pero el día que tu catálogo crezca a cincuenta productos repartidos en diez categorías, esta misma estructura seguirá funcionando sin que tengas que rehacer nada. Estás construyendo una base sólida desde el principio, y eso es exactamente lo que separa a una tienda que improvisa de una que está pensada para crecer. Si quieres dominar WooCommerce de punta a punta (pasarelas de pago, envíos, cupones, automatizaciones y mucho más) te recomiendo nuestro curso completo de WooCommerce, donde te llevo de la mano para construir una tienda que de verdad venda.

Espero que este tutorial te haya sido útil. No olvides suscribirte a nuestro canal de Youtube para obtener más recursos y cursos sobre diseño web con Divi y WooCommerce. ¡Nos vemos en el próximo tutorial!