Como adicionar Breadcrumbs no WooCommerce (guia para iniciantes)

Você já vagou por uma loja enorme, perdendo a noção de onde começou e como voltar ao corredor principal? Navegar em uma grande loja on-line pode ser a mesma coisa.

Breadcrumbs são pequenas trilhas de navegação que mostram o caminho que você percorreu em um site, como sinais úteis que orientam os compradores em sua loja WooCommerce.

Elas não apenas facilitam a localização dos clientes, mas também proporcionam aos mecanismos de pesquisa uma melhor compreensão da estrutura do seu site, o que pode aumentar o SEO.

A boa notícia é que adicionar breadcrumbs à sua loja WooCommerce é surpreendentemente simples. Neste artigo, mostraremos alguns métodos fáceis para colocar essas úteis trilhas de navegação em funcionamento no seu site em pouco tempo.

Por que você deve adicionar Breadcrumbs no WooCommerce?

Breadcrumbs são links de navegação que aparecem na parte superior das páginas de seus produtos ou postagens de blog. Esses links mostram aos visitantes como eles chegaram à página que estão visualizando no momento.

Por exemplo, se você tiver uma loja WooCommerce que vende roupas, o menu de navegação poderá ter a seguinte aparência: Home ” Moda masculina ” Camisas e polos ” Camisas formais.

A ativação de breadcrumbs no WooCommerce facilita a navegação de seus clientes em sua loja on-line e a localização dos produtos que estão procurando. Eles podem clicar facilmente nos atributos ou categorias do produto para visualizar os produtos relacionados.

Os Breadcrumbs também ajudam os mecanismos de pesquisa a entender a hierarquia e a estrutura dos links em sua loja de comércio eletrônico. Mecanismos de pesquisa como o Google até os exibem nos resultados de pesquisa, o que pode aumentar sua taxa de cliques.

Dito isso, vamos ver como você pode ativar a migalha de pão em sua loja WooCommerce. Abordaremos dois métodos, sendo que o primeiro é recomendado para a maioria dos usuários:

Método 1: adicionar Breadcrumbs no WooCommerce usando o AIOSEO (recomendado)

A maneira mais fácil de ativar os breadcrumbs no WooCommerce é usar o plug-in All in One SEO (AIOSEO).

É o melhor plugin de SEO para WordPress do mercado e permite adicionar breadcrumbs no WooCommerce com o clique de um botão. O plugin também ajuda a otimizar sua loja para os mecanismos de pesquisa sem nenhuma habilidade técnica.

Para este tutorial, usaremos a versão AIOSEO Pro porque ela inclui modelos de breadcrumbs e oferece mais opções de personalização.

Há também uma versão gratuita disponível que inclui breadcrumbs, mas não oferece modelos de breadcrumb.

Primeiro, você precisará instalar e ativar o plug-in AIOSEO em seu site. Você pode consultar nosso guia para obter mais detalhes sobre como instalar um plug-in do WordPress.

Após a ativação, você precisará navegar até All in One SEO ” General Settings e inserir sua chave de licença. Você pode encontrar a chave na área da conta do AIOSEO.

Em seguida, você precisará configurar o AIOSEO em sua loja WooCommerce usando o assistente de configuração. Se precisar de ajuda, você pode seguir nosso guia sobre como configurar o All in One SEO para WordPress.

Depois de configurar corretamente o plug-in em seu site, você precisará ir para a página All in One SEO ” General Settings (Configurações gerais ) e clicar na guia “Breadcrumbs” (Migalhas de pão).

Depois disso, você pode ativar a opção “Enable Breadcrumbs”, e o AIOSEO adicionará automaticamente a marcação do esquema de breadcrumbs ao código da sua loja WooCommerce.

Em seguida, você precisará escolher como deseja exibir os breadcrumbs. Basta rolar a tela para baixo e você verá as diferentes maneiras de adicionar breadcrumbs à sua loja on-line.

Você pode adicioná-los a qualquer página ou publicação manualmente usando um shortcode ou bloco, ou adicioná-los a uma área de widget. Os usuários avançados também podem usar o código PHP para adicionar breadcrumbs aos arquivos de modelo do tema.

Mostraremos a seguir como adicionar breadcrumbs aos seus produtos do WooCommerce, mas primeiro vamos dar uma olhada nas opções de personalização.

Agora, se você rolar para baixo até a seção Breadcrumbs Settings (Configurações de breadcrumbs), verá várias configurações para personalizar os breadcrumbs.

Por exemplo, você pode alterar o símbolo de separação, ativar o link da página inicial, adicionar um prefixo de migalhas de pão, alterar o formato e muito mais. Você pode até mesmo ver uma prévia de como seus links de navegação aparecem em sua loja WooCommerce.

O AIOSEO Pro também lhe dá acesso a modelos de breadcrumb.

Esses modelos permitem que você mostre links de navegação com aparência profissional em seu site para diferentes tipos de conteúdo, taxonomias e arquivos.

Além disso, o plug-in do WordPress também oferece diferentes opções para personalizar o modelo.

Por exemplo, você pode desativar a opção “Usar um modelo padrão” e visualizar mais configurações.

Há opções para mostrar o link da página inicial, o link do arquivo do tipo de postagem, o link da taxonomia, adicionar tags ao modelo e selecionar se você deseja priorizar a taxonomia de categorias ou tags.

Se você tiver categorias pai configuradas para vários produtos, também poderá personalizá-las no editor de modelos de migalhas de pão.

