Hoy vemos cómo puedes personalizar los breadcrumbs de WooCommerce con este sencillo tutorial, para que encajen mejor con el diseño de tu proyecto.
Una de las características más útiles de WooCommerce que permite al usuario ver dónde se encuentra en tu ecommerce y luego hacer click en un enlace y volver a la página que ha visitado anteriormente son los breadcrumbs o migas de pan.
Dentro de WooCommerce hay varios hooks que puedes usar para personalizar tus breadcrumbs o migas de pan a tu gusto. Para ello, en el tutorial de hoy vamos a usar unos pequeños snippets de código con los que podrás personalizar tu instalación de WooCommerce tal y como necesites. Así que manos a la obra!
Personalizar el texto Inicio
Para personalizar el texto Inicio que aparece al principio de tus breadcrumbs o migas de pan en WooCommerce, sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Cambia el texto 'Inicio' de los breadcrumbs de WooCommerce
add_filter( 'woocommerce_breadcrumb_defaults', 'mk_cambiar_texto_inicio_breadcrumbs' );
function mk_cambiar_texto_inicio_breadcrumbs( $defaults ) {
$defaults['home'] = 'XXXXXXXXXX';
return $defaults;
}Dentro de function mk_cambiar_texto_inicio_breadcrumbs le indicas a WooCommerce que cambie el texto ‘Inicio’ que muestra por defecto, por el texto que indiques. Para ello, solo tienes que cambiar XXXXXXXXXX por el texto que quieras (Tienda, Bolsos, Frutas, etc.).
Personalizar la URL de Inicio
Para personalizar la URL de Inicio que aparece al principio de tus breadcrumbs o migas de pan en WooCommerce, sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Cambia la URL de 'Inicio' de los breadcrumbs de WooCommerce
add_filter( 'woocommerce_breadcrumb_home_url', 'mk_cambiar_url_inicio_breadcrumbs' );
function woo_custom_breadrumb_home_url() {
return 'https://laurlquequieras.com';
}Dentro de function mk_cambiar_url_inicio_breadcrumbs indicas a WooCommerce que cambie la URL del botón ‘Inicio’ que muestra por defecto, por la URL que indiques. Para ello, solo tienes que cambiar https://laurlquequieras.com por la URL que quieras.
Personalizar el separador de los breadbrumbs o migas de pan
Para personalizar el separador / que aparece entre los distintos niveles de tus breadcrumbs o migas de pan en WooCommerce, sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Cambia el separador '/' de los breadcrumbs de WooCommerce
add_filter( 'woocommerce_breadcrumb_defaults', 'mk_cambiar_separador_breadcrumbs' );
function mk_cambiar_separador_breadcrumbs( $defaults ) {
$defaults['delimiter'] = ' > ';
return $defaults;
}Dentro de function mk_cambiar_breadcrumbs indicas a WooCommerce que cambie el símbolo / que muestra por defecto, por el símbolo >, cuyo código HTML es >.
Personalizar los breadbrumbs o migas de pan de forma completa
Para personalizar tus breadcrumbs o migas de pan en WooCommerce de forma completa, sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Cambia los breadcrumbs de WooCommerce
add_filter( 'woocommerce_breadcrumb_defaults', 'mk_cambiar_breadcrumbs' );
function mk_cambiar_breadcrumbs() {
return array(
'delimiter' => ' / ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'before' => '',
'after' => '',
'home' => _x( 'TEXTO QUE QUIERAS', 'breadcrumb', 'woocommerce' ),
);
}Dentro de function mk_cambiar_breadcrumbs indicas a WooCommerce que cambie los breadcrumbs o migas de pan en su totalidad. Así, podrás personalizar tanto el separador, como el código HTML que lo envuelve, el contenido que aparece antes y después y el botón de Inicio.
Eliminar los breadbrumbs o migas de pan
Para eliminar tus breadcrumbs o migas de pan en WooCommerce de forma completa, sólo tienes que añadir el siguiente código en tu plugin de funciones:
// Elimina los breadcrumbs de WooCommerce
add_action( 'init', 'mk_eliminar_breadcrumbs' );
function mk_eliminar_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}Dentro de function mk_eliminar_breadcrumbs indicas a WooCommerce que quites los breadcrumbs o migas de pan en su totalidad.
Como ves, no es necesario instalar ningún plugin para personalizar los breadcrumbs o migas de pan de tu instalación de WooCommerce. Sólo necesitas unas pocas líneas de código en tu plugin de funciones para resolverlo de forma fácil y rápida. Además, haciéndolo así, cada vez aprenderás más sobre WooCommerce y la instalación de tu tienda online.
Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.
Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉
