Como Personalizar a Página de Checkout do WooCommerce (Do Jeito Fácil)

Durante nossos anos otimizando lojas WooCommerce, notamos que a página de checkout é frequentemente o ponto decisivo para as vendas.

É onde os clientes concluem a compra ou abandonam o carrinho – e pequenas melhorias aqui podem levar a aumentos significativos de receita.

Tendo ajudado inúmeros proprietários de lojas, entendemos a importância de ter uma página de checkout que atenda perfeitamente às necessidades do seu negócio.

Se você deseja simplificar o processo, adicionar campos personalizados ou reorganizar o layout, existem maneiras fáceis de conseguir isso.

Neste guia, compartilharemos instruções passo a passo para personalizar sua página de checkout WooCommerce. Estas são técnicas comprovadas que testamos extensivamente, projetadas para ajudá-lo a criar uma melhor experiência de checkout, mantendo a confiabilidade de sua loja.

Por que personalizar a página de checkout WooCommerce no WordPress?

Estudos mostram que os clientes abandonam entre 70-85% de todos os carrinhos de compras. Em outras palavras, a maioria dos clientes deixará sua página de checkout sem gastar dinheiro.

Com isso em mente, você vai querer fazer tudo o que puder para convencer os clientes a concluir a compra.

O problema é que o checkout integrado do WooCommerce não é otimizado para vendas.

Ao substituir este design padrão por uma página de checkout WooCommerce personalizada, você pode frequentemente melhorar suas taxas de conversão e obter mais dinheiro.

Por exemplo, você pode adicionar prova social à página de checkout, como avaliações de clientes e classificações de cinco estrelas. Isso pode encorajar as pessoas a confiarem no seu negócio, mesmo que ainda não tenham comprado de você antes.

Você também pode exibir produtos relacionados que os compradores costumam adquirir juntos e otimizar o layout para tornar o processo de checkout o mais fácil possível.

Na imagem a seguir, você pode ver um exemplo de uma página de checkout otimizada retirada do site AIOSEO.

Dito isso, vamos dar uma olhada em como você pode personalizar facilmente sua página de checkout do WooCommerce e ganhar mais dinheiro com sua loja online.

Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar.

• Método 1. Personalize sua página de checkout do WooCommerce usando o FunnelKit Builder
• Método 2. Personalize sua página de checkout usando o SeedProd
• Bônus: Como reduzir o abandono da página de checkout

Método 1. Personalize sua página de checkout do WooCommerce usando o FunnelKit Builder

A maneira mais fácil de criar uma página de checkout personalizada do WooCommerce é usando o FunnelKit Builder. Este plugin vem com modelos e formulários de checkout prontos.

Ele também possui 'otimizações' integradas projetadas para ajudá-lo a obter mais vendas. Testamos completamente o plugin e descobrimos que ele é muito amigável para iniciantes.

A primeira coisa que você precisa fazer é instalar e ativar o plugin. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Escolha um Modelo Projetado Profissionalmente

Após a ativação, vá para FunnelKit » Store Checkout. Nesta tela, clique no botão ‘Create Store Checkout’.

Agora você pode escolher entre qualquer um dos modelos de página de checkout projetados profissionalmente pelo FunnelKit ou selecionar ‘Start from scratch.’ Recomendamos o uso de um modelo para ajudá-lo a criar uma página de checkout de alta conversão rapidamente.

Para dar uma olhada mais de perto em qualquer modelo, basta passar o mouse sobre ele e clicar no botão ‘Visualizar’ quando ele aparecer.

Em nossas imagens, estamos usando o modelo Hific, que tem uma seção onde você pode falar sobre o que oferece e uma seção onde pode mostrar depoimentos de clientes.

Quando encontrar um modelo que deseja usar, clique em ‘Importar Este Funil’.

Neste momento, o FunnelKit pode solicitar que você instale alguns plugins extras, como o plugin SlingBlocks para o editor de blocos.

Se você vir esta mensagem, clique em ‘Ativar’ para obter os plugins que você precisa.

Depois disso, você pode digitar um nome para a página de checkout da loja. Isso é apenas para sua referência, então você pode usar qualquer coisa que ajude a identificar a página no painel do WordPress.

