Solución al problema del breadcrumb en WooCommerce

La semana pasada estuve hablando de la importancia de la usabilidad en un ecommerce y cómo puede afectar esto a tu cuenta de resultados.

Uno de los aspectos que destaca era el de informar en todo momento al cliente en qué página se encuentra y a través de qué páginas de tu tienda ha navegado hasta llegar ahí. Para ello, recomendaba hacer uso de las famosas migas de pan, más conocidas como breadcrumbs.

Pues bien, parece que WooCommerce no muestra bien la ruta del breadcrumb para los productos que pertenecen a diferentes categorías y claro, esto puede llegar a ser muy confuso para el cliente que ha entrado en la página de un producto a través de una categoría concreta y de repente el breadcrumb le muestra otra ruta diferente.

En este artículo voy a explicarte cómo resolver el problema del breadcrumb en WooCommerce para que se muestre en todo momento la ruta de acceso correcta. De esta forma no sólo no desorientas al cliente, sino que además mejoras la experiencia de navegación de tu tienda online.

La ruta del breadcrumb en mi WooCommerce no es correcta. ¿Qué ocurre?

Cuando estamos organizando el catálogo de productos, a veces, es necesario asignar un mismo producto a varias categorías diferentes. Hasta ahí no hay problema, de hecho es algo muy común. El problema viene cuando WooCommerce genera el breadcrumb mientras navegas por la tienda.

Y es que si ese producto que has creado, pertenece a tres categorías diferentes; categorías A, categoría B y categoría C; el breadcrumb que se muestra cuando entras a la página del producto, siempre seguirá esta ruta «Tienda > … > Categoría A > Nombre del Producto«.

Da igual que accedas a la página del producto a través de las categorías B o C.

Esto ocurre porque la función que genera el breadcrumb en WooCommerce no identifica desde qué categoría de producto has entrado, sino que toma siempre la primera categoría del producto por orden alfabético. De forma que si el cliente quiere regresar a la categoría B o C a través de los enlaces del breadcrumb, no podrá hacerlo.

¿Cómo resolver el problema del breadcrumb en WooCommerce?

Existe una solución a este problema, y aunque no es la más idónea, sinceramente no conozco otra mejor.

Antes de hacer nada, deberás crearte un tema hijo para tu tienda WooCommerce y aplicar los pasos que voy a explicar a continuación este mismo tema. Es imprescindible trabajar sobre un tema hijo, ya que vas a añadir una nueva estructura de carpetas y si lo haces sobre la plantilla original corres el riesgo de perder todos los cambios cuando actualices. (Si nunca has creado un tema hijo, te recomiendo que leas este tutorial del blog AyudaWordPress)

Por tanto, la solución consiste en crearte una copia del fichero «breadcrumb.php» de WooCommerce (puedes encontrarlo aquí «wp-content/plugins/woocommerce/templates/global/breadcrumb.php«) en tu tema hijo y guardarlo en el directorio «tu-tema-hijo/woocommerce/global/breadcrumb.php«. Obviamente tendrás que crearte los directorios que falten.

Después de crear la copia, deberás sustituir el siguiente trozo de código encargado de generar la ruta del breadcrumb en las páginas de productos de WooCommerce:


