Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir migas de pan en WooCommerce (Guía para principiantes)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Estás buscando una manera fácil de añadir migas de pan a tu tienda WooCommerce?

Las migas de pan ayudan a sus clientes a navegar más fácilmente por su sitio web. También ayudan a los motores de búsqueda a entender la estructura y jerarquía del contenido de su sitio y a mostrarlas en los resultados de búsqueda.

En este artículo, le mostraremos cómo añadir migas de pan en WooCommerce utilizando métodos muy sencillos.

Add WooCommerce Breadcrumbs

¿Por qué añadir migas de pan en WooCommerce?

Las migas de pan son enlaces de navegación que aparecen en la parte superior de las páginas de productos o entradas de blog. Estos enlaces muestran a los visitantes cómo han llegado a la página que están viendo.

Por ejemplo, si tienes una tienda WooCommerce que vende ropa, entonces el menú de migas de pan podría ser algo como esto: Inicio ” Moda Masculina ” Camisas y Polos ” Camisas Formales.

WooCommerce Breadcrumbs example

Activar las migas de pan en WooCommerce hace que sea más fácil para sus clientes navegar por su tienda en línea y encontrar los productos que están buscando. Pueden hacer clic fácilmente en los atributos del producto o en las categorías para ver los productos relacionados.

Las migas de pan también ayudan a los motores de búsqueda a entender la jerarquía y la estructura de los enlaces de su tienda de comercio electrónico. Los motores de búsqueda como Google incluso las muestran en los resultados de búsqueda, lo que puede aumentar su tasa de clics.

Dicho esto, vamos a ver cómo puedes activar las migas de pan en tu tienda WooCommerce. Cubriremos dos métodos, y el primero es el recomendado para la mayoría de los usuarios:

La forma más sencilla de activar las migas de pan en WooCommerce es utilizando el plugin All in One SEO (AIOSEO).

Es el mejor plugin SEO para WordPress del mercado y te permite añadir migas de pan en WooCommerce con solo hacer clic. El plugin también te ayuda a optimizar tu tienda para los motores de búsqueda sin necesidad de conocimientos técnicos.

Para este tutorial, utilizaremos la versión AIOSEO Pro porque incluye plantillas de migas de pan y ofrece más opciones de personalización.

También existe una versión gratuita que incluye migas de pan pero no ofrece plantillas de migas de pan.

En primer lugar, tendrá que instalar y activar el plugin AIOSEO en su sitio web. Puedes consultar nuestra guía para más detalles sobre cómo instalar un plugin de WordPress.

Una vez activado, tendrá que ir a All in One SEO ” Ajustes generales e introducir su clave de licencia. Puede encontrar la clave en el área de la cuenta de AIOSEO.

All in One SEO license

A continuación, tendrás que establecer AIOSEO en tu tienda WooCommerce utilizando su asistente de configuración. Si necesitas ayuda, puedes seguir nuestra guía sobre cómo establecer All in One SEO para WordPress.

Una vez que haya configurado correctamente el plugin en su sitio web, deberá ir a la página All in One SEO ” Ajustes generales y, a continuación, hacer clic en la pestaña “Migas de pan”.

Enable breadcrumbs display in All in One SEO

Después de eso, puede activar la opción “Activar migas de pan”, y AIOSEO añadirá automáticamente el marcado del esquema de migas de pan al código de su tienda WooCommerce.

A continuación, tendrá que elegir cómo desea mostrar las migas de pan. Simplemente desplázate hacia abajo y verás las diferentes formas de añadir migas de pan a tu tienda online.

Puede añadirlas a cualquier página o entrada manualmente mediante un shortcode o bloque, o añadirlas a un área de widget. Los usuarios avanzados también pueden utilizar código PHP para añadir migas de pan a los archivos de plantilla de su tema.

A continuación le mostraremos cómo añadir migas de pan a sus productos de WooCommerce, pero antes, echemos un vistazo a las opciones de personalización.

Breadcrumb display options

Ahora, si se desplaza hacia abajo hasta la sección de Ajustes de migas de pan, verá múltiples ajustes para personalizar sus migas de pan.

Por ejemplo, puedes cambiar el símbolo separador, activar el enlace de página de inicio, añadir un prefijo de migas de pan, cambiar el formato y mucho más. Incluso puedes ver una vista previa de cómo aparecen tus enlaces de navegación en tu tienda WooCommerce.

Breadcrumb settings

AIOSEO Pro también le da acceso a plantillas de migas de pan.

Estas plantillas le permiten enlazar en su sitio web migas de pan de aspecto profesional para distintos tipos de contenido, taxonomías y archivos.

AIOSEO Breadcrumb Templates

No solo eso, sino que el plugin de WordPress también ofrece diferentes opciones para personalizar la plantilla.

Por ejemplo, puede desactivar la opción “Utilizar una plantilla por defecto” y ver más ajustes.

Customize product breadcrumb template

Hay opciones para mostrar el enlace de la página de inicio, el enlace del archivo de tipo de entradas, el enlace de taxonomía, añadir etiquetas a la plantilla y seleccionar si desea dar prioridad a las categorías o a la taxonomía de etiquetas.

Si ha establecido categorías superiores para varios productos, también puede personalizarlas en el editor de plantillas de migas de pan.

Cuando hayas terminado, no olvides guardar los cambios.

