WOOCOMMERCE: CATEGORÍAS Y SUBCATEGORÍAS DE PRODUCTOS EN MENÚS

Cuando tienes una tienda online con pocas categorías, o sin subcategorías, hacer menús a mano con el sistema tradicional de wordpress no tiene problema.

El problema viene cuando tienes una tienda online con cientos de categorías y subcategorías:

• Añadirlas y ordenarlas a mano es una locura y una pérdida de tiempo, que da pereza y genera errores humanos.
• Cuando haces una tienda online para un cliente, que no conoce WordPress a fondo, pedirle que se acuerde de editar sus menús cada vez que crea una nueva subcategorías es too much, y volvemos a lo anterior: para el cliente es una locura, le da pereza, y acaba generando errores humanos.

Es por esto que es necesario saber cómo hacer para que las categorías y subcategorías de una tienda online en Woocommerce se agreguen automáticamente al menú.

Ya os adelanto que WordPress y Woocommerce no ofrecen esta opción de serie, por lo que tenemos que hacer un trabajito en la web.

Y creedme, en su día me tiré horas leyendo en foros varios en Stack Overflow buscando una solución seria y aplicable a los proyectos de mis clientes…hasta que la encontré, la vengo probando años y dejo el paso a paso en este tutorial 🙂

Podréis añadir todas las categorías y subcategorías de vuestra tienda online en el menú de forma automática, con un plugin gratuito y un pequeño retoque CSS convertirlo además en mega menú con Divi.

PASO 1. INSTALAR ESTE PLUGIN

El súper plugin gratuito que nos va a permitir esta maravilla es JC SUBMENU.

Se trata de un plugin bastante antiguo, que ya no se actualiza y que no está probado con versiones recientes de WordPress, pero cuando las cosas están bien hechas por gente que sabe….pura maravilla.

PASO 2. CONFIGURAR JC SUBMENU EN NUESTRO MENÚ

Lo que hace este plugin es básicamente permitirte anidar bajo un elemento del menú, todo lo que quieras si sabes cómo configurarlo.

Por ejemplo, yo hoy estoy con la tienda online de un cliente que vende coches en miniatura para coleccionistas. Tiene 5 categorías y decenas de marcas en cada una, por lo que el mení de su tienda online tiene que mostrar casi 100 elementos…y esto a mano sería una locura, tanto para mi haciendo la tienda como para el cliente manteniéndolo al día en el futuro.

Voy a mi menú WordPress con normalidad, y vemos como ha aparecido la opción JC SUBMENU en la configuración de los menús.

Por ejemplo, yo quiero que aparezcan automáticamente en el submenú todas las subcategorías que se agreguen a la categoría padre 1:64.

Pero jugando con las categorías de JC SUBMENU, podemos anidar todo lo que está en nuestra web con un par de clics!

PASO 3. COMPROBAR MENÚ EN EL FRONTEND

Y es que quería mostraros esto: estamos en esta problemática precisamente porque es una tienda con demasiadas categorías y subcategorías….y la lista se hace kilométrica e innavegable.

Así que tenemos que toquetear un poquito de CSS.

PASO 4. OPCIONAL. CONVERTIR EL MENÚ EN MEGAMENÚ

Para esto, nos aprovecharemos de la clase CSS de Divi mega-menu.

Lo primero que tenemos que hacer es habilitar las CLASES CSS en las opciones de pantalla:

Una vez habilitada la clase CSS, nos aparecerá la opción en el menú, y escribiremos mega-menu, que ya viene predefinida en Divi.

Refrescamos nuestra página…et voilá! La magia del CSS!