En una tienda con muchas categorías y productos, es fácil que el visitante termine sin saber muy bien cómo llegó hasta una ficha concreta. Para evitarlo, podemos utilizar los Breadcrumbs en WooCommerce, también conocidos como migas de pan.
Esta ruta suele aparecer en la parte superior de la página y muestra algo parecido a un menú, Inicio, categoría, subcategoría y producto. Casi todos esos elementos funcionan como enlaces, así que el usuario puede volver a una sección anterior sin tener que abrir el menú ni pulsar varias veces el botón de retroceso.
Una persona entra en la categoría principal, abre la sección de zapatillas y después visita un modelo concreto. Si quiere seguir comparando, las migas de pan le permiten regresar al listado de zapatillas con un solo clic. En catálogos pequeños quizá no parezcan tan necesarias, pero empiezan a resultar bastante útiles cuando la tienda tiene muchas secciones y niveles. El visitante entiende mejor dónde está y puede moverse por el catálogo sin empezar de nuevo cada vez. Para que esta ruta sea útil, también conviene organizar las categorías de los productos en WooCommerce.
También ayudan a mostrar de una forma más clara cómo está organizada la tienda. Los buscadores pueden utilizar esa ruta para entender la relación entre categorías, subcategorías y productos. Esto no significa que añadir breadcrumbs vaya a mejorar por sí solo el posicionamiento, pero sí contribuye a mantener una estructura más lógica para el SEO de la tienda.
WooCommerce ya incluye su propio sistema de migas de pan. El problema es que no todos los temas las muestran de la misma manera. En algunos podremos activarlas o cambiar su aspecto desde las opciones del diseño. En otros casos tendremos que usar código o apoyarnos en un plugin SEO.
La ubicación también importa. Lo normal es colocarlas antes del título del producto o cerca de la parte superior, pero sin darles más protagonismo que al precio, las imágenes o el botón de compra. Deben servir como una referencia, no convertirse en otro elemento que distraiga.
En esta guía veremos cómo funcionan los Breadcrumbs en WooCommerce y las distintas formas de añadirlos o personalizarlos con Astra, Divi, código y herramientas como Yoast SEO.
Tabla de contenidos
Estos breadcrumbs en WooCommerce podemos verlos en las rutas de navegación de algunos productos en las tiendas que conocemos. Esto ayuda a los clientes a poder navegar dentro de las categorías disponibles de los productos que visitemos. Nuestros clientes pueden hacer clic en estas categorías para mostrar los productos de estas y así poder ver o interesarse en otro tipo de productos dentro de la misma, así como también podría aumentar las ventas al permitir que las personas se puedan movilizar más rápido dentro de la tienda. Un ejemplo de este sistema sería MercadoLibre o Amazon.
Este método, además de ayudar a los clientes y usuarios del sitio a poder encontrar lo que necesitan de forma más sencilla, permite que los buscadores como Google, Bing, Yahoo, entre otros motores de búsqueda, puedan leer estos breadcrumbs como parte del resultado de búsqueda de Google. Esto, además de ayudar a mantener un orden de cara a Google, también permite que el usuario, antes de ingresar al producto, pueda ver las categorías y hacer clic en esta misma para poder ingresar a la sección de forma más sencilla.
Los Breadcrumbs en WooCommerce sirven para que el visitante sepa en qué parte de la tienda está. En un catálogo pequeño quizá pasen desapercibidos, pero cuando hay muchas categorías, subcategorías y productos, pueden facilitar bastante el recorrido.
Imaginemos que alguien entra en la sección de ropa, después abre la categoría de camisetas y termina consultando un modelo concreto. Desde la ruta de breadcrumbs en WooCommerce puede volver de forma directa a camisetas o a ropa, sin tener que abrir otra vez el menú ni retroceder varias páginas.
Entre las ventajas que pueden aportar encontramos:
- Ayudan a ubicarse: el usuario ve a qué categoría pertenece el producto que está consultando.
- Permiten volver atrás con rapidez: basta con pulsar sobre una categoría anterior para regresar a ese listado.
- Evitan recorridos innecesarios: no hace falta volver al inicio y repetir todo el camino.
- Facilitan la comparación: el visitante puede regresar a la categoría para seguir mirando productos similares.
- Ordenan mejor los catálogos grandes: resultan en especial prácticos cuando la tienda tiene varios niveles.
- Ofrecen otra forma de navegar en móvil: pueden servir como apoyo cuando el menú está recogido dentro de un icono.
Esta ruta también da pistas sobre cómo está organizado el catálogo. Una estructura como Inicio > Ropa > Camisetas > Producto permite entender la relación entre las distintas páginas de la tienda. Para conseguir una jerarquía clara, conviene organizar de forma correcta las categorías y taxonomías de WooCommerce.
Los buscadores también pueden utilizar esa información para interpretar mejor la jerarquía del contenido. Esto no significa que añadir breadcrumbs vaya a posicionar los productos por sí solo, pero sí ayuda a mantener una arquitectura más comprensible.
En algunos resultados de Google, las migas de pan pueden mostrarse en lugar de una URL de WordPress larga. Para facilitar que los buscadores interpreten esta información, podemos utilizar datos estructurados en WordPress. Así, antes de entrar, el usuario puede ver la categoría a la que pertenece el producto y tener algo más de contexto.
También son útiles cuando la visita no comienza desde la página principal. Si alguien llega a una ficha desde Google, un anuncio o un enlace externo, quizá no sepa cómo está organizada la tienda. La ruta le permite situarse y encontrar otros productos relacionados. Eso sí, no conviene crear cadenas interminables. Si la ruta incluye demasiadas categorías, nombres poco claros o niveles repetidos, puede terminar confundiendo. Lo mejor es utilizar una jerarquía sencilla y parecida a la que ya seguimos para ordenar el catálogo.
Si bien el plugin de WooCommerce no provee una configuración por defecto de este ajuste, tenemos varias formas de activar estas opciones de breadcrumbs en las páginas de los productos. Para esto podemos utilizar una o varias de estas opciones:
- Temas compatibles con ajustes de breadcrumbs para productos
- Insertar de forma manual los breadcrumbs en el código de WordPress.
- Insertar por medio de un plugin los breadcrumbs.
- Utilizar un plugin de SEO que permita esta integración, por ejemplo, Yoast SEO.
Vamos a proceder uno a uno a explicar estos puntos.
Así como comentamos que WooCommerce no agrega en muchas ocasiones por defecto esta funcione en los productos, algunos temas hoy en día están adaptados para que esta función se agregue en sus ajustes básicos, por lo que antes de instalar cualquier plugin es bueno darle un vistazo a los ajustes de personalización de la plantilla para validar que esta función no esté disponible, unos ejemplos de estos temas son, todos los WooThemes y los temas predeterminados de WordPress (como twenty twenty two) permiten agregar la barra de navegación con las migas de pan de WooCommerce de productos sin una configuración adicional.
Como es el caso, el tema de Astra posee también la posibilidad de agregar breadcrumbs en WooCommerce de forma predeterminada. Así mismo, la opción podemos encontrarla en Apariencias > personalizar > WooCommerce > Producto individual > Opciones de productos.
Este ajuste no está agregado por defecto en nuestro Divi, por lo que necesitaremos un plugin para poder agregar esta función a nuestros productos; de igual forma, esto es bastante sencillo, solo necesitaremos un plugin.
Recordemos que para instalar plugins podemos seguir el proceso de nuestra guía sobre cómo instalar un plugin en WordPress.
Una vez que tengamos agregado este plugin a nuestro WordPress, ingresamos o bien al producto en concreto o a nuestra plantilla de producto de Divi, para agregar la posibilidad de Breadcrumbs en este tema. Una vez ingresamos a la plantilla, en este caso Generador de temas de Divi > productos, agregamos un módulo nuevo de texto donde necesitemos agregar el breadcrumb.
Para agregar esta miga de pan o breadcrumb en WooCommerce gracias al plugin de breadcrumb, vamos a tener que agregar este shortcode de WordPress [breadcrumb]. Una vez que lo agregamos, vamos a ver un breadcrumb que no corresponde a nuestros productos, siempre será uno predeterminado para previsualizarse en la sección.
Como podemos ver, tenemos nuestro breadcrumb, pero este no tiene los enlaces a productos; esto es normal. Si luego de que guardamos los cambios ingresamos a nuestros productos, vamos a poder ver que están mostrándose de forma correcta. Como comentamos, esto es normal, ya que por defecto este plugin no sabe dónde se encuentra esta plantilla, por lo que muestra un texto por defecto que en este caso es un /blog, pero al ingresar al producto veremos lo siguiente.
Si queremos modificar los colores y ajustes de este plugin, tenemos una configuración que podemos utilizar para personalizar esto. Para ello, vamos a ingresar al menú lateral del escritorio Breadcrumbs > Estilos; aquí encontraremos todos los ajustes relacionados con los colores y tamaño de esta fuente, si vemos que no se adapta del todo a los colores de nuestro sitio.
El plugin de WooCommerce utiliza un código base el cual es woocommerce_breadcrumb() esta función se utiliza para mostrar los breadcrumbs en WordPress. Se puede insertar de forma manual este código a la plantilla del producto, de esta forma no utilizar plugins adicionales. Hay que tener en cuenta que los cambios realizados en cualquier archivo base de los plugins no se mantienen si se actualiza el mismo, por lo tanto, en cada actualización habrá que agregar este cambio.
- Ingresamos en nuestro panel de administración de WordPress
- Una vez dentro del panel vamos a plugins > editor de archivos de plugin
- En esta página buscamos el plugin de WooCommerce en el desplegable de plugins activos en la derecha de la página.
- Una vez cargados los archivos de este plugin, ingresamos en templates > single-product.php
- Insertamos en la línea 33 de este archivo la siguiente línea de código.
<?php woocommerce_breadcrumb(); ?>
Hacemos clic en el botón del final, que indica actualizar.
Con esto se vería en aquellos temas que no se muestren por defecto los breadcrumbs, algunos temas ya traen esta configuración en su código base, aunque no se encuentre en el WooCommerce por defecto. Estos lo agregan para facilitar a los usuarios el tener que agregarlos de forma manual, si nuestro tema no lo tiene activo por defecto, realizamos estos pasos y tendríamos activo el breadcrumb de WooCommerce en la parte superior de cada producto.
Una vez tenemos esto activo podemos en caso de que queramos personalizar este breadcrumb base de WooCommerce el plugin:
Este plugin de WooCommerce no se utiliza para agregar los breadcrumbs, se utiliza para modificar los estilos o la apariencia que van a tener los breadcrumbs en WooCommerce de una forma más sencilla, nos permite modificar los separadores, agregar clases CSS a WordPress, cambiar el texto del inicio, la URL del inicio, entre otras opciones para modificar la apariencia del mismo.
Ya que los breadcrumbs son rutas que forman parte de la optimización en la navegación, la mayoría, por no decir todos, los plugins de SEO ofrecen la posibilidad de activar en el sitio esta mejora, ya sea de forma indirecta, como activando la opción. Esto es un punto a favor si ya estamos utilizando algún plugin de SEO en nuestra web. Por ejemplo, en caso de tener el plugin de Yoast SEO.
Ingresamos al menú lateral de nuestro backend de WordPress: SEO > Apariencia en el buscador > Migas de pan. En esta sección podemos modificar el separador, texto de inicio, prefijos, entre otros ajustes.
Debemos seleccionar Categoría donde indica Productos para mostrar los breadcrumbs en este tipo de contenido.
Luego de que activamos esta categoría, vamos a necesitar bajar hasta el final de la sección para activar los breadcrumbs.
Luego de esto, de igual forma vamos a tener que insertar un código en el single-product.php de nuevo. Al igual que el código anterior en la línea 33 de este archivo.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Como alternativa a este código tan largo, podemos agregar el abreviado.
<?php echo do_shortcode(""); ?>
Conclusión
Añadir Breadcrumbs en WooCommerce puede parecer un cambio pequeño, pero se nota bastante cuando la tienda empieza a crecer. Si tenemos varias categorías, subcategorías y productos, esta ruta ayuda al visitante a saber dónde está y a volver a una sección anterior sin dar tantas vueltas.
También resulta útil cuando alguien entra directamente en una ficha desde Google, una campaña o una red social. En ese caso, la persona no ha recorrido la tienda desde el inicio y quizá no sabe dónde encontrar productos parecidos. Las migas de pan le muestran enseguida a qué categoría pertenece el artículo y le dan una salida para seguir mirando.
La forma de añadirlas dependerá de cómo esté montada la web. Algunos temas, como Astra o Divi, ya incluyen opciones para mostrarlas. También podemos usar código o recurrir a un plugin SEO como Yoast SEO. No hay un único método válido; lo importante es elegir el que encaje mejor con el tema y con la plantilla de producto de WooCommerce que estamos utilizando.
Ahora bien, los breadcrumbs no arreglan una estructura mal organizada. Si las categorías tienen nombres confusos o hay demasiados niveles, la ruta también será difícil de entender. Por eso conviene revisar primero cómo está ordenado el catálogo y evitar algunos de los errores habituales de navegación en WooCommerce.
En móvil hay que prestarles algo más de atención. Una cadena muy larga puede ocupar varias líneas y quitar espacio al título, al precio o a los botones de compra. A veces basta con reducir el tamaño del texto, ajustar los espacios o simplificar la ruta para mantener un diseño adaptable.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
