Deseja adicionar um ícone de carrinho de compras do WooCommerce nas barras de menu?
Adicionar um ícone de carrinho de compras do WooCommerce em seu menu ajuda os compradores a visualizar o carrinho e a finalizar a compra mais rapidamente, especialmente quando ele inclui uma contagem de itens em tempo real. Essa é uma das maneiras mais fáceis de melhorar a experiência de compra e reduzir o abandono do carrinho.
Ao administrar uma loja on-line, é fundamental criar a melhor experiência para o usuário. Se você não estiver atendendo às necessidades dos compradores, eles deixarão seu site em busca de uma alternativa melhor e mais fácil de usar.
Para facilitar as compras em sua loja, você pode adicionar um ícone de carrinho ao menu do WooCommerce com uma contagem de itens. Dessa forma, os clientes podem ver o conteúdo do carrinho e fazer o check-out quando quiserem.
Este artigo mostrará como adicionar um ícone de carrinho de compras do WooCommerce nos menus, passo a passo.
- O que é um ícone de menu de carrinho de compras?
- Por que adicionar o ícone do carrinho de compras do WooCommerce no menu?
- Como adicionar um ícone de carrinho de compras do WooCommerce em seu menu do WordPress (com contagem de itens)
- Perguntas frequentes sobre os ícones de carrinho de compras do WooCommerce nos menus
Você provavelmente já viu ícones de carrinho como esse ao fazer compras na Amazon:
O ícone permanece no menu de navegação mesmo quando você clica em diferentes páginas de produtos.
Por que adicionar o ícone do carrinho de compras do WooCommerce no menu?
A principal vantagem de adicionar ícones de contagem de carrinho ao menu de navegação é que isso ajuda os compradores a ver quantos produtos eles adicionam ao carrinho. Além disso, dá a eles uma ideia de quanto os produtos custarão antes de irem para a página de checkout.
Além disso, os ícones do menu do carrinho de compras 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 suave, tornando mais provável que os visitantes não abandonem seus carrinhos de compras.
Como adicionar um ícone de carrinho de compras do WooCommerce em 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 plug-in do WooCommerce ou codificar essa funcionalidade do zero.
Se escrever código parece assustador, não se preocupe. Aqui estão duas 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 o ícone do carrinho de compras do WooCommerce ao menu usando o SeedProd (sem código)
O primeiro método envolve o uso de um poderoso plug-in do WordPress para personalizar sua loja WooCommerce.
O 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 páginas de destino de alta conversão sem código.
Com mais de 200 modelos predefinidos, é fácil começar. Você pode personalizar qualquer layout com o construtor visual de arrastar e soltar e blocos e seções responsivos.
Os blocos dedicados do WooCommerce são dignos de nota. Eles permitem que você personalize cada parte 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. Instalar o construtor de sites SeedProd
Primeiro, faça o download de uma cópia do plug-in do construtor de sites SeedProd.
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 de que precisamos.
Depois de fazer o download do SeedProd, você precisará instalar e ativar o plug-in em seu site do WordPress. Você pode seguir este guia para instalar um plug-in do WordPress se precisar de ajuda.
Em seguida, vá para SeedProd " Settings (Configurações ) no menu de administração do WordPress. É nesse local que você pode inserir sua chave de licença do SeedProd e desbloquear os recursos do plug-in Pro.
Você pode encontrar sua chave de licença acessando o site da SeedProd e fazendo login em sua conta. A partir daí, copie a chave de licença da seção "Downloads".
Agora, cole sua chave no campo de texto e clique no botão Verify Key (Verificar chave ).
Etapa 2. Criar um novo tema de WooCommerce
A próxima etapa é ir para a página SeedProd " Theme Builder . É aqui que você pode criar um novo tema personalizado para seu site WooCommerce.
Recomendamos essa opção porque ela substituirá seu tema existente do WordPress por um tema rápido e leve que você pode personalizar facilmente com o recurso de arrastar e soltar. Isso também significa que você não precisará criar um tema filho separado nem instalar plug-ins adicionais do WordPress.
Há duas maneiras de criar um tema com o criador de temas do SeedProd:
- Tema pré-criado: importe um tema pronto do WooCommerce que cria automaticamente todas as páginas de que você precisa para sua loja on-line.
- Partes individuais do tema: crie 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 Themes (Temas ) para ver uma lista de temas predefinidos do WordPress e do 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 Sportswear Store para este tutorial.
Depois de 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 "Header nav".
Etapa 3. Personalize o menu de navegação do WooCommerce
Muitos dos temas pré-fabricados da 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 ele funciona.
Localize o modelo "Header nav" em sua lista de modelos e clique no link Edit Design para abri-lo no construtor de páginas visuais.
Você verá o layout do cabeçalho no lado direito ao abrir a página. À esquerda, há blocos e seções que podem ser adicionados ao seu design.
Para adicionar um bloco à sua página, arraste-o da esquerda e solte-o em 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 do carrinho de compras com menu
O bloco Menu Cart 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 Menu Cart à 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 Advanced (Avançado ). Por exemplo, você pode alterar a cor do carrinho e do emblema do carrinho, ajustar o espaçamento e até mesmo ocultar o emblema em dispositivos móveis ou desktop.
Quando estiver satisfeito com a aparência do ícone do carrinho do menu, clique no botão verde Salvar.
Etapa 4. Personalize seu tema WooCommerce
Agora você pode personalizar os outros modelos que compõem o tema do WooCommerce. O processo é semelhante ao da etapa anterior, mas se você precisar de ajuda, aqui estão algumas instruções passo a passo:
- Como personalizar sua página de loja do WooCommerce
- Como personalizar as páginas de categoria de produto do WooCommerce
- Como exibir produtos em destaque no WooCommerce
Etapa 5. Ativar o tema SeedProd WooCommerce
Depois de personalizar o tema do WooCommerce com o SeedProd, você estará pronto para colocá-lo no ar em seu site.
Para fazer isso, vá para SeedProd " Theme Builder. Em seguida, no canto superior direito, alterne a opção "Enable SeedProd Theme" (Ativar tema do SeedProd) para a posição Yes (Sim ).
Agora você pode visualizar o ícone do carrinho do menu para ver como ele fica.
Quando os clientes clicam no ícone do carrinho do menu, eles vão para a página do carrinho de compras. Você também pode personalizar o carrinho de compras do WooCommerce com o SeedProd.
Aqui está um exemplo do carrinho de menu da Amazon que também criamos com o SeedProd:
Método 2: Adicionar o ícone do carrinho de compras do menu WooCommerce com um plug-in gratuito
A seguir, há uma solução que você pode usar se não quiser alterar o tema existente do WordPress. Em vez disso, você pode usar um plug-in gratuito do WooCommerce para adicionar um ícone aos itens do menu de navegação do wp.
O plugin que usaremos é chamado WooCommerce Menu Cart. Ele funciona com o WooCommerce, o Easy Digital Downloads e muitas outras plataformas de comércio eletrônico do WordPress e leva apenas alguns minutos para ser configurado.
Etapa 1. Instalar o plugin de carrinho de menu do WooCommerce
Primeiro, vá para Plugins " Add New no painel do WordPress e digite "WooCommerce Menu Cart" na caixa de pesquisa.
Em seguida, clique no botão Install (Instalar ) e clique em Activate (Ativar ) para ativar o plug-in.
Etapa 2. Configurar o ícone do carrinho de compras do WooCommerce
Depois de instalar o plug-in, vá para WooCommerce " Menu Cart Setup no painel de administração do WordPress. Nessa página, você pode escolher sua plataforma de comércio eletrônico, selecionar um menu para mostrar o ícone do carrinho do woo, escolher um ícone de carrinho e muito mais.
Defina as configurações do ícone do carrinho e clique no botão Save Changes (Salvar alterações ).
Agora você pode visitar seu site e ver o menu de ícones do carrinho de compras do WooCommerce.
Perguntas frequentes sobre os ícones de carrinho de compras do WooCommerce nos menus
Adicionar um ícone de carrinho de compras do WooCommerce ao seu menu facilita o check-out dos visitantes, o que significa mais vendas concluídas para você.
Quer você use o construtor de arrastar e soltar do SeedProd ou um plug-in gratuito, não precisa de código nem de configurações complicadas para fazê-lo funcionar. Bastam alguns cliques e pronto.
Em seguida, talvez você queira dar uma olhada nestes guias para continuar personalizando sua loja WooCommerce:
- Como personalizar a guia Informações adicionais do WooCommerce
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como criar uma impressionante galeria de imagens de produtos no WooCommerce
- Como adicionar classificação 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 corrigir o problema de não funcionamento do WooCommerce View Cart
- Como ocultar produtos fora de estoque no WooCommerce
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
