Solución al problema del breadcrumb en WooCommerce

⚠️ AVISO IMPORTANTE: Este post fue publicado hace varios años, eso quiere decir que todos los snippets que verás en él, pueden no ser compatibles con las veriones actualues de WooCommerce y WordPress. Por favor, testéalos en un sitio de pruebas antes de subirlos a producción.

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.