Você quer adicionar um ícone de carrinho de compras do WooCommerce nas barras de menu?
Adicionar um ícone de carrinho de compras do WooCommerce ao seu menu ajuda os compradores a visualizarem o carrinho e finalizarem a compra mais rapidamente, especialmente quando inclui a contagem de itens em tempo real. É uma das maneiras mais fáceis de melhorar a experiência de compra e reduzir o abandono de carrinho.
Quando você administra uma loja online, criar a melhor experiência de usuário é crucial. Se você não atender às necessidades dos compradores, eles deixarão seu site em busca de uma alternativa melhor e mais amigável.
Para facilitar as compras em sua loja, você pode adicionar um ícone de carrinho ao seu menu do WooCommerce com a contagem de itens. Dessa forma, os compradores podem ver o conteúdo do carrinho e finalizar a compra quando quiserem.
Este artigo mostrará como adicionar um ícone de carrinho de compras do WooCommerce aos menus passo a passo.
Você provavelmente já viu ícones de carrinho como esse ao comprar na Amazon:
O ícone permanece no menu de navegação mesmo quando você clica em diferentes páginas de produtos.
Por que Adicionar um Ícone de Carrinho de Compras do WooCommerce no Menu?
O principal benefício de adicionar ícones de contagem de carrinho ao seu menu de navegação é que ele ajuda os compradores a ver quantos produtos eles adicionaram ao carrinho. Além disso, dá a eles uma ideia de quanto as coisas custarão antes de ir para a página de checkout.
Além disso, os ícones de carrinho de compras no menu oferecem aos usuários uma maneira rápida e fácil de acessar a página do carrinho. Como resultado, o processo de checkout é mais tranquilo, tornando mais provável que os visitantes não abandonem seus carrinhos de compras.
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. Em vez disso, você precisará instalar um plugin do WooCommerce ou codificar essa funcionalidade do zero.
Se escrever código parece assustador, não se preocupe. Aqui estão 2 maneiras super fáceis e sem código de adicionar um ícone de carrinho de compras do WooCommerce ao seu menu.
Método 1: Adicionar Ícone de Carrinho do WooCommerce ao Menu Usando SeedProd (Sem Código)
O primeiro método envolve o uso de um poderoso plugin do WordPress para personalizar sua loja WooCommerce.
SeedProd é o melhor construtor de sites para WordPress, com mais de 1 milhão de usuários. Ele permite que você crie temas personalizados para WordPress, sites WooCommerce e landing pages de alta conversão sem código.
Com mais de 200 modelos pré-fabricados, começar é fácil. Você pode personalizar qualquer layout com o construtor visual de arrastar e soltar e blocos e seções responsivos.
Notáveis são os blocos dedicados do WooCommerce. Eles permitem que você personalize todas as partes do seu site WooCommerce com apenas alguns cliques.
Siga as etapas abaixo para adicionar um ícone de carrinho de compras do WooCommerce aos menus com o SeedProd.
Etapa 1. Instale o SeedProd Website Builder
Primeiro, baixe uma cópia do plugin SeedProd website builder.
Observação: há uma versão gratuita do SeedProd que você pode usar. No entanto, usaremos o plano SeedProd Elite para os recursos do WooCommerce que precisamos.
Após baixar o SeedProd, você precisará instalar e ativar o plugin em 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ê pode inserir sua chave de licença do SeedProd e desbloquear os recursos do seu plugin Pro.
Você pode encontrar sua chave de licença acessando o site do SeedProd e fazendo login na sua conta. A partir daí, copie sua chave de licença na 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
O próximo passo é ir para a página SeedProd » Construtor de Temas . É aqui que você pode criar um novo tema personalizado para o seu site WooCommerce.
Recomendamos esta opção porque ela substituirá seu tema do WordPress existente por um tema rápido e leve que você pode personalizar facilmente com arrastar e soltar. Isso também significa que você não precisará criar um tema filho separado ou instalar plugins extras do WordPress.
Existem 2 maneiras de criar um tema com o construtor de temas do SeedProd:
- Tema pré-construído: importe um tema WooCommerce pronto que cria automaticamente todas as páginas que você precisa para sua loja online.
- Partes individuais do tema: construa as diferentes partes da sua loja WooCommerce individualmente.
Usaremos o método de tema pré-construído para este guia porque ele faz tudo automaticamente para você. Clique no botão Temas para ver uma lista de temas prontos do WordPress e WooCommerce.
Cada tema é 100% 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 marca de seleção para importá-lo para o construtor de temas.
Usaremos o tema Loja de Roupas Esportivas para este tutorial.
Após importar seu tema, você verá todos os modelos que compõem o design do seu site WooCommerce. Você pode personalizar cada modelo individualmente para adaptá-los às necessidades do seu site com o construtor de páginas do SeedProd.
Em seguida, mostraremos como personalizar o modelo “Navegação do Cabeçalho”.
Etapa 3. Personalize seu Menu de Navegação WooCommerce
Muitos dos temas pré-fabricados do SeedProd vêm automaticamente com um ícone de carrinho de compras do WooCommerce na barra de navegação. Vamos abrir o modelo de navegação do cabeçalho para ver como funciona.
Encontre o modelo “Navegação do Cabeçalho” na sua lista de modelos e clique no link Editar Design para abri-lo no construtor de páginas visual.
Você verá o layout do seu cabeçalho no lado direito ao abrir a página. À esquerda estão os blocos e seções que você pode adicionar ao seu design.
Para adicionar um bloco à sua página, arraste-o da esquerda e solte-o no seu design.
Como você pode ver, já existem 3 blocos no cabeçalho:
- Imagem para o logotipo do site
- Menu de navegação do WordPress
- Bloco de carrinho do menu
O bloco Carrinho do Menu exibe um ícone de carrinho, quantos itens estão no carrinho e o subtotal. Você pode alterar a aparência e a funcionalidade no painel de configurações do Carrinho do Menu à esquerda.
Por exemplo, você pode ocultar o carrinho quando ele estiver vazio, mostrar ou ocultar o subtotal e alterar o alinhamento do carrinho.
Você pode encontrar mais configurações clicando na guia Avançado. Por exemplo, você pode alterar a cor do carrinho e do selo do carrinho, ajustar o espaçamento e até ocultar o selo em dispositivos móveis ou de desktop.
Quando estiver satisfeito com a aparência do ícone do carrinho do seu menu, clique no botão verde Salvar.
Etapa 4. Personalize seu tema WooCommerce
Agora você pode personalizar os outros modelos que compõem seu tema WooCommerce. O processo é semelhante à etapa anterior, mas se precisar de ajuda, aqui estão algumas instruções passo a passo:
- 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 o tema WooCommerce do SeedProd
Após personalizar seu tema WooCommerce com o SeedProd, você estará pronto para publicá-lo em seu site.
Para fazer isso, vá para SeedProd » Theme Builder. Em seguida, no canto superior direito, mude o controle deslizante "Ativar Tema SeedProd" para a posição Sim .
Agora você pode visualizar o ícone do carrinho do seu menu para ver como ele fica.
Quando os compradores clicarem no ícone do carrinho do menu, eles irão para a página do carrinho de compras. Você também pode personalizar seu carrinho de compras WooCommerce com o SeedProd.
Aqui está um exemplo do carrinho de menu da Amazon que também fizemos com o SeedProd:
Método 2: Adicione o ícone do carrinho do menu WooCommerce com um plugin gratuito
A seguir, uma solução que você pode usar se não quiser alterar seu tema WordPress existente. Em vez disso, você pode usar um plugin gratuito do WooCommerce para adicionar um ícone aos seus itens de menu de navegação do wp.
O plugin que usaremos é chamado WooCommerce Menu Cart. Ele funciona com WooCommerce, Easy Digital Downloads e muitas outras plataformas de comércio eletrônico WordPress e leva apenas alguns minutos para configurar.
Etapa 1. Instale o plugin WooCommerce Menu Cart
Primeiro, vá para Plugins » Adicionar Novo no seu painel do WordPress e digite "WooCommerce Menu Cart" na caixa de pesquisa.
Em seguida, clique no botão Instalar e clique em Ativar para tornar o plugin ativo.
Etapa 2. Configure o ícone do carrinho de compras WooCommerce
Após instalar o plugin, vá para WooCommerce » Configuração do Menu Carrinho no seu painel de administração do WordPress. Nesta página, você pode escolher sua plataforma de comércio eletrônico, selecionar um menu para mostrar seu ícone de carrinho woo, escolher um ícone de carrinho e muito mais.
Configure as configurações do seu ícone de carrinho e clique no botão Salvar Alterações .
Agora você pode visitar seu site e ver o menu do ícone do carrinho de compras do WooCommerce.
Perguntas Frequentes sobre Ícones de Carrinho do WooCommerce nos Menus
Adicionar um ícone de carrinho de compras do WooCommerce ao seu menu facilita o checkout para os visitantes, o que significa mais vendas concluídas para você.
Quer você use o construtor de arrastar e soltar do SeedProd ou um plugin gratuito, você não precisa de código ou configurações complicadas para fazê-lo funcionar. Apenas alguns cliques e pronto.
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 o 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 Produtos Deslumbrante no WooCommerce
- Como Adicionar Avaliação por Estrelas às Páginas de Produto 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 Corrigir o Erro de Carrinho de Compras do WooCommerce Não Funciona
- Como Ocultar Produtos Fora de Estoque no WooCommerce
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
