Resumo: Como Adicionar um Botão Ver Carrinho no WooCommerce
O WooCommerce inclui um link básico de “Ver Carrinho” por padrão. Para um botão persistente e totalmente personalizado em qualquer lugar da sua loja, use o SeedProd Elite.
- Verifique o padrão – O WooCommerce adiciona um link “Ver Carrinho” à sua notificação de adicionar ao carrinho automaticamente.
- Instale o SeedProd Elite – habilita o construtor de temas do WooCommerce.
- Escolha um kit WooCommerce – importe um tema de loja pré-construído com um clique.
- Adicione o botão – arraste o bloco Botão para a sua página de produto, página da loja ou cabeçalho, e então vincule-o ao URL do seu carrinho.
- Publique seu tema – ative o SeedProd no painel do construtor de temas para publicar.
Dica Profissional: Salve seu botão personalizado como um Bloco Salvo no SeedProd para reutilizá-lo em páginas sem reconstruí-lo.
Você quer saber como adicionar um botão de ver carrinho no WooCommerce?
Um botão de ver carrinho permite que potenciais clientes vejam todos os itens em seu carrinho de compras e entrem rapidamente na sua página de checkout. Por sua vez, isso pode aumentar as taxas de conversão, eliminando etapas desnecessárias no processo de checkout.
Neste guia, mostrarei como adicionar um botão de ver carrinho no WooCommerce passo a passo. Usarei o SeedProd, um construtor visual de sites para WordPress que permite personalizar sua loja WooCommerce sem tocar em código.
Por que Adicionar um Botão Ver Carrinho no WooCommerce?
Adicionar um botão de ver carrinho a uma loja WooCommerce é uma excelente maneira para os proprietários de lojas melhorarem a experiência do usuário. É mais fácil para os clientes verem seus itens, fazerem alterações e finalizarem a compra. Isso pode levar a um aumento nas vendas e na satisfação do cliente.
Botões de ver carrinho também são eficazes para reduzir o abandono de carrinho de compras. De acordo com um estudo do Baymard Institute, 69,57% dos carrinhos de compras online são abandonados.
Um dos motivos mais comuns para o abandono de carrinho é que os clientes esquecem o que está em seu carrinho. Um botão de ver carrinho pode ajudar a reduzir o abandono de carrinho, facilitando para os clientes acompanharem seus itens.
Em última análise, adicionar um botão de ver carrinho à sua loja online é uma maneira simples de melhorar a experiência do cliente e aumentar as vendas.
O Método Padrão do WooCommerce
O WooCommerce já inclui um link básico de “Ver Carrinho”. Quando um comprador adiciona um item ao seu carrinho, o WooCommerce exibe uma notificação de adicionar ao carrinho com um link “Ver Carrinho” dentro dela. Muitos proprietários de lojas já têm isso e não percebem.
A notificação padrão aparece automaticamente, então você pode já ter um link de ver carrinho sem fazer nada. Dito isso, ele é pequeno e desaparece após alguns segundos. Compradores que não prestam muita atenção podem facilmente perdê-lo.
Se você deseja um botão de ver carrinho persistente que permaneça visível em suas páginas de produto, página da loja e menu, você precisa de uma configuração mais flexível. É isso que as etapas abaixo cobrem.
Como Adicionar um Botão Ver Carrinho no WooCommerce com SeedProd
Além de ajudar você a configurar uma loja online de forma rápida e fácil, o SeedProd permite adicionar um botão de ver carrinho em praticamente qualquer lugar que você desejar. Para saber como fazer isso, siga os passos fáceis abaixo.
- Passo 1. Instale e Ative o SeedProd
- Etapa 2. Escolha um Kit de Site WooCommerce
- Etapa 3. Adicione um Botão Ver Carrinho na Página de Produto WooCommerce
- Etapa 4. Adicione um Botão Ver Carrinho na Página da Loja WooCommerce
- Etapa 5. Adicione um Botão Ver Carrinho no Menu WooCommerce
- Etapa 6. Publique as Alterações do Seu Site WooCommerce
Passo 1. Instale e Ative o SeedProd
Primeiro, você precisará instalar e ativar o SeedProd Elite em seu site WordPress.
O plano Elite dá acesso aos recursos de personalização WooCommerce do SeedProd, construtor de temas, suporte ao Easy Digital Downloads e mapeamento de domínio.
Para obter ajuda na configuração, consulte nossa documentação sobre como instalar o SeedProd.
Etapa 2. Escolha um Kit de Site WooCommerce
Após ativar o plugin, navegue até SeedProd » Theme Builder no seu painel do WordPress.
Você precisará construir um tema WooCommerce personalizado para adicionar um botão de ver carrinho e um botão personalizado de adicionar ao carrinho do WooCommerce. Mas não se preocupe; é simples e leva apenas alguns minutos.
Na página Theme Builder, clique no botão Theme Template Kits.
Na próxima tela, você verá os kits de sites pré-fabricados do SeedProd. Clique na aba WooCommerce para ver todos os kits projetados para lojas de e-commerce.
Navegue pelos designs até encontrar um que você goste, passe o mouse sobre ele e clique no ícone de marca de seleção.
Em alguns segundos, o SeedProd adicionará o tema ao seu site. Como no exemplo abaixo, você verá todos os templates que compõem seu tema WordPress em uma lista.
Você pode personalizar qualquer um desses templates clicando no link Editar Design. Fazer isso abrirá o template no construtor visual de páginas do SeedProd, onde você pode adaptar o design pré-fabricado às necessidades da sua loja.
Para instruções completas de personalização passo a passo, consulte nosso guia definitivo sobre como configurar uma loja online no WordPress. Ele explica como usar o construtor de páginas de arrastar e soltar, personalizar elementos do template e adicionar novos elementos de design a cada página.
Assim que você se familiarizar com o funcionamento do construtor do SeedProd, poderá passar para a próxima etapa, que mostra como adicionar um botão de ver carrinho às suas páginas de produto.
Etapa 3. Adicione um Botão Ver Carrinho na Página de Produto WooCommerce
Para adicionar um botão de ver carrinho às suas páginas de produto, você precisará abrir o template da página de produto único no painel do Theme Builder. Após encontrá-lo, passe o mouse sobre o template e clique no link Editar Design.
Quando este template abrir, você verá uma página com os detalhes dos produtos individuais em sua loja. Dependendo do tema escolhido, ele mostrará sua descrição do produto, informações de produtos variáveis, fotos do produto, preços e um botão adicionar ao carrinho.
Para adicionar um botão de ver carrinho, você precisará arrastar o bloco Botão da barra lateral esquerda.
Você pode então clicar neste bloco para abrir suas opções de personalização. Aqui, você pode alterar o texto do botão, ajustar o alinhamento e adicionar um link personalizado para o botão.
Vamos alterar o texto do botão para “Ver Carrinho” e definir o alinhamento para a esquerda.
Você também pode expandir a aba “Ícone” e escolher um ícone de carrinho da biblioteca de ícones do Font Awesome.
Agora, você precisará vincular o botão à sua página do carrinho de compras. Para fazer isso, cole o URL da sua página de carrinho no campo de texto “Link”.
Se você quiser adicionar mais opções de estilo ao seu botão de ver carrinho, clique na aba Avançado nas configurações do bloco.
Você pode alterar a fonte do texto do botão do carrinho, a cor do botão, o raio da borda, o espaçamento e muito mais neste painel.
Continue personalizando o botão até ficar satisfeito com a aparência dele.
Agora, mostraremos um truque para economizar tempo caso você queira adicionar o mesmo botão a outras áreas do site. Passe o mouse sobre o botão na sua pré-visualização e clique no ícone de Salvar.
Isso abrirá uma janela onde você pode dar um nome ao botão e salvá-lo em seus Blocos Salvos. Após salvá-lo, você poderá reutilizá-lo sem precisar criá-lo do zero novamente.
Antes de sair desta página, clique no botão Salvar no canto superior direito para salvar suas alterações.
Agora, você pode sair de volta para o painel do construtor de temas e continuar personalizando sua loja online.
Etapa 4. Adicione um Botão Ver Carrinho na Página da Loja WooCommerce
Sua página da loja WooCommerce é outra área onde você pode adicionar um botão de ver carrinho. Para isso, você precisará clicar no link Editar Design em seu modelo de página da loja.
Uma vez dentro do construtor de páginas para esta página, role para baixo até a seção Blocos Salvos e procure pelo botão personalizado de ver carrinho que você criou na etapa anterior.
Agora arraste este bloco para onde você quiser em sua página da loja. Neste exemplo, nós o adicionamos ao topo da página, mas você pode colocá-lo em qualquer lugar que desejar.
Como antes, você pode abrir as configurações do bloco para personalizá-lo para essa página específica. Por exemplo, você pode alterar a cor de fundo ou aumentar o botão para que ele se destaque mais.
Lembre-se de clicar no botão Salvar antes de sair da página.
Etapa 5. Adicione um Botão Ver Carrinho no Menu WooCommerce
Outro lugar que faz sentido para adicionar um botão de ver carrinho é o seu menu WooCommerce. Como os compradores usam o menu para navegar em sua loja, adicionar um botão aqui facilitará a localização da página do carrinho.
No painel do construtor de temas do SeedProd, você precisará encontrar seu modelo de cabeçalho e clicar no link Editar Design para personalizá-lo.
Em vez de adicionar o botão de ver carrinho que você criou anteriormente, você pode usar um dos blocos pré-fabricados do SeedProd.
Dentro do painel WooCommerce Template Tags no lado esquerdo, você encontrará um bloco chamado Menu Carrinho.
Este bloco exibirá um ícone e estimará o valor total do carrinho do comprador. Quando eles clicarem nele, eles irão instantaneamente para o carrinho de compras, onde poderão finalizar a compra ou fazer alterações.
Depois de arrastar este botão para o seu cabeçalho, você pode personalizá-lo como qualquer outro bloco do SeedProd.
Você pode alterar o alinhamento do botão, ocultá-lo se não houver nada no carrinho e mostrar ou ocultar o subtotal do carrinho.
Na aba avançada, você pode ajustar mais opções de estilo, incluindo cores do selo, animações, espaçamento e muito mais.
Quando estiver do jeito que você quer, clique no botão Salvar e saia do construtor de páginas.
Etapa 6. Publique as Alterações do Seu Site WooCommerce
A etapa final deste guia é colocar seu tema WooCommerce personalizado no ar. No painel do construtor de temas, encontre o título "Ativar Tema SeedProd" e clique no botão de alternância para movê-lo para a posição Sim.
É isso! Sua loja personalizada está no ar e os compradores podem ver o botão ver carrinho no seu menu, página da loja e página do produto.
Aqui estão alguns exemplos das alterações que fizemos hoje. Clique em qualquer imagem para abri-la em uma nova janela e dar uma olhada mais de perto.
Se o seu botão ver carrinho não aparecer após seguir estas etapas, consulte Como Corrigir o Botão Ver Carrinho do WooCommerce Não Funcionando para causas e correções comuns.
Perguntas Frequentes sobre Como Adicionar um Botão Ver Carrinho no WooCommerce
- Como Alterar o Título da Página da Loja no WooCommerce
- Como Personalizar a Aba de Informações Adicionais do WooCommerce
- Como Adicionar Avaliação por Estrelas às Páginas de Produto do WooCommerce
- Como Corrigir o Erro de Carrinho de Compras do WooCommerce Não Funciona
- Como Criar um Site de Um Produto no WooCommerce
- Como Exibir Produtos Relacionados no WooCommerce
- Como Criar uma Página de Agradecimento Personalizada no WooCommerce
- Como Exibir Categorias e Tags de Produtos no WooCommerce
- Como exibir produtos em destaque no WooCommerce
- 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.