Com isso feito, clique no botão ‘Adicionar’.

Na próxima tela, você verá todas as etapas incluídas neste modelo. Você pode desbloquear etapas extras atualizando para o FunnelKit Pro.

Como você está usando a versão gratuita do FunnelKit, o modelo inclui uma página de Checkout e uma página de agradecimento personalizada do WooCommerce.

Crie um Design de Checkout Personalizado

Para prosseguir e personalizar a página de checkout, clique no link ‘Editar’ dela.

Agora você pode clicar em ‘Editar Modelo’ para abrir o modelo no editor de blocos do WordPress.

Observação: Se você estiver usando um plugin de construtor de páginas, o FunnelKit poderá abrir o modelo em um editor diferente. Se isso acontecer, você precisará clicar em ‘Alternar para o editor do WordPress’ em vez de ‘Editar Modelo’.

Agora você pode personalizar o modelo exatamente da mesma forma que cria qualquer página do WordPress. Simplesmente clique em qualquer bloco e, em seguida, ajuste-o usando as configurações no menu do lado direito e a barra de ferramentas mini.

Por exemplo, você normalmente vai querer substituir o logotipo de espaço reservado pelo seu próprio logotipo personalizado. Para fazer isso, clique para selecionar o bloco de Imagem e, em seguida, selecione ‘Substituir’ na barra de ferramentas mini.

Agora, selecione Abrir Biblioteca de Mídia e escolha uma imagem da biblioteca de mídia do WordPress, ou clique em ‘Upload’ e selecione um arquivo do seu computador.

Após escolher uma imagem, você pode adicionar texto alternativo à imagem, alterar a largura e até adicionar cantos arredondados usando as configurações no menu à direita.

Você também vai querer substituir o texto de espaço reservado por informações sobre o seu próprio marketplace online e depoimentos de clientes. Simplesmente clique em qualquer bloco de texto para torná-lo editável, da mesma forma que você trabalha com texto no editor de blocos padrão do WordPress.

Com isso feito, você pode estilizar o texto usando as configurações no menu à direita. Por exemplo, você pode usar bordas e sombras de caixa para fazer o texto se destacar, alterar a família da fonte ou alterar a cor do texto no WordPress.

Simplesmente repita essas etapas para personalizar todos os blocos padrão no modelo FunnelKit Builder. Você também pode adicionar mais blocos clicando no ícone de '+' ou excluir quaisquer blocos que não precise.

A maioria desses blocos deve ser familiar, mas o FunnelKit vem com alguns blocos personalizados. Como você está usando um modelo de checkout, o design já terá um bloco FunnelKit Checkout, então clique para selecionar este bloco.

No menu à direita, você verá uma lista de todas as diferentes seções no bloco de Checkout, como Cabeçalho do Formulário, Cupom e Gateways de Pagamento.

Simplesmente clique para expandir cada seção e, em seguida, faça suas alterações.

Normalmente, se a seção tiver um título, subtítulo ou rótulo de botão, você pode alterá-lo digitando o novo texto.

Algumas seções são opcionais, portanto, você pode ativá-las e desativá-las usando um interruptor.

Por exemplo, você pode querer adicionar um resumo de pedido recolhível para que o comprador possa ver todos os itens em seu carrinho.

Você pode adicionar mais campos ao formulário de checkout ou remover aqueles que não precisa. Por exemplo, se você estiver usando o WooCommerce para vender downloads digitais, normalmente não precisará coletar nenhuma informação de envio.

Personalizar o Formulário de Checkout

Quando estiver satisfeito com a aparência da página de checkout, é hora de dar uma olhada mais detalhada nos campos do formulário e fazer as alterações necessárias.

Para fazer isso, clique em 'Atualizar' para salvar suas alterações e, em seguida, selecione 'Voltar para a página de checkout'.

Agora, clique na aba 'Campos' para ver todas as diferentes seções e campos que compõem o formulário de checkout.

Você pode reordenar esses campos usando arrastar e soltar.

Para adicionar mais campos, basta arrastá-los da seção do lado direito e soltá-los em seu formulário.