elseif ( is_single() && ! is_attachment() ) {
		if ( 'product' == get_post_type() ) {
			echo $prepend;
			if ( $terms = wc_get_product_terms( $post->ID, 'product_cat', array( 'orderby' => 'parent', 'order' => 'DESC' ) ) ) {
				$main_term = $terms[0];
				$ancestors = get_ancestors( $main_term->term_id, 'product_cat' );
				$ancestors = array_reverse( $ancestors );
				foreach ( $ancestors as $ancestor ) {
					$ancestor = get_term( $ancestor, 'product_cat' );
					if ( ! is_wp_error( $ancestor ) && $ancestor ) {
						echo $before . '<a href="' . get_term_link( $ancestor ) . '">' . $ancestor->name . '</a>' . $after . $delimiter;
					}
				}
				echo $before . '<a href="' . get_term_link( $main_term ) . '">' . $main_term->name . '</a>' . $after . $delimiter;
			}
			echo $before . get_the_title() . $after;

por este nuevo código:


elseif ( is_single() && ! is_attachment() ) {
			
			if ( get_post_type() == 'product' ) {
				
				echo $prepend;
				
				if ( $terms = get_the_terms( $post->ID, 'product_cat' ) ) {
					
					$referer = wp_get_referer();
					foreach( $terms as $term){
						$referer_slug = (strpos($referer, $term->slug));
						
						if(!$referer_slug==false){
							$category_name = $term->name;
							$ancestors = get_ancestors( $term->term_id, 'product_cat' );
							$ancestors = array_reverse( $ancestors );
							
							foreach ( $ancestors as $ancestor ) {
								$ancestor = get_term( $ancestor, 'product_cat' );
								
								if ( ! is_wp_error( $ancestor ) && $ancestor )
									echo $before . '<a href="' . get_term_link( $ancestor->slug, 'product_cat' ) . '">' . $ancestor->name . '</a>' . $after . $delimiter;
							}
							echo $before . '<a href="' . get_term_link( $term->slug, 'product_cat' ) . '">' . $category_name . '</a>' . $after . $delimiter;
						}
					}
				}
				
				echo $before . get_the_title() . $after;

Para comprobar que todo funciona correctamente, borra la caché del navegador y desactiva cualquier plugin de caché, si es que estás usando alguno. Después, haz una prueba entrando a la página de producto desde otra categoría y ya se debería de mostrar la ruta del breadcrumb correctamente.

Esta solución tiene un inconveniente bastante importante y es que si WooCommerce hace modificaciones en este fichero en próximas versiones del plugin, no vas a ver los cambios cuando actualices. Esto se debe a que la copia del fichero «breadcrumb.php» que has creado en tu tema hijo va a sobreescribirlos.

Reconozco que corregir este problema del breadcrumb en WooCommerce requiere algunos conocimientos técnicos avanzados sobre WordPress y WooCommerce. Pero por más información que he buscado, no he encontrado la forma de hacerlo «limpiamente» con las acciones y filtros que WooCommerce facilita, ni tampoco con ningún plugin.

Espero, por lo menos, que con esta técnica puedas mejorar la navegación de tu tienda mientras esperamos a que WooCommerce corrija el fallo.

12 comentarios en “Solución al problema del breadcrumb en WooCommerce”

  1. Hola Antonio,

    Muy interesante la solución, pero en las nuevas actualizaciones de woocommerce estas funciones parecen haber desaparecido del breadcrumb.php y estar referenciadas en el archivo class-wc-breadcrumb.php pero de una forma muy distinta a la aquí abordada. De hecho funciona parcialmente…

    Sería de gran ayuda si pudieses sacar una solución actualizada de ello, de hecho viendo la gran cantidad de posts en la página del plugin en wordpress.org pidiendo support sobre este tema, y huérfanos de respuesta parece que hay hueco para un plugin que solucione esto 😀

    Un saludo y gracias por tu tiempo

  2. Hola!
    Primero te quiero felicitar por este útil blog que acabo de encontrar en internet. Demasiada e interesante información! 😉

    Tengo una pregunta: Conoces un plugin para mejorar el aspecto de una tienda desde dispositivos moviles en Woocommerce? Hace poco cree una pequeña tienda pero el diseño no se adapta a la pantalla de iPads y iPhones… 🙁

    Saludos y gracias 🙂

  3. Hola Antonio, tengo un problema con la tienda y los productos. En el menú está «Tienda» que muestra correctamente todos los productos pero luego «Tienda» se despliega en 4 categorías que a su vez algunas de ellas se despliegan en otras dos categorías. Pues bien, una de estas 4 categorías es pulseras. Al crear los productos he seleccionado correctamente en atributos Pulseras pero no me muestra en pantalla ninguna pulsera. En Ajustos de Woocommerce está bien seleccionada la página que tiene que mostrar que es la de Tienda. No sé donde más mirar. Gracias.

    1. Hola Eduardo,

      Muy interesante el artículo de Señor Muñoz. Estoy de acuerdo en gran parte de lo que dice y aunque no soy, ni mucho menos, experto en SEO, a veces no queda más remedio que incluir un producto en 2 categorías (y sinceramente, no creo que afecte al SEO). Eso si, yo evitaría incluirlo en muchas más categorías. Más que nada porque perdería todo el sentido categorizar el catálogo de productos.

      Sin embargo, en este post no pretendo explicar cómo se debe categorizar el catálogo, sino cómo mostrar de forma correcta la ruta del breadcrumb en caso de que hayas incluido un determinado producto en varias categorías diferentes.

      Un saludo!

      1. Muchas gracias, entiendo además que una subcategoria no es como ponerlo en varias categorias. Ejemplo mio MARCA LOTUS, subcategorias relojes, collares, pulseras, en realidad un reloj lotus solo estara en la subcategoria relojes incluida en MARCA LOTUS verdad ?

        Dios me acabo de liar 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Antonio Cantero, siendo la Finalidad; envío de mis publicaciones así como correos comerciales. La Legitimación; es gracias a tu consentimiento. Destinatarios: tus datos se encuentran alojados en mi plataforma de email marketing Active Campaign ubicada en EEUU y acogida al Privacy Shield. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos en contacto@woodemia.com

Ir arriba