Las migas de pan (breadcrumbs) de WooCommerce permiten un acceso rápido a las rutas de tu tienda online, pero no siempre se ajustan a nuestros gustos, así que no está mal aprender a personalizarlas.
Los siguientes códigos, añadidos a tu plugin de personalizaciones o al archivo functions.php del tema hijo activo personalizan distintos elementos de las migas de pan de WooCommerce, úsalos y adáptalos como prefieras.
Cambiar el texto Inicio
add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text' ); function jk_change_breadcrumb_home_text( $defaults ) { // Cambia el texto inicio de las migas de pan de 'Inicio' a 'Tienda' $defaults['home'] = 'Tienda'; return $defaults; }
Cambiar el separador
add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter' ); function jk_change_breadcrumb_delimiter( $defaults ) { // Cambia el separador de las migas de pan de '/' a '>' $defaults['delimiter'] = ' > '; return $defaults; }
Cámbialo todo
Para cambiar todos los elementos aquí tienes los códigos a personalizar:
add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' ); function jk_woocommerce_breadcrumbs() { return array( 'delimiter' => ' / ', 'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">', 'wrap_after' => '</nav>', 'before' => '', 'after' => '', 'home' => _x( 'Tienda', 'breadcrumb', 'woocommerce' ), ); }
Cambiar la URL de Inicio
Una personalización más típica de lo que puedes pensar es cambiar la URL por defecto del Inicio de las migas de pan. Puedes hacerlo con un código como el de este ejemplo:
add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'https://miotraurl.com'; }
Quitar las migas de pan (breadcrumbs)
Y, para terminar, solo recordarte que si no quieres mostrar las migas de pan de WooCommerce el código a añadir es este:
add_action( 'init', 'jk_remove_wc_breadcrumbs' ); function jk_remove_wc_breadcrumbs() { remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 ); }
¿Sabes más trucos para las migas de pan de WooCommerce?
Pues nada, nos los cuentas en los comentarios.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando, he estado buscando algo parecido que aún no logro resolver y es que tengo una tienda online que en la pagina de producto aparecen dos veces las migas de pan, siento que esto me afecta el posicionamiento y también la experiencia de usuario. ¿Como hago para eliminar y solo dejar una? No tengo acceso al functions.php ni al editor de wordpress creo que el autor del theme lo tiene bloqueado. 🙁
Por FTP o el cPanel del hosting siempre podrás acceder al archivo para quitar las migas de pan
jajajajaj a veces te bloqueas con soluciones tan sencillas y obvias, que da pena preguntar. Gracias Fernando. ¿Existe alguna herramienta que me permita editar html de wordpress incrustado en php?
Será una llamada de PHP. Edita los archivos que la contengan desde el editor de código de tu panel de hosting directamente
Hola Fernando, muy interesante tu artículo.
¿Sabrías si es posible, en el caso de que se esté usando un producto agrupado, mostrar en lo en la ruta de producto «hijo»? Es decir: INICIO / CATEGORÍA DE PRODUCTO / PRODUCTO AGRUPADO / PRODUCTO SIMPLE
Muchas gracias.