Você também pode organizar esses campos em seções clicando no botão ‘Adicionar Seção’.

No pop-up que aparece, basta digitar um nome para a seção. Como os clientes verão isso, é uma boa ideia adicionar um título descritivo e útil.

Com isso feito, clique em ‘Adicionar’.

Agora você pode adicionar campos à seção usando arrastar e soltar.

Deseja remover um campo do formulário de checkout? Então, basta passar o mouse sobre o campo e clicar no ícone vermelho ‘x’ quando ele aparecer.

Para personalizar qualquer um dos campos do FunnelKit, basta clicar nesse campo.

As configurações que você vê podem variar dependendo do campo, mas você pode alterar seu rótulo, adicionar um valor de placeholder ou tornar o campo obrigatório marcando a caixa ‘Obrigatório’.

Quando estiver satisfeito com a configuração dos campos de checkout, não se esqueça de clicar em ‘Salvar Alterações’ para armazenar suas configurações.

Obtenha Mais Vendas com Otimizações do FunnelKit

Para obter mais vendas, é uma boa ideia habilitar algumas das otimizações do FunnelKit clicando na aba ‘Otimizações’.

Aqui, você verá todas as diferentes otimizações que podem tornar o processo de checkout mais fácil.

O plugin gratuito FunnelKit vem com botões de checkout expresso para todos os melhores gateways de pagamento WooCommerce. Isso permite que os compradores cliquem em seu botão de checkout expresso preferido e paguem usando uma conta existente, semelhante a um botão comprar agora.

Como o cliente não precisa preencher o formulário de checkout, isso pode reduzir as taxas de abandono de carrinho e ajudá-lo a obter mais vendas.

Para configurar o checkout expresso, selecione ‘Botões de Checkout Expresso’ no menu do lado esquerdo. Em seguida, clique no botão ‘Habilitar’ e use o menu suspenso ‘Escolher Posição’ para alterar onde o botão aparece na página de checkout.

Apenas esteja ciente de que você precisará habilitar os Botões de Solicitação de Pagamento para usar o botão Apple Pay da Stripe.

Em seguida, você pode querer habilitar o campo de telefone aprimorado. Quando um cliente digita seu endereço de entrega, o FunnelKit pode mostrar uma bandeira do país ao lado do campo de telefone.

Isso permite que os compradores saibam que digitaram o endereço correto.

Para adicionar este recurso, selecione 'Campo de Telefone Aprimorado' no menu à esquerda e, em seguida, clique no botão 'Sim' ao lado de 'Habilitar'.

Nesta tela, você também pode validar o número de telefone usando o país selecionado pelo comprador. Esta é uma maneira de verificar se o cliente digitou um número de telefone válido.

Para habilitar esta verificação, basta selecionar o botão 'Sim' ao lado de 'Validar Número de Telefone'.

Finalmente, você pode escolher se deseja salvar o número de telefone com o código do país ou sem o código do país. Se você vende para um público internacional, geralmente faz sentido selecionar 'Com código do país'.

Quando estiver satisfeito com a configuração das otimizações, clique em 'Salvar alterações'.

Como você pode ver, o FunnelKit tem muitas outras otimizações que podem ajudá-lo a obter mais vendas. Isso inclui a autocompletação do endereço de cobrança e entrega do comprador, aplicação automática de cupons e preenchimento prévio do formulário de checkout para clientes recorrentes.

Para desbloquear essas poderosas otimizações do WooCommerce, você precisará fazer o upgrade para o FunnelKit Builder Pro.

Publicar a Página de Checkout Personalizada do WooCommerce

O plugin gratuito FunnelKit tem muito mais configurações e recursos que podem ajudar você a criar uma página de checkout de alta conversão. No entanto, isso é tudo que você precisa para criar uma página de checkout personalizada do WooCommerce.

Quando você estiver satisfeito com a configuração da página de checkout, é hora de publicá-la clicando no botão 'Rascunho'.

Se você quiser visualizar a página antes de publicá-la, clique em 'Visualizar'. Isso abrirá a página de checkout personalizada em uma nova aba.

