Cómo personalizar las migas de pan de WooCommerce

Publicado por Fernando Tellado el 16 Mar, 2017

Índice de contenidos

1 Cambiar el texto Inicio
2 Cambiar el separador
3 Cámbialo todo
4 Cambiar la URL de Inicio
5 Quitar las migas de pan (breadcrumbs)
6 ¿Sabes más trucos para 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;
}

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'] = ' &gt; ';
	return $defaults;
}

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'   => ' &#47; ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => _x( 'Tienda', 'breadcrumb', 'woocommerce' ),
        );
}

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';
}

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 );
}