Quando terminar, não se esqueça de salvar suas alterações.

Em seguida, você precisará adicionar breadcrumbs às suas páginas de produtos do WooCommerce.

O AIOSEO mostrará quatro métodos diferentes, mas a maneira mais fácil é usar um shortcode para exibir os links de navegação de migalhas de pão em sua loja on-line.

Tudo o que você precisa fazer é adicionar o seguinte shortcode no local em que deseja exibir as migalhas de pão:

[aioseo_breadcrumbs]

Basta acessar Products ” All Products e editar uma página de produto. Em seguida, você pode adicionar o shortcode na visualização “Texto” do editor do WordPress e atualizar sua página.

Agora você pode visitar a página do seu produto para ver os links de navegação do breadcrumb em ação.

Esta é a aparência em nosso site de teste.

Além disso, você também pode adicionar breadcrumbs à barra lateral da sua loja WooCommerce. Dessa forma, você não precisará editar cada página de produto individual para exibir links de navegação, pois eles aparecerão em todo o site na barra lateral.

Para exibir breadcrumbs na barra lateral, você pode ir para Appearance ” Widgets na área de administração do WordPress.

Clique no ícone de sinal de mais no canto superior esquerdo e, em seguida, pesquise “breadcrumbs” para encontrar o widget “AIOSEO – Breadcrumbs”. Basta arrastá-lo e soltá-lo na barra lateral. Você também pode inserir um título para seus links de navegação.

Depois de fazer isso, você pode clicar no botão “Salvar”.

Em seguida, basta visualizar sua loja WooCommerce para ver os breadcrumbs na barra lateral.

Se você quiser usar outras maneiras de adicionar breadcrumbs à sua loja WooCommerce, confira nosso guia sobre como exibir links de navegação breadcrumb no WordPress.

Como adicionar Breadcrumbs para várias categorias

Você tem produtos em sua loja WooCommerce que têm várias categorias?

Se sim, a configuração correta dos breadcrumbs pode ser um desafio, pois o WordPress não registra o caminho que o cliente percorreu para chegar à página do produto.

No entanto, o AIOSEO adiciona automaticamente a primeira categoria no breadcrumb e facilita a exibição do menu de navegação correto para produtos que têm várias categorias.

O plug-in também oferece um modelo de migalhas de pão que você pode personalizar para taxonomias do WordPress, como categorias de produtos. Tudo o que você precisa fazer é acessar All in One SEO ” General Settings e selecionar a guia “Breadcrumbs”.

Em seguida, role para baixo até a seção “Breadcrumbs Templates” e selecione a guia Taxonomies (Taxonomias). Por padrão, o plug-in mostrará o link do item principal na lista de navegação em sua loja WooCommerce.

Se você desativar a opção “Usar um modelo padrão”, verá que a opção “Mostrar link do item pai” está ativada. Dessa forma, você pode mostrar facilmente a categoria principal de qualquer produto em seu site.

Por exemplo, digamos que você esteja administrando uma loja on-line de calçados e um dos produtos esteja nas categorias Tênis e Sapatilhas.

O AIOSEO escolherá automaticamente a primeira categoria.

Em seguida, ele exibirá isso no menu de navegação do breadcrumb.

Método 2: Adicionar Breadcrumbs usando o plug-in Breadcrumbs do WooCommerce

Outra maneira de ativar a migalha de pão no WooCommerce é usar o plug-in WooCommerce Breadcrumbs.

É um plug-in gratuito do WordPress que permite adicionar migalhas de pão à sua loja on-line. O plugin é fácil de usar, mas não tem os recursos de personalização que você encontrará no AIOSEO.

Primeiro, você precisará instalar e ativar o plug-in WooCommerce Breadcrumbs. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Quando o plug-in estiver ativo, você poderá acessar Configurações ” WC Breadcrumbs na área de administração do WordPress. Depois disso, clique na caixa de seleção “Enable breadcrumbs” (Ativar migalhas de pão).

Em seguida, você pode alterar a aparência dos links de navegação que aparecerão em sua loja WooCommerce.

O plug-in WooCommerce permite que você escolha o símbolo separador de breadcrumbs e as tags HTML antes e depois dos breadcrumbs.

Agora, se você rolar a tela para baixo, encontrará mais opções de personalização. Por exemplo, você pode alterar o texto e o URL da sua página inicial que aparecerá nos links de navegação.

Quando terminar de fazer as alterações, não se esqueça de clicar no botão “Save Changes” (Salvar alterações) na parte inferior.

Guias especializados sobre navegação no WordPress e no WooCommerce

Esperamos que este artigo tenha ajudado você a aprender como adicionar breadcrumbs no WooCommerce. Talvez você também queira ver alguns outros guias relacionados à navegação no WordPress e no WooCommerce:

• Glossário: Migalhas de pão
• Como exibir links de navegação Breadcrumb no WordPress
• Como fazer uma busca inteligente de produtos no WooCommerce
• Como adicionar navegação pelo teclado com a tecla de seta no WordPress
• Como adicionar um menu de navegação no WordPress (guia para iniciantes)
• Como adicionar menus de navegação personalizados em temas do WordPress
• Como adicionar itens personalizados a menus específicos do WordPress
• Como criar um menu suspenso no WordPress (guia para iniciantes)
• Como mostrar menus diferentes para usuários conectados no WordPress
• Como estilizar os menus de navegação do WordPress

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.