Para publicar a página, clique em 'Rascunho', mas desta vez selecione 'Publicado'. Agora, se você visitar seu site WordPress, verá a página de checkout personalizada publicada.

Método 2. Personalize sua página de checkout usando o SeedProd

Você também pode criar uma página de checkout personalizada do WooCommerce usando SeedProd.

É o melhor construtor de landing pages usado por mais de 1 milhão de sites e vem com mais de 180 modelos projetados profissionalmente, incluindo modelos de eCommerce que você pode usar para criar páginas de vendas e páginas de captura de leads.

Melhor ainda, o SeedProd tem suporte total para WooCommerce e até vem com blocos especiais do WooCommerce que você pode usar para criar uma página de checkout personalizada rapidamente.

Várias de nossas marcas parceiras projetaram seus sites inteiros usando-o, e elas adoraram como é fácil de usar. Para mais detalhes, veja nossa análise do SeedProd.

Como ele permite que você crie todos os tipos de páginas, o SeedProd é uma ótima opção se você quiser personalizar outras páginas, ou até mesmo criar um tema personalizado do WordPress para sua loja online.

A primeira coisa que você precisa fazer é instalar e ativar o plugin. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para SeedProd » Configurações e insira sua chave de licença.

Você pode encontrar essas informações em sua conta no site da SeedProd. Após inserir a licença, clique no botão ‘Verificar Chave’.

Escolha um Modelo SeedProd

Depois disso, vá para SeedProd » Landing Pages e clique em ‘Adicionar Nova Landing Page’.

Em seguida, você precisará escolher um modelo para sua página de checkout personalizada.

Os modelos do SeedProd são organizados em diferentes tipos de campanha, como em breve e páginas 404. Você pode clicar nas abas na parte superior da tela para filtrar os modelos do SeedProd com base no tipo de campanha.

Escolher um design que combine com o tipo de página que você deseja criar ajudará você a construir a página mais rapidamente. No entanto, cada modelo é totalmente personalizável, então você sempre pode ajustar o design para melhor se adequar à sua loja online.

Para este guia, selecione o ‘Modelo em Branco’ para que você possa começar com uma página limpa.

Para selecionar um modelo, passe o mouse sobre ele e clique no ícone de ‘Checkmark’.

Em seguida, digite um nome para sua página de checkout personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser. Por exemplo, você pode melhorar seu SEO do WordPress adicionando algumas palavras-chave relevantes.

Para saber mais, consulte nosso guia detalhado sobre como fazer pesquisa de palavras-chave para o seu blog WordPress.

Quando estiver satisfeito com as informações inseridas, clique no botão ‘Salvar e Começar a Editar a Página’.

Isso o levará ao editor de arrastar e soltar, onde você poderá construir sua página de checkout personalizada do WooCommerce.

Crie uma Página de Checkout de Alta Conversão

O editor do SeedProd mostra uma prévia ao vivo da sua página de checkout à direita e algumas configurações de bloco à esquerda.

Comece criando um cabeçalho com sua marca.

Aqui, você pode usar uma seção, que é uma coleção de blocos frequentemente usados juntos. Simplesmente clique na aba ‘Seções’ e depois selecione a categoria ‘Cabeçalho’.

Depois disso, passe o mouse sobre a seção ‘Cabeçalho 1’ e clique no ícone ‘Mais’.

Isso adiciona uma seção de Cabeçalho ao seu layout.

Para começar, você vai querer substituir o espaço reservado ‘Seu Logo’ clicando para selecionar esse bloco.

Em seguida, clique no ícone ‘Selecionar Imagem’ no menu à esquerda.

Agora você pode escolher uma imagem da biblioteca de mídia ou fazer upload de um novo arquivo do seu computador.

A seção Cabeçalho 1 vem com um menu de navegação. No entanto, isso incentiva os visitantes a abandonar a página de checkout sem fazer uma compra, então é uma boa ideia removê-lo.

Para excluir o bloco do Menu de Navegação, basta clicar para selecioná-lo. Em seguida, clique na opção ‘Excluir Bloco’.

Depois de fazer isso, clique no botão de call to action.

