La funcionalidad de la miga de pan en WooCommerce es esencial para mejorar la navegación en una tienda online. Sin embargo, cuando un producto pertenece a múltiples categorías, esto puede provocar confusión en los usuarios. En este artículo, exploraremos cómo resolver este problema y optimizar la experiencia del cliente al navegar por los productos de tu tienda.

Las migas de pan, o breadcrumbs, son elementos de navegación que muestran la ruta que ha seguido un usuario en un sitio web. Estas no solo ayudan a los visitantes a entender su ubicación dentro del sitio, sino que también pueden influir en el SEO. A continuación, abordaremos cómo implementar y personalizar las migas de pan en WooCommerce, especialmente cuando los productos tienen múltiples categorías asignadas.

¿Qué son las migas de pan y por qué son importantes?

Las migas de pan son enlaces jerárquicos que reflejan la estructura del sitio web. Al hacer clic en cualquiera de esos enlaces, un usuario puede regresar a secciones anteriores con facilidad. Esto es particularmente valioso en tiendas online, donde la navegación puede volverse compleja. Algunas razones por las que son cruciales incluyen:

  • Mejora de la experiencia de usuario: Facilitan la navegación al permitir a los visitantes volver a categorías anteriores con un solo clic.
  • SEO: Ayudan a los motores de búsqueda a entender la estructura de tu sitio, lo que puede mejorar tu ranking.
  • Aumento del tiempo de permanencia: Al hacer la navegación más intuitiva, los usuarios tienden a explorar más productos.

El problema de las categorías múltiples en WooCommerce

En WooCommerce, cada producto puede estar asociado a varias categorías. Esto puede ocasionar que las migas de pan no muestren la categoría correcta desde la cual se accedió al producto, generando confusión. Por ejemplo, si un cliente llega a una chaqueta desde la categoría «nueva colección», la miga de pan podría mostrar «punto» en su lugar. Esto impide que el usuario vuelva a la categoría desde la cual llegó.

Para solucionar este problema, es vital personalizar la lógica de las migas de pan, de manera que reflejen la categoría correcta al momento de acceder a un producto.

Cómo personalizar la miga de pan de WooCommerce según procedencia

Para lograr que las migas de pan reflejen la categoría desde la que se accede al producto, necesitas añadir un filtro en el archivo functions.php de tu tema activo. Este filtro modificará la forma en que se generan las migas de pan. Aquí te explicamos cómo hacerlo:


/* Cambiamos el segundo nivel de la miga de pan cuando se entra en un producto 
si la categoría por la que se entra es diferente a la genérica */
add_filter( 'woocommerce_get_breadcrumb', 'woo_custom_category_breadcrum', 20);
function woo_custom_category_breadcrum($breadcrumb) {
	if (is_product()) {
		if ($_SERVER['HTTP_REFERER'] != $breadcrumb[1][1]) {
			$slash = explode('/', $_SERVER['HTTP_REFERER']);
			$slug = isset($slash[sizeof($slash)-2]) ? $slash[sizeof($slash)-2] : false;
			$wp_category = $slug ? get_terms(
				array(
					'slug' => $slug,
					'taxonomy' => 'product_cat',
					'numpost' => 1
				)
			) : [];
			if (sizeof($wp_category)) {
				list($category) = $wp_category;
				$breadcrumb[1][0] = $category->name;
				$breadcrumb[1][1] = get_term_link($category->term_id, 'product_cat');
				$breadcrumb = array_values(array_filter($breadcrumb, function($key) use ($breadcrumb) {
					return ($key < 2 || sizeof($breadcrumb)-1 == $key);
				}, ARRAY_FILTER_USE_KEY));
			}
		}
	}
    return $breadcrumb;
}

Al implementar este código, las migas de pan se ajustarán automáticamente, mejorando la navegación de los usuarios en tu tienda online.

¿Cómo eliminar las migas de pan en WooCommerce?

Si decides que no quieres utilizar las migas de pan en tu tienda, es posible eliminarlas de manera sencilla. Esto puede hacerse a través del panel de administración de WordPress o mediante código. A continuación, te mostramos cómo hacerlo:

  • Desde el panel de administración: Ve a Apariencia > Personalizar > Opciones de WooCommerce y desactiva la opción de mostrar migas de pan.
  • Usando código: Añade el siguiente fragmento al archivo functions.php:
    
    remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
    

Cómo crear subcategorías en WooCommerce

Las subcategorías son útiles para organizar mejor los productos dentro de una categoría principal. Para añadir subcategorías en WooCommerce, sigue estos pasos:

  1. Ve al panel de WordPress y selecciona Productos > Categorías.
  2. En el lado izquierdo, agrega el nombre de la subcategoría.
  3. Selecciona la categoría principal a la que deseas asociar la subcategoría.
  4. Haz clic en Añadir nueva categoría.

Las subcategorías también pueden ayudar a mejorar la claridad de las migas de pan, haciendo que la navegación sea más intuitiva.

Cómo agregar productos variables en WooCommerce

Los productos variables son aquellos que tienen diferentes variaciones, como tamaño o color. Para agregar un producto variable, sigue estos pasos:

  1. Ve a Productos > Añadir nuevo.
  2. En la sección de datos del producto, selecciona Producto variable en el menú desplegable.
  3. Ve a la pestaña de Atributos y añade los atributos como tamaño o color.
  4. Guarda los atributos y, luego, ve a la pestaña de Variaciones para añadir las variaciones específicas.

Con productos variables bien configurados, tu tienda ofrecerá una experiencia de compra más completa y satisfactoria a tus clientes.

Para más información sobre cómo optimizar tu tienda WooCommerce, puedes ver este video que te guiará en el proceso:

Si estás pensando en crear o mejorar tu tienda online, en Nuevas Ideas Web ofrecemos servicios de diseño web personalizados que se adaptan a tus necesidades. ¡Contáctanos!




¿Quieres contactar con ideaWeb? ¿Necesitas un presupuesto web o gráfico?

ideaWeb
DISEÑO WEB MADRID

91 494 45 24

608 408 159

info@ideaweb.es

También puedes describirnos tu proyecto web o bien enviarnos tus propuestas, dudas o consultas para presupuesto de Diseño web, Posicionamiento SEO o Diseño de Logotipo:

ir al formulario de contacto