Cómo personalizar las migas de pan de WooCommerce

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(9 votos, promedio: 4.2)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

5 comentarios en “Cómo personalizar las migas de pan de WooCommerce”

  1. 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. 🙁

      1. 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?

  2. Jaime Zubiaur

    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.

Deja un comentario

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

 

Ir arriba Ir al contenido