É inteligente dar aos compradores uma maneira de voltar para a página do carrinho e adicionar mais itens ou alterar a quantidade. Com isso em mente, digite o call to action que você deseja usar para este botão, como ‘Ver Carrinho’ ou similar.

Em seguida, digite o URL da sua página de carrinho do WooCommerce no campo ‘Link’.

Agora, os compradores podem visitar a página do carrinho clicando neste botão.

Adicionar Conteúdo de Upsell e Cross-Sell

Depois disso, é hora de escolher um layout para o restante da sua página de checkout.

É uma boa ideia mostrar alguns produtos recomendados em uma seção de barra lateral, pois isso incentiva os compradores a adicionar mais itens ao carrinho. Com isso em mente, clique no layout de conteúdo e barra lateral em ‘Escolha seu layout’.

Depois de fazer isso, encontre o bloco ‘Checkout’ no menu à esquerda e arraste-o para o seu layout.

Você pode personalizar completamente a aparência do seu checkout usando as configurações no menu à esquerda, incluindo a alteração do esquema de cores, escolha de fonte, cor do link, botões e muito mais.

Quando você estiver satisfeito com a aparência da seção de checkout, é hora de adicionar uma seção de produtos populares ou produtos recomendados. Isso pode gerar mais vendas, promovendo produtos adicionais que os compradores podem querer adquirir.

Para criar esta seção, basta arrastar um bloco de 'Produtos Mais Vendidos' para a sua página.

Agora você pode configurar este bloco usando as configurações no menu do lado esquerdo. Para mais detalhes, consulte nosso guia sobre como exibir produtos populares no WooCommerce.

Em seguida, é uma boa ideia adicionar um título acima dos produtos populares. Basta arrastar o bloco 'Título' para a sua página e soltá-lo acima do bloco de produtos populares.

Em seguida, clique para selecionar o bloco 'Título' e digite o título que você deseja usar.

Exibir Avaliações e Classificações de Clientes

Depois de fazer isso, recomendamos mostrar prova social adicionando um bloco de depoimentos de clientes. Simplesmente encontre o bloco 'Depoimentos' e arraste-o para o seu layout.

Agora você pode alterar a aparência dos depoimentos em sua loja online.

Por exemplo, no menu do lado esquerdo, você verá configurações para alterar a cor da bolha de comentário, alterar o alinhamento e adicionar mais depoimentos de clientes.

Outra ótima ideia é mostrar uma classificação por estrelas abaixo de seus depoimentos. Esta é uma ótima opção se você já tiver muitas avaliações positivas.

Para fazer isso, basta encontrar o bloco ’Avaliação por estrelas’ e arrastá-lo para baixo do bloco de depoimentos.

Publicar a Página de Checkout do WooCommerce

Quando estiver satisfeito com a aparência da página de checkout do WooCommerce, é hora de publicá-la clicando na seta suspensa ao lado de ‘Salvar’.

Em seguida, selecione a opção 'Publicar'.

Agora, se você visitar sua loja, verá a página de checkout ativa.

Dica profissional: O rastreamento de conversão pode ajudar você a ver o que está funcionando em sua página de checkout e o que não está. Você pode usar essa informação para refinar sua página de checkout usando o SeedProd. Para mais detalhes, consulte nosso guia sobre como configurar o rastreamento de conversão do WooCommerce.

Atribuir Sua Página de Checkout ao WooCommerce

Neste ponto, você publicou a página de checkout personalizada, mas seu blog WordPress ou site ainda está usando o design padrão. Você precisará alterar as configurações de URL padrão para que o WooCommerce envie os clientes para a nova página de checkout em vez da padrão.

Para fazer isso, vá para WooCommerce » Configurações e clique na aba ‘Avançado’.

Depois disso, abra o menu suspenso ‘Página de finalização de compra’ e comece a digitar o URL da página de finalização de compra personalizada que você acabou de criar.

Quando a página correta aparecer, clique para selecioná-la.

Com isso feito, role até o final da página e clique em ‘Salvar alterações’ para armazenar suas configurações. O WooCommerce agora usará a página de finalização de compra personalizada.

Bônus: Como reduzir o abandono da página de checkout

