Cómo y dónde insertar el código de las migas de pan en Woocommerce

Cómo y dónde insertar el código que me proporciona el plugin de SEO by YOAST (la configuración la encontrarás en este post) en el tema de mi tienda online con Woocommerce es quizás la pregunta más importante que te puedes hacer cuando decides usar este plugin para insertar las migas de pan. El código que te proporciona es el siguiente:

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Primero decir que Woocommerce tiene sus propias migas de pan. Y dependiendo de la plantilla aparecen con un estilo más o menos acertado. Así que el primer paso será quitarlas para después poner las de SEO by YOAST

1- Quitar las breadcrumbs que vienen por defecto en Woocommerce

Para ello debes añadir al functions.php el siguiente código. Lo puedes añadir en la penúltima línea antes del “?>” Debes hacer una copia de seguridad del archivo antes de añadirle el código. Y aún mejor sería crearte un tema hijo y trabajar con ese sistema.

add_action( 'init', 'remove_breadcrumbs' );
function remove_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
};

Si tienes un plugin para la cache acuérdate de desactivarlo o puedes seguir viendo las migas aunque se las hayas quitado.

2- El segundo paso sería insertar el código que viene en la configuración del plugin en Woocommerce

¿Dónde? Hay varias opciones, la más sencilla sería ponerlo en el header, pero también os cuento otras posibilidades.

Ponerlo en el Header. Con esto nos aseguramos que sale en todas las páginas de nuestra tienda. Pero, ¿queremos que salga en todas? Pensando un poco en el diseño web yo aconsejaría que no saliera en la portada, por ello os pongo el código rectificado para que no salga allí.

<?php if ( function_exists('yoast_breadcrumb')  &&  !is_front_page() && ! is_home() ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Como se puede ver se le ha agregado al código que viene en el plugin !is_front_page() && ! is_home(). Con este añadido al condicional estamos consiguiendo que no salga ni en la página de inicio ni en la tienda si la tenemos como página de inicio.
Iría colocado al final del header pero dentro del div contenedor.
Está opción puede tener muchos inconvenientes como que el diseño de nuestro header puede verse bastante afectado al incorporarle el texto de las migas. Y deberíamos corregir los estilos por medio de CSS.

La otra opción sería ponerlo solo en las páginas que queramos y fuera del header. Mi propuesta es ponerlo en la página del producto, en el listado de todos los producto, en las categorías de productos y, listado por etiquetas. En estos casos sí que colocaríamos el código que nos proporciona el plugin.

Página del producto. Debemos insertar el código en el archivo content-single-product.php de la carpeta de Woocommerce que está dentro de la carpeta de nuestro theme. Cuidado, no lo coloquéis en el mismo archivo pero de la carpeta Woocommerce del plugin. Si lo hacéis al actualizar el plugin perderéis todo lo que habéis hecho. Si en la carpeta de Woocommerce de tu tema no están estos archivos deberás copiarlos de la carpeta del plugin a esa carpeta y luego insertarles el código. Debéis insertarlo a continuación del código que os muestro:

<?php
	/**
	 * woocommerce_before_single_product hook
	 *
	 * @hooked wc_print_notices - 10
	 */
	 do_action( 'woocommerce_before_single_product' );

	 if ( post_password_required() ) {
	 	echo get_the_password_form();
	 	return;
	 }
?>

Página que lista todos los productos, página de cada categoría y listado por etiquetas. En este caso lo introducimos en el archivo archive-product.php de la misma carpeta que el anterior. Si no está en la carpeta woocommerce de tu tema búscalo en el plugin, cópialo y pégalo en la carpeta del tema. Inserta el código a continuación de:

<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

			<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

		<?php endif; ?>

Si necesitas ayuda no dudes en contactar.

[xyz-ihs snippet=”SuscripcionPost”] [xyz-ihs snippet=”final-post”]

Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.