Você configurou sua loja WooCommerce, mas os compradores não conseguem ver o carrinho no menu. Eles adicionam um produto e depois precisam procurar o link do carrinho antes de poderem finalizar a compra.
Um ícone de carrinho de compras do WooCommerce resolve isso. Ele mostra uma contagem de itens em tempo real que é atualizada conforme os compradores adicionam produtos, diretamente no cabeçalho do seu site, para que o caminho para o checkout esteja sempre a um clique de distância.
Neste guia, mostrarei duas maneiras sem código de adicionar um ícone de carrinho de compras do WooCommerce ao seu menu, como personalizar a aparência e como corrigir um ícone que não aparece.
O que é um Ícone de Carrinho no Menu (e Por Que Ajuda)
Um ícone de carrinho no menu é um pequeno carrinho de compras que fica na sua navegação principal do WooCommerce e mostra o número de itens no carrinho de um comprador. A contagem é atualizada conforme eles adicionam ou removem produtos, e o ícone permanece no menu enquanto eles navegam por diferentes páginas de produtos.
Você provavelmente já viu ícones de carrinho como este ao fazer compras na Amazon:
Adicionar um à sua loja faz duas coisas:
- Mostra aos compradores o que está no carrinho deles: A contagem de itens e o subtotal fornecem um total em andamento antes de chegarem à página de checkout.
- Torna o checkout mais rápido: Um caminho de um clique para o carrinho mantém o processo fluido, para que os visitantes tenham menos probabilidade de abandonar seus carrinhos.
Como Adicionar um Ícone de Carrinho do WooCommerce ao Seu Menu do WordPress (Com Contagem de Itens)
O WooCommerce não inclui um ícone de carrinho de compras para menus por padrão. Você instala um plugin do WooCommerce ou adiciona o código você mesmo.
Aqui estão duas maneiras sem código de fazer isso. A primeira usa o SeedProd para incorporar o ícone ao cabeçalho do seu tema. A segunda usa um plugin gratuito se você não quiser alterar seu tema atual.
Método 1: Adicionar um Ícone de Carrinho do WooCommerce Usando SeedProd (Sem Código)
SeedProd é um construtor de sites de arrastar e soltar para WordPress que permite criar uma loja WooCommerce personalizada sem tocar em código, e seus blocos dedicados ao WooCommerce incluem um Bloco de Carrinho no Menu para adicionar um ícone de carrinho ao seu cabeçalho.
Eu uso o SeedProd para construir meu próprio site, e o bloco Carrinho no Menu é a parte que eu uso aqui porque ele lida com a contagem de itens, subtotal e estilo em um só lugar. Com mais de 300 modelos para começar, você pode ter um cabeçalho pronto em uma tarde.
Siga as etapas abaixo para adicionar um ícone de carrinho de compras do WooCommerce ao seu menu com o SeedProd.
Passo 1. Instale o SeedProd
Primeiro, baixe uma cópia do plugin SeedProd website builder.
Após baixar o SeedProd, instale e ative o plugin no seu site WordPress. Você pode seguir este guia para instalar um plugin do WordPress se precisar de ajuda.
Em seguida, vá para SeedProd » Configurações no menu de administração do WordPress. É aí que você insere sua chave de licença do SeedProd para desbloquear os recursos Pro.
Você pode encontrar sua chave de licença acessando o site da SeedProd e entrando na sua conta. A partir daí, copie sua chave de licença da seção “Downloads”.
Agora cole sua chave no campo de texto e clique no botão Verificar Chave.
Etapa 2. Crie um Novo Tema WooCommerce
Em seguida, vá para a página SeedProd » Theme Builder. É aqui que você cria um tema personalizado para o seu site WooCommerce.
Eu recomendo esta opção porque ela substitui seu tema do WordPress existente por um tema rápido e leve que você pode editar com arrastar e soltar. Ele também fornece o bloco Carrinho do Menu que você precisa para o ícone do carrinho.
Existem duas maneiras de criar um tema com o construtor de temas do SeedProd:
- Tema pré-construído: importe um tema WooCommerce pronto que cria todas as páginas que você precisa para sua loja online.
- Partes individuais do tema: construa cada parte da sua loja WooCommerce uma peça de cada vez.
Usarei o método de tema pré-construído aqui porque ele faz a configuração para você. Clique no botão Temas para ver a lista de kits de temas do WordPress pré-fabricados.
Cada tema é compatível com dispositivos móveis e fácil de editar com o construtor de páginas de arrastar e soltar do SeedProd.
Passe o mouse sobre qualquer tema e clique no ícone de checkmark para importá-lo.
Usarei o tema Loja de Roupas Esportivas para este tutorial.
Após a importação, você verá todos os modelos que compõem o design do seu site WooCommerce. Você pode editar cada um para corresponder à sua loja.
Em seguida, mostrarei como personalizar o modelo “Navegação do Cabeçalho”, onde fica o ícone do carrinho.
Etapa 3. Personalize seu Menu de Navegação WooCommerce
Muitos dos temas pré-fabricados do SeedProd já incluem um ícone de carrinho de compras WooCommerce na barra de navegação. Abra o modelo de navegação do cabeçalho para verificar e ajustá-lo.
Encontre o modelo “Navegação do Cabeçalho” na sua lista de modelos e clique no link Editar Design para abri-lo no construtor visual.
Seu layout de cabeçalho é exibido à direita. À esquerda estão os blocos e seções que você pode adicionar.
Para adicionar um bloco, arraste-o da esquerda e solte-o no seu design.
O cabeçalho já possui três blocos:
- Imagem para o logotipo do site
- Menu de navegação do WordPress
- Bloco Carrinho do Menu
O bloco Carrinho do Menu exibe o ícone do carrinho, a contagem de itens e o subtotal. Clique nele para abrir as configurações do Carrinho do Menu, onde você pode controlar como ele aparece e se comporta.
No painel de configurações, você pode:
- Ocultar o carrinho quando vazio: mostre o ícone apenas quando um comprador adicionar um item.
- Mostrar ou ocultar o subtotal: exiba o total em execução ao lado da contagem, ou apenas a contagem.
- Definir o alinhamento: posicione o carrinho à esquerda, ao centro ou à direita no cabeçalho.
- Ajustar cores, espaçamento e exibição em dispositivos móveis: abra a guia Avançado para alterar a cor do carrinho e do selo, o espaçamento e se o selo é exibido em dispositivos móveis.
Quando estiver satisfeito com a aparência do ícone do carrinho, clique no botão verde Salvar.
Etapa 4. Personalize seu tema WooCommerce
Agora você pode editar os outros modelos no seu tema WooCommerce. O processo é o mesmo do cabeçalho. Se precisar de ajuda, aqui estão alguns guias:
- Como personalizar sua página de loja WooCommerce
- Como personalizar páginas de categoria de produto do WooCommerce
- Como exibir produtos em destaque no WooCommerce
Etapa 5. Ative seu tema SeedProd WooCommerce
Após personalizar seu tema, você está pronto para publicá-lo.
Vá para SeedProd » Theme Builder. No canto superior direito, mude o seletor "Enable SeedProd Theme" para a posição Yes.
Agora visualize seu ícone de carrinho no menu para ver como ele fica em sua loja ativa.
Quando os compradores clicarem no ícone do carrinho, eles irão direto para a página do carrinho. Você também pode personalizar seu carrinho de compras WooCommerce com SeedProd.
Aqui está um exemplo de um ícone de carrinho no menu estilo Amazon que também construímos com SeedProd:
Como Personalizar o Ícone do Carrinho
Um ícone de carrinho padrão funciona, mas a maioria das lojas quer que ele combine com sua identidade visual. Veja o que você pode alterar nas configurações Avançadas do bloco Menu Cart do SeedProd e o que fazer se você estiver usando um tema diferente.
- Mostrar ou ocultar o selo de contagem de itens: o pequeno número no ícone pode permanecer visível o tempo todo ou aparecer apenas quando o carrinho tiver itens.
- Alterar cor e tamanho: combine o ícone e o selo com as cores da sua marca e ajuste o tamanho na aba Avançado.
- Substituir o ícone por outro tema: se você não estiver usando SeedProd, a maioria dos plugins de ícone de carrinho permite que você escolha um ícone diferente ou o substitua por texto como "Carrinho" ou "Cesta" em suas configurações.
Quando configurei isso em minha própria loja, ocultar o selo até que o carrinho tivesse itens manteve o cabeçalho mais limpo sem perder a contagem quando importava.
Método 2: Adicionar um Ícone de Carrinho no Menu do WooCommerce Com um Plugin Gratuito
Se você não quiser alterar seu tema WordPress atual, use um plugin gratuito em vez disso. Ele adiciona um ícone de carrinho ao seu menu existente sem mexer nos arquivos do seu tema.
O plugin que usarei se chama WooCommerce Menu Cart. Ele funciona com WooCommerce, Easy Digital Downloads e muitas outras plataformas de eCommerce WordPress.
Passo 1. Instalar o Plugin WooCommerce Menu Cart
Primeiro, vá para Plugins » Adicionar Novo no seu painel WordPress e digite "WooCommerce Menu Cart" na caixa de pesquisa.
Em seguida, clique no botão Instalar e depois clique em Ativar para tornar o plugin ativo.
Passo 2. Configurar o Ícone do Carrinho de Compras
Após instalar o plugin, vá para WooCommerce » Menu Cart Setup no seu painel de administração do WordPress. Aqui você escolhe sua plataforma de eCommerce e seleciona em qual menu o ícone do carrinho aparecerá.
Configure as opções do seu ícone de carrinho e clique no botão Salvar Alterações.
Agora visite seu site para ver o ícone do seu carrinho de compras WooCommerce no menu.
Por que seu Ícone de Carrinho WooCommerce Não Está Aparecendo
Se você adicionou um ícone de carrinho, mas ele não está aparecendo no seu menu, a causa geralmente é uma de algumas coisas comuns. Resolva isso antes de alterar qualquer outra coisa.
- Seu tema não tem um ícone de carrinho nativo: a maioria dos temas WordPress padrão não adiciona um para o WooCommerce, é por isso que você precisa do SeedProd ou de um plugin em primeiro lugar.
- O carrinho está configurado para ocultar quando vazio: se você ativou "ocultar quando vazio", o ícone só aparece depois que você adiciona um produto ao carrinho. Adicione um item e atualize para verificar.
- O cache está mostrando uma versão antiga: um plugin de cache ou o cache do seu provedor pode estar servindo a página de antes de você adicionar o ícone. Limpe seu cache e recarregue.
- Você está usando um tema de blocos: se o seu tema usa o Editor de Site do WordPress, você pode adicionar um bloco nativo de Carrinho ou Mini-Carrinho diretamente no template do cabeçalho, sem precisar de plugin. Vá para Aparência » Editor, abra o template do seu cabeçalho e adicione o bloco Mini-Carrinho.
Se o ícone ainda não aparecer depois disso, vale a pena verificar se o próprio link do carrinho está funcionando, pois uma página de carrinho quebrada pode impedir a renderização do ícone.
Perguntas Frequentes sobre Ícones de Carrinho do WooCommerce nos Menus
Como adicionar um ícone de carrinho ao menu do WordPress?
Você adiciona um ícone de carrinho com um plugin ou um construtor de sites, pois o WordPress e o WooCommerce não incluem um por padrão. Com o SeedProd, você arrasta o bloco Menu Cart para o seu template de cabeçalho.
Com um plugin gratuito como o WooCommerce Menu Cart, você o instala e escolhe a qual menu o ícone será anexado. Ambos os métodos não exigem código.
Como adicionar o ícone do carrinho ao cabeçalho no WooCommerce?
Adicione o ícone do carrinho ao seu template de cabeçalho, não ao conteúdo da página. No Theme Builder do SeedProd, edite o template "Navegação do Cabeçalho" e adicione o bloco Menu Cart.
Se você usa um tema de blocos, abra o Editor de Site, edite seu template de cabeçalho e adicione o bloco Mini-Carrinho no mesmo local.
Por que meu ícone de carrinho do WooCommerce não está aparecendo no menu?
O motivo mais comum é que o carrinho está configurado para ocultar quando vazio, então ele só aparece depois que um comprador adiciona um item. O cache também pode servir uma versão antiga da página, então limpe seu cache e recarregue.
Se nenhuma das soluções resolver, seu tema pode não suportar um ícone de carrinho nativo, o que significa que você precisa do SeedProd ou de um plugin para adicionar um.
Como mostrar a contagem de itens no ícone do carrinho do WooCommerce?
A contagem de itens é o pequeno distintivo no ícone do carrinho, e a maioria das ferramentas o exibe por padrão. Nas configurações do Menu Cart do SeedProd, a contagem é atualizada automaticamente à medida que os compradores adicionam produtos.
Se você não o vir, abra a aba Avançado e certifique-se de que o distintivo não esteja oculto, inclusive no celular.
Adicione Seu Ícone de Carrinho do WooCommerce Hoje
Um ícone de carrinho com contagem de itens em tempo real oferece aos compradores um caminho claro para o checkout, o que significa mais vendas concluídas para você. Você pode criar um agora mesmo com o construtor de arrastar e soltar do SeedProd, sem necessidade de código.
Comece com o SeedProd e adicione seu ícone de carrinho de compras do WooCommerce em minutos.
Em seguida, você pode querer conferir estes guias para continuar personalizando sua loja WooCommerce:
- Como Personalizar a Aba Informações Adicionais do WooCommerce
- Como Adicionar um Botão Ver Carrinho no WooCommerce
- Como Alterar o Título da Página da Loja no WooCommerce
- Como Criar uma Galeria de Imagens de Produto Deslumbrante no WooCommerce
- Como Adicionar Avaliações por Estrelas às Páginas de Produtos do WooCommerce
- Como Exibir Produtos Relacionados no WooCommerce
- Como Exibir Categorias e Tags de Produtos no WooCommerce
- Como Obter e Exibir Descrições de Produtos no WooCommerce
- Como Ocultar Produtos Fora de Estoque no WooCommerce
Obrigado por ler! Adoraríamos ouvir suas opiniões, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos úteis e conteúdo para expandir seus negócios.
