Precisa personalizar sua página de carrinho do WooCommerce?
O layout padrão do carrinho do WooCommerce muitas vezes parece desajeitado e faz pouco para incentivar os clientes a concluir a compra. Uma página de carrinho bem projetada pode melhorar a experiência do usuário, reduzir o abandono de carrinho e aumentar suas vendas.
Neste tutorial, mostrarei passo a passo como personalizar sua página de carrinho do WooCommerce sem escrever uma única linha de código. Usaremos o SeedProd, o construtor de páginas de arrastar e soltar em que confio para criar páginas de WooCommerce de alta conversão em minutos.
Passos rápidos para personalizar sua página de carrinho do WooCommerce:
Por que Criar uma Página de Carrinho Personalizada do WooCommerce?
Você sabia que quase 70% dos clientes abandonam seus carrinhos de compras antes de concluir o checkout? O abandono de carrinho de compras custa às lojas online bilhões em vendas perdidas todos os anos.
Ao dedicar tempo para personalizar o layout da sua página de carrinho do WooCommerce, você pode corrigir muitos dos motivos pelos quais os clientes saem. Um design melhor pode gerar confiança, destacar ofertas importantes e guiar os compradores para o botão de checkout em vez do botão de voltar.
Quando você edita sua página de carrinho do WooCommerce para melhorar a experiência do usuário, você está aproveitando ao máximo o tráfego que já tem. Mesmo pequenas melhorias podem reduzir drasticamente as taxas de abandono e aumentar a receita sem gastar mais em anúncios.
Aqui estão algumas maneiras de otimizar seu carrinho do WooCommerce para conversões:
- Ofereça frete grátis ou mostre o quão perto os clientes estão de se qualificar para ele
- Aplique descontos automáticos ou exiba campos de código de cupom claramente
- Torne os totais do carrinho fáceis de ler e entender
- Adicione sinais de confiança como depoimentos, avaliações ou selos de segurança
- Use um botão de atualização de carrinho e certifique-se de que ele seja fácil de encontrar no celular
No geral, um design de página de carrinho personalizado do WooCommerce ajuda os clientes a se sentirem confiantes ao finalizar a compra e, finalmente, impulsiona mais vendas para sua loja.
Então, como você personaliza as páginas de carrinho do WooCommerce? Vamos lá e descubra.
Como Personalizar a Página de Carrinho do WooCommerce
Muitas pessoas usam plugins de carrinho de compras para otimizar as páginas de carrinho no WooCommerce. Mas achamos que a maneira mais fácil de personalizar seu carrinho é com um construtor de páginas de arrastar e soltar como o SeedProd.
SeedProd é o melhor construtor de páginas do WordPress com suporte para sites WooCommerce. Você pode usar este plugin para criar uma página de carrinho WooCommerce personalizada sem escrever código.
O SeedProd oferece mais de 150 modelos de página de destino totalmente responsivos para começar rapidamente. E com o editor visual, você pode personalizar sua página e ver as alterações em tempo real.
Além disso, com dezenas de blocos e seções, você pode fazer sua página de carrinho ficar exatamente como deseja sem contratar um desenvolvedor.
Atualização: Agora você pode criar um tema WooCommerce personalizado com o SeedProd, permitindo que você crie qualquer página WooCommerce facilmente sem código.
Com isso em mente, siga estas etapas para criar uma página de carrinho WooCommerce personalizada com SeedProd.
Passo 1. Instale e Ative o SeedProd
O primeiro passo é baixar uma cópia do plugin de página de destino do WordPress SeedProd SeedProd.
Em seguida, instale e ative o plugin em seu site WordPress. Para obter ajuda com esta etapa, consulte este guia detalhado sobre como instalar um plugin do WordPress.
Observação: existe uma versão gratuita do SeedProd que você pode usar. Mas, para este tutorial, usaremos a versão Elite pelo suporte integrado ao WooCommerce que precisamos.
Após ativar o SeedProd em seu site WordPress, vá para SeedProd » Configurações e insira sua chave de licença do produto.
Você pode encontrar sua chave de licença do SeedProd no painel da sua conta no site do SeedProd.
Passo 2. Crie um Novo Modelo de Página de Carrinho do WooCommerce
Após ativar sua chave de licença, vá para SeedProd » Páginas e clique no botão ‘Adicionar Nova Página de Destino’ para criar sua página de carrinho.
A partir daí, você pode escolher um modelo de página de carrinho para usar como estrutura para seu design.
O SeedProd oferece centenas de modelos compatíveis com dispositivos móveis para várias indústrias, muitos dos quais você pode usar como modelos do WooCommerce. Portanto, quando encontrar um modelo de que goste, passe o cursor sobre ele e clique no ícone de ‘Checkmark’ para iniciá-lo.
Para este guia, usaremos o ‘Modelo em Branco’. Este modelo permite que você comece do zero e adicione apenas as seções e blocos que desejar.
Após escolher seu modelo, um pop-up se abre para adicionar um nome e URL à sua página. Em seguida, você pode clicar no botão ‘Salvar e Começar a Editar a Página’ para abrir o modelo no editor visual do SeedProd.
Etapa 3. Personalize o Layout e o Design da Página de Carrinho
O construtor de páginas de arrastar e soltar do SeedProd tem um layout distinto de 2 colunas que o torna fácil de usar:
- À esquerda estão os blocos e seções para personalizar seu design
- À direita está uma visualização ao vivo da sua página
Adicionar conteúdo à sua página de carrinho é tão simples quanto arrastar um bloco da esquerda para sua visualização à direita.
Vamos ver alguns dos elementos essenciais que você pode incluir em sua página de carrinho WooCommerce.
Adicionando um Logo
Para adicionar um logotipo à sua página de carrinho, escolha um layout de seção que abrigará os elementos da sua página, como a seção padrão.
Em seguida, escolha o bloco ‘Imagem’ e arraste-o para sua nova seção à direita.
Clicar no bloco de imagem abre o painel de configurações de conteúdo, onde você pode carregar um logotipo do seu computador ou da biblioteca de mídia do WordPress.
A partir daí, você pode adicionar um link de volta para sua página inicial, redimensionar seu logotipo e alterar o alinhamento.
Adicionando um Carrinho WooCommerce
Agora vamos adicionar seu carrinho de compras WooCommerce ao design. Para fazer isso, adicione uma nova seção ao seu design e escolha o layout de barra lateral de conteúdo.
Este layout permite que você adicione seu carrinho à coluna maior e deixa espaço na coluna menor para avaliações, depoimentos e outras informações importantes.
Para adicionar seu carrinho WooCommerce à página, role para baixo até a seção de blocos WooCommerce e arraste o bloco ‘Carrinho’ para sua nova seção.
Clicar no ícone de configurações do carrinho mostra um painel com configurações de personalização de cores, fontes e tamanhos para:
- Cabeçalhos
- Botões
- Campos
- Alerta
- Carrinho
Por exemplo, alteramos as cores dos botões para se alinharem melhor com a marca e o logotipo da nossa loja.
Adicionando Avaliações e Depoimentos
Lembra-se daquela segunda coluna? Para este guia, usaremos essa coluna para exibir depoimentos de clientes e avaliações com estrelas.
Prova social como essa pode incentivar compradores prestes a finalizar a compra a concluir a venda. Afinal, avaliações positivas de clientes reais são muito mais convincentes do que confiar apenas na palavra da marca.
Para adicionar depoimentos à sua página de carrinho do WooCommerce, encontre o bloco Testimonials (Depoimentos) na seção de blocos 'Avançados' e arraste-o para a sua coluna estreita à direita.
E como todos os blocos do SeedProd, clicar nele exibe as configurações para personalizar o conteúdo do seu depoimento. Por exemplo, você pode adicionar uma foto personalizada, nome do cliente, alterar o alinhamento e até adicionar várias avaliações em um carrossel de depoimentos.
Para tornar suas avaliações ainda mais convincentes, você pode arrastar o bloco Star Rating (Avaliação com Estrelas) e colocá-lo sob o seu carrossel de depoimentos.
Adicionando Escassez e Urgência
Uma das melhores maneiras de atrair potenciais clientes para o seu checkout do WooCommerce é criar um senso de urgência. Assim, se os compradores não agirem agora, eles podem perder uma oferta imperdível.
A maneira mais fácil de adicionar escassez à sua página de carrinho do WooCommerce é com um temporizador de escassez ou relógio de contagem regressiva. E o SeedProd tem essa opção integrada.
Tudo o que você precisa fazer é selecionar o bloco 'Countdown Timer' (Temporizador de Contagem Regressiva) na seção de blocos 'Avançados' e arrastá-lo para o topo do seu carrinho. Em seguida, selecione a opção 'Visitor Timer' (Temporizador do Visitante) para que o temporizador seja atualizado para cada visitante.
Em seguida, na aba de configurações Avançadas, você pode personalizar as cores para combinar com o restante do seu carrinho.
Agora vamos adicionar um título informando às pessoas que elas têm um tempo definido até que o carrinho expire. Para fazer isso, arraste o bloco 'Headline' (Título) e insira seu texto.
Cross-selling de Produtos WooCommerce
Sua página de carrinho do WooCommerce é um excelente lugar para promover e recomendar outros produtos ou serviços. Dessa forma, você pode capturar compradores antes de finalizarem a compra com produtos relevantes que eles possam gostar.
E a boa notícia é que o SeedProd oferece várias grades de produtos diferentes que permitem exibir produtos em qualquer página. Você pode encontrá-los acessando a seção de blocos 'WooCommerce' e escolhendo entre:
- Produtos recentes
- Produtos em promoção
- Produtos mais vendidos
- Produtos em destaque
- Produtos mais bem avaliados
Por exemplo, você pode arrastar o bloco 'Sale Products' (Produtos em Promoção) e adicioná-lo logo abaixo do seu carrinho do WooCommerce. Dessa forma, os compradores têm a chance de adicioná-los aos seus carrinhos antes de finalizar a compra.
Etapa 4. Publique e Vincule sua Nova Página de Carrinho
Após fazer alterações na sua página de carrinho, é hora de publicá-la e torná-la ativa em sua loja WooCommerce. Para fazer isso, clique na seta suspensa ao lado do botão verde Salvar e selecione Publicar.
Em seguida, a tarefa final é ajustar o URL do seu carrinho nas configurações do plugin WooCommerce. Portanto, navegue até WooCommerce » Configurações e clique na aba Avançado.
Em seguida, ao lado do título ‘Página do Carrinho’, selecione a nova página de carrinho que você criou com o SeedProd. Lembre-se de clicar no botão Salvar Alterações na parte inferior da tela.
Agora, quando os compradores clicarem no link “Ver Carrinho” em seu site, eles verão sua nova página de carrinho personalizada do WooCommerce.
Perguntas Frequentes Sobre a Personalização da Página do Carrinho do WooCommerce
Personalizar sua página de carrinho do WooCommerce é uma das maneiras mais rápidas de reduzir o abandono de carrinho e aumentar as vendas. Ao melhorar o layout, adicionar sinais de confiança e remover atritos, você pode transformar mais compradores em clientes pagantes.
Com o SeedProd, você pode editar o design da sua página de carrinho do WooCommerce sem tocar em uma única linha de código. Seu construtor de arrastar e soltar facilita a criação de uma página de carrinho totalmente personalizada e otimizada para conversões.
Se você deseja rastrear as conversões do seu carrinho do WooCommerce, consulte nossa postagem sobre como configurar o rastreamento de conversões do WooCommerce e este guia sobre como corrigir o problema de visualização do carrinho do WooCommerce não funcionar.
Obrigado por ler. Por favor, siga-nos no YouTube, Twitter e Facebook para mais conteúdo útil para fazer seu negócio crescer, se você gostou deste artigo.
