Deseja saber como adicionar o botão visualizar carrinho no WooCommerce?
Um botão de visualização do carrinho permite que os clientes em potencial vejam todos os itens no carrinho de compras e entrem rapidamente na página de checkout. Por sua vez, ele pode aumentar as taxas de conversão ao eliminar etapas desnecessárias no processo de checkout.
Neste guia, mostraremos passo a passo como adicionar um botão de visualização do carrinho no WooCommerce.
Por que adicionar um botão Exibir carrinho no WooCommerce?
Adicionar um botão de visualização do carrinho a uma loja WooCommerce é uma excelente maneira de os proprietários de lojas melhorarem a experiência do usuário. É mais fácil para os clientes visualizarem seus itens, fazerem alterações e finalizarem a compra. Isso pode levar a um aumento nas vendas e na satisfação do cliente.
Os botões Exibir carrinho também são eficazes na redução do abandono do carrinho de compras. De acordo com um estudo do Baymard Institute, 69,57% dos carrinhos de compras on-line são abandonados.
Um dos motivos mais comuns para o abandono do carrinho é o fato de os clientes esquecerem o que está em seu carrinho. Um botão de visualização do carrinho pode ajudar a reduzir o abandono do carrinho, facilitando para os clientes o controle de seus itens.
Por fim, adicionar um botão de visualização do carrinho de compras à sua loja on-line é uma maneira simples de melhorar a experiência do cliente e aumentar as vendas.
Por que usar o SeedProd para personalizar o WooCommerce?
Há muitas maneiras de adicionar um ícone de carrinho ao seu site WordPress. Você pode usar o código personalizado para personalizar os botões padrão do WooCommerce ou um plugin alternativo do WooCommerce.
Para este guia, usaremos o SeedProd, um dos melhores criadores de páginas de arrastar e soltar para WordPress. Mas o que torna o SeedProd uma excelente opção para personalizar o WooCommerce?
Bem, aqui está o ponto alto. Com o SeedProd, você pode personalizar todo o seu site de WooCommerce sem tocar em uma única linha de código HTML, CSS ou PHP. Em vez de contratar um desenvolvedor ou adicionar você mesmo trechos de código e códigos de acesso personalizados, você pode criar seu site de comércio eletrônico ideal visualmente com o recurso de arrastar e soltar.
O SeedProd vem com centenas de modelos pré-fabricados, incluindo temas do WooCommerce. Isso significa que você pode escolher um deles e configurar sua loja com apenas alguns cliques.
A partir daí, você pode personalizar as páginas de produtos, a vitrine da loja, a página do carrinho, o botão comprar agora e tudo o mais sem código. Você não precisará nem instalar um tema filho para fazer as alterações.
Como adicionar um botão Exibir carrinho no WooCommerce com o SeedProd
Além de ajudá-lo a configurar uma loja on-line de forma rápida e fácil, o SeedProd permite que você adicione um botão de visualização do carrinho de compras praticamente em qualquer lugar que desejar. Para saber como fazer isso, siga as etapas simples abaixo.
- Etapa 1. Instalar e ativar o SeedProd
- Etapa 2. Escolha um kit de site WooCommerce
- Etapa 3. Adicionar um botão Exibir carrinho na página de produto do WooCommerce
- Etapa 4. Adicionar um botão Exibir carrinho na página da loja do WooCommerce
- Etapa 5. Adicionar um botão Exibir carrinho no menu WooCommerce
- Etapa 6. Publique as alterações em seu site de WooCommerce
Etapa 1. Instalar e ativar o SeedProd
Primeiro, você precisará instalar e ativar o SeedProd Elite em seu site WordPress.
O plano Elite lhe dá acesso aos recursos de personalização do WooCommerce do SeedProd, ao construtor de temas, ao suporte ao Easy Digital Downloads e ao mapeamento de domínios.
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 plug-in, navegue até SeedProd " Theme Builder em seu painel do WordPress.
Você precisará criar um tema personalizado do WooCommerce para adicionar um carrinho de exibição e um botão personalizado de adicionar ao carrinho do WooCommerce. Mas não se preocupe; isso é 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 da SeedProd. Clique na guia WooCommerce para ver todos os kits projetados para lojas de comércio eletrônico.
Navegue pelos designs até encontrar um que lhe agrade, 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 modelos que compõem seu tema do WordPress em uma lista.
Você pode personalizar qualquer um desses modelos clicando no link Edit Design. Isso abrirá o modelo no construtor de páginas visuais do SeedProd, onde você poderá adaptar o design pré-fabricado às necessidades de sua loja.
Para obter instruções completas de personalização passo a passo, consulte nosso guia definitivo sobre como configurar uma loja on-line no WordPress. Ele explica como usar o construtor de páginas de arrastar e soltar, personalizar elementos de modelo e adicionar novos elementos de design a cada página.
Quando estiver familiarizado com o funcionamento do construtor do SeedProd, você poderá passar para a próxima etapa, que mostra como adicionar um botão de visualização do carrinho às páginas do produto.
Etapa 3. Adicionar um botão Exibir carrinho na página de produto do WooCommerce
Para adicionar um botão "view cart" (ver carrinho) às suas páginas de produtos, você precisará abrir o modelo de página de produto único no painel do Theme Builder. Depois de encontrá-lo, passe o mouse sobre o modelo e clique no link Edit Design (Editar design ).
Quando esse modelo for aberto, você verá uma página com detalhes de produtos individuais em sua loja. Dependendo do tema escolhido, ele mostrará a descrição do produto, informações variáveis sobre o produto, fotos do produto, preços e um botão "adicionar ao carrinho".
Para adicionar um botão Exibir carrinho, você precisará arrastar o bloco Botão da barra lateral esquerda.
Em seguida, você pode clicar nesse 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 de botão personalizado.
Vamos alterar o texto do botão para "View Cart" e definir o alinhamento à esquerda.
Você também pode expandir a guia "Icon" (Ícone) e escolher um ícone de carrinho na biblioteca de ícones da font awesome.
Agora, você precisará vincular o botão à página do carrinho de compras. Para fazer isso, cole o URL da página do carrinho no campo de texto "Link".
Se você quiser adicionar mais opções de estilo ao botão Exibir carrinho, clique na guia Advanced (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 nesse painel.
Continue personalizando o botão até ficar satisfeito com sua aparência.
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 em sua visualização e clique no ícone Salvar.
Isso abrirá uma janela na qual você poderá dar um nome ao botão e salvá-lo em seus blocos salvos. Depois de salvá-lo, você poderá reutilizá-lo sem precisar construí-lo do zero novamente.
Antes de sair desta página, clique no botão Save (Salvar ) no canto superior direito para salvar suas alterações.
Agora, você pode voltar ao painel do construtor de temas e continuar a personalizar sua loja on-line.
Etapa 4. Adicionar um botão Exibir carrinho na página da loja do WooCommerce
Sua página de loja do WooCommerce é outra área em que você pode adicionar um botão de visualização do carrinho. Para isso, você precisará clicar no link Edit Design no modelo da página da loja.
Quando estiver dentro do construtor de páginas para essa página, role para baixo até a seção Blocos salvos e procure o botão personalizado Exibir carrinho que você criou na etapa anterior.
Agora, arraste esse bloco para onde quiser em sua página da loja. Neste exemplo, nós o adicionamos à parte superior da página, mas você pode colocá-lo onde quiser.
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 do plano de fundo ou aumentar o tamanho do botão para que ele se destaque mais.
Lembre-se de clicar no botão Salvar antes de sair da página.
Etapa 5. Adicionar um botão Exibir carrinho no menu WooCommerce
Outro local que faz sentido para adicionar um botão de visualização do carrinho é o menu do WooCommerce. Como os clientes 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 criador de temas do SeedProd, você precisará localizar o modelo de cabeçalho e clicar no link Edit Design para personalizá-lo.
Em vez de adicionar o botão Exibir 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 Cart.
Esse bloco exibirá um ícone e estimará o valor total do carrinho do comprador. Ao clicar nele, o comprador irá instantaneamente para o carrinho de compras, onde poderá finalizar a compra ou fazer alterações.
Depois de arrastar esse botão para o cabeçalho, você poderá personalizá-lo da mesma forma que 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 guia Advanced (Avançado), você pode ajustar outras opções de estilo, incluindo cores de emblemas, animações, espaçamento e muito mais.
Quando a aparência estiver como você deseja, clique no botão Save (Salvar ) e saia do construtor de páginas.
Etapa 6. Publique as alterações em seu site de WooCommerce
A etapa final deste guia é tornar seu tema personalizado do WooCommerce ativo. No painel do construtor de temas, localize o cabeçalho intitulado "Enable SeedProd Theme" (Ativar tema SeedProd) e clique no botão de alternância para colocá-lo na posição Yes (Sim ).
Pronto! Sua loja personalizada está ativa e os clientes podem ver o botão Exibir carrinho no menu, na página da loja e na 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.
Esperamos que este guia tenha ajudado você a aprender como adicionar um botão de visualização de carrinho no WooCommerce. Se precisar de ainda mais inspiração, confira os seguintes tutoriais úteis sobre o WooCommerce:
- Como alterar o título da página da loja no WooCommerce
- How to Customize the WooCommerce Additional Information Tab
- Como adicionar classificação por estrelas às páginas de produtos do WooCommerce
- Como corrigir o problema de não funcionamento do WooCommerce View Cart
- Como criar um site de um produto no WooCommerce
- How to Display Related Products in WooCommerce
- Como criar uma página de agradecimento personalizada do WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- How to Display Featured Products in WooCommerce
- How to Hide Out of Stock Products in WooCommerce
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