Abandono de página de finalização de compra ocorre quando um cliente inicia o processo de finalização de compra, mas não completa o pagamento.

Semelhante ao abandono de carrinho, é um grande problema para lojas online.

Quando se trata de reduzir as taxas de abandono de finalização de compra, criar uma página personalizada é um ótimo começo. No entanto, existem muitas outras maneiras de aumentar suas vendas.

Evite Adicionar Taxas Extras na Finalização de Compra

Quando um cliente vai finalizar a compra, ele espera que o preço total seja semelhante ao preço total do produto. Se ele chegar à página de finalização de compra e vir impostos, custos de frete altos e outras taxas adicionais, há uma boa chance de ele não concluir a compra.

Alguns clientes podem continuar com a compra se acharem que os custos são justificados. No entanto, é muito melhor ser transparente sobre seus preços para que os clientes saibam o que esperar.

Se você tiver muitas taxas extras, recomendamos adicioná-las aos preços dos seus produtos. Isso é muito menos confuso para o cliente.

Sempre que possível, também é uma boa ideia oferecer frete grátis.

Torne a Criação de Conta Opcional ou Mais Simples

Forçar os compradores a criar uma conta na finalização de compra adiciona muito atrito ao processo de compra e pode aumentar as taxas de abandono de finalização de compra.

Você pode permitir o registro de usuários no seu site WordPress, mas deve evitar torná-lo obrigatório. Em vez disso, você pode permitir que os compradores finalizem a compra como convidados, mas oferecer a eles um código de cupom se criarem uma conta.

Dessa forma, você pode gerar leads e aumentar sua lista de e-mail sem perder vendas.

Ofereça Mais Opções de Pagamento no Checkout

A maioria das pessoas tem um método de pagamento preferido. Pode ser a conta PayPal salva no computador do comprador ou o cartão de crédito que está fisicamente à mão.

Os compradores podem abandonar sua página de checkout se você não oferecer suporte ao método de pagamento favorito deles. Embora seja impossível oferecer todos os métodos, você deve tentar oferecer as opções de pagamento mais comuns.

Para mais detalhes, veja nossa lista dos melhores gateways de pagamento WooCommerce para WordPress.

Exiba um Popup Cronometrado

Você também pode reduzir o abandono de carrinho com um popup cronometrado.

OptinMonster é o melhor plugin de popup para WordPress e possui uma tecnologia exclusiva de Intenção de Saída® que pode exibir popups exatamente quando um comprador está prestes a sair da página de checkout.

Você pode até usar o OptinMonster para oferecer aos compradores um código de desconto especial se eles finalizarem a compra agora.

Configure Notificações Push de Carrinho Abandonado

Outra ótima maneira de reduzir o abandono de carrinho é configurando notificações push da web.

Essas notificações são exibidas nos navegadores móveis e de desktop dos usuários, mesmo quando eles não estão em seu site. Isso facilita o alcance de compradores e os lembra de finalizar a compra.

PushEngage é usado por mais de 25.000 proprietários de negócios inteligentes, e é o melhor software de notificação push da web do mercado. Ele permite que você crie facilmente campanhas de abandono de carrinho do WooCommerce.

Você também pode configurar campanhas de abandono de navegação, alertas de queda de preço, anúncios de novos produtos, alertas de estoque e muito mais.

Crie uma Página de Carrinho Personalizada no WooCommerce

Após otimizar a página de checkout do WooCommerce, você também pode considerar personalizar sua página de carrinho do WooCommerce.

Ao otimizar as páginas de carrinho e checkout, você pode fazer com que todo o processo de compra pareça sem esforço, para que você não perca nenhuma venda. Você também pode projetar ambas as páginas para ter a mesma identidade visual, para que os visitantes tenham uma experiência de checkout consistente.

Para instruções detalhadas passo a passo, consulte nosso guia sobre como criar uma página de carrinho personalizada no WooCommerce.

Esperamos que este artigo tenha ajudado você a personalizar a página de checkout do WooCommerce facilmente. Você também pode querer ver nosso guia sobre como criar um popup no WooCommerce para aumentar as vendas e nossa seleção especializada dos melhores plugins WooCommerce para sua loja.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.