Personaliza el breadcrumb de WooCommerce
WooCommerce es uno de los plugins más famosos que hay para crear tiendas online en WordPress. Una de sus ventajas es la gran facilidad para hacer modificaciones. En esta ocasión aprenderemos a personalizar el breadcrumb de WooComerce con estas sencillas líneas de código.
Te entiendo, acabas de crear tu tienda con la dupla WordPress y WooCommerce y estás orgulloso de ello, no dices que estás «orgullosísimo» porque aún hay algo que no te acaba de convencer, el breadcrumb o las migas de pan.
Tal como viene por defecto el breadcrumb de Woocomerce no está mal, es aceptable, pero tú, que al igual que nosotros, huyes de lo ya prediseñado y te gusta la originalidad, vas más allá y no te conformas, te propones personalizarlo según tu gusto y según el diseño de tu web.
Para ello tan solo necesitarás abrir el fichero functions.php de tu plantilla e insertar alguno de estos filtros.
Cambiar el texto «Home» del breadcrumb de WooCommerce
Es muy probable que el primer elemento de la lista del breadcrumb sea la palabra «Home» o «Inicio». Pero ¿y si tu tienda es una zapatería? Pues cámbiale el nombre por «Zapatos» con el siguiente código:
add_filter('woocommerce_breadcrumb_defaults', 'endeos_editar_home_breadcrumb');
function endeos_editar_home_breadcrumb($defaults) {
$defaults['home'] = 'Zapatos';
return $defaults;
}
Obviamente puedes poner cualquier otra palabra que prefieras.
Editar el separador de las migas de pan
Es muy posible que no te guste el típico símbolo » \ » que usa WooCommerce para separar cada uno de los elementos que forman el breadcrumb.
Vamos a cambiarlo por un «>» con este filtro:
add_filter('woocommerce_breadcrumb_defaults', 'endeos_separador_breadcrumb');
function endeos_separador_breadcrumb($defaults) {
$defaults['delimiter'] = ' > ';
return $defaults;
}
También puedes dejar un espacio en blanco y editar el separador vía CSS.
Cambiar la url del botón «Inicio»
En alguna ocasión puede resultar útil especificar al primer elemento del breadcrumb una url diferente a la que hay por defecto, por ejemplo, en lugar de ir a el inicio de la web, tal vez te interesa que vaya al inicio de la tienda.
add_filter( 'woocommerce_breadcrumb_home_url', 'endeos_breadrumb_home_url' );
function endeos_breadrumb_home_url() {
return 'http://miweb.com/tienda';
}
Personaliza el breadcrumb de WooCommerce como un Pro
Si lo que realmente quieres personalizar el breadcrumb de WooCommerce en su totalidad, este filtro es el que necesitas, podrás personalizar el delimitador, el html que lo envuelve, el contenido de antes y después, así como el botón de inicio.
add_filter( 'woocommerce_breadcrumb_defaults', 'endeos_woocommerce_breadcrumb' );
function endeos_woocommerce_breadcrumb() {
return array(
'delimiter' => '> ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'before' => '',
'after' => '',
'home' => _x( 'Zapatos', 'breadcrumb', 'woocommerce' ),
);
}
Eliminar el breadcrumb de WooCommerce
¡Qué me dices! ¿Que lo que quieres es cargarte el breadcrumb? Bien pensado, también es una manera de personalizarlo. Entonces este es el filtro que buscas para hacerlo desaparecer.
function endeos_eliminar_breadcrumb_woocommerce() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
Ya ves que hablamos mucho de tiendas online, las soluciones ecommerce son cada vez mejores. Así que no pierdas la oportunidad, aprovéchate del auge en el que están, infórmate y contacta con nosotros para conseguir la tuya.