A continuación, tendrá que añadir migas de pan a las páginas de productos de WooCommerce.

AIOSEO mostrará cuatro métodos diferentes, pero la forma más fácil es mediante el uso de un shortcode para mostrar las migas de pan enlaces de navegación en su tienda online.

Use a shortcode to add breadcrumbs

Todo lo que tienes que hacer es añadir el siguiente shortcode donde quieras mostrar las migas de pan:

[aioseo_breadcrumbs]

Simplemente dirígete a Productos ” Todos los productos y edita una página de producto. A continuación, puede añadir el shortcode en la vista “Texto” del editor de WordPress y actualizar su página.

Add shortcode in product page

Ahora puede visitar la página de su producto para ver cómo se enlazan las migas de pan.

Este es el aspecto que tenía en nuestro sitio web de prueba.

Breadcrumbs example

Además, también puedes añadir migas de pan a la barra lateral de tu tienda WooCommerce. De esta manera, no tendrás que editar cada página de producto individual para mostrar los enlaces de navegación, ya que aparecerán en todo el sitio en la barra lateral.

Para mostrar las migas de pan en la barra lateral, puede dirigirse a Apariencia ” Widgets desde su área de administrador de WordPress.

Haga clic en el icono del signo más de la parte superior izquierda y busque “migas de pan” para encontrar el widget “AIOSEO – Migas de pan”. Simplemente arrástrelo y suéltelo en la barra lateral. También puede introducir un título para sus enlaces de navegación.

AIOSEO Breadcrumbs widget

Una vez hecho esto, puedes hacer clic en el botón “Guardar”.

A continuación, sólo tienes que ver tu tienda WooCommerce para ver las migas de pan en la barra lateral.

WooCommerce Sidebar Breadcrumbs

Si quieres utilizar otras extensiones para añadir migas de pan a tu tienda WooCommerce, entonces comprueba nuestra guía sobre cómo mostrar enlaces de navegación con migas de pan en WordPress.

Cómo añadir migas de pan para varias categorías

¿Tienes productos en tu tienda WooCommerce que tienen varias categorías?

En caso afirmativo, establecer las migas de pan correctamente puede ser un reto porque WordPress no registra la ruta que siguió un cliente para llegar a la página de producto.

Sin embargo, AIOSEO añade automáticamente la primera categoría en las migas de pan y facilita mostrar el menú de navegación correcto para los productos que tienen varias categorías.

El plugin también ofrece una plantilla de migas de pan que puede personalizar para las taxonomías de WordPress como las categorías de productos. Todo lo que tienes que hacer es dirigirte a All in One SEO ” Ajustes Generales y luego seleccionar la pestaña ‘Migas de pan’.

A continuación, desplázate hasta la sección “Plantillas de migas de pan” y selecciona la pestaña Taxonomías. Por defecto, el plugin mostrará el enlace del elemento / artículo padre en las migas de pan de tu tienda WooCommerce.

Show parent category in breadcrumbs

Si desactiva la opción “Utilizar una plantilla por defecto”, verá que se activa la opción “Mostrar enlace de elemento / artículo principal”. De este modo, podrá mostrar fácilmente la categoría principal de cualquier producto de su sitio web.

Por ejemplo, supongamos que tiene una tienda de zapatos en línea y uno de los productos pertenece a las categorías Zapatillas y Zapatillas de deporte.

Product has multiple categories

AIOSEO elegirá automáticamente la primera categoría.

A continuación, se mostrará en el menú de navegación de migas de pan.

Multiple category breadcrumb preview

Método 2: Añadir migas de pan usando WooCommerce Breadcrumbs Plugin

Otra forma de activar las migas de pan en WooCommerce es usando el plugin WooCommerce Breadcrumbs.

Es un plugin gratuito para WordPress que te permite añadir migas de pan a tu tienda online. El plugin es fácil de usar pero carece de las características de personalización que encontrarás en AIOSEO.

En primer lugar, tendrás que instalar y activar el plugin WooCommerce Breadcrumbs. Para más detalles, puedes consultar nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, puede dirigirse a Ajustes ” WC Breadcrumbs desde su área de administrador de WordPress. A continuación, haga clic en la casilla de verificación “Activar migas de pan”.

Enable WooCommerce Breadcrumbs

A continuación, puedes cambiar la apariencia de los enlaces de navegación que aparecerán en tu tienda WooCommerce.

El plugin de WooCommerce te permite elegir el símbolo separador de migas de pan y las etiquetas HTML antes y después de tus migas de pan.

Si se desplaza hacia abajo, encontrará más opciones de personalización. Por ejemplo, puedes cambiar el texto y la URL de tu página de inicio que aparecerá en los enlaces de navegación.

More WooCommerce Breadcrumbs settings

Cuando hayas terminado con los cambios, no olvides hacer clic en el botón “Guardar cambios” de la parte inferior.

Guías de expertos en WordPress y WooCommerce Navegación

Ahora que ya sabes cómo añadir migas de pan en WooCommerce, quizás te interese ver otras guías relacionadas con la navegación en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir migas de pan en WooCommerce. Puede que también quieras ver nuestra guía sobre cuánto cuesta crear un sitio web o nuestra selección experta de los mejores servicios de alojamiento gestionado.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

1 comentarioDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.