Como Criar uma Página de Checkout Personalizada do WordPress (Sem Código) 

Se você já perdeu uma venda porque sua página de checkout estava lenta, confusa ou sem a opção de pagamento correta, sabe o quão frustrante isso é. Uma página de checkout personalizada no WordPress resolve isso e oferece aos compradores uma maneira suave e confiável de pagar.

Cerca de 70% dos compradores abandonam seus carrinhos antes de pagar, de acordo com a média corrente do Instituto Baymard. Um checkout que você controla é a solução, quer você esteja criando uma nova página do zero ou personalizando a página de checkout do WooCommerce que você já tem.

Mostrarei primeiro as configurações gratuitas do WooCommerce. Em seguida, mostrarei como criar uma página de checkout totalmente personalizada com o SeedProd, em cerca de 15 minutos, sem tocar em código.

Como Personalizar a Página de Checkout do WooCommerce Sem um Plugin

O WooCommerce inclui algumas configurações gratuitas de checkout, e vale a pena verificá-las antes de instalar qualquer coisa.

Veja o que você pode alterar sem instalar nada:

• Checkout de convidados: permita que os clientes paguem sem criar uma conta (WooCommerce » Configurações » Contas e Privacidade)
• Campo de cupom: mostre ou oculte a caixa de código de cupom no checkout (WooCommerce » Configurações » Geral)
• Página de checkout: escolha qual página serve como seu checkout (WooCommerce » Configurações » Avançado » Configuração de Página)
• Básico de campos: alguns campos de endereço podem ser ativados ou desativados, mas adicionar ou remover campos requer um plugin

Essas configurações mudam como seu checkout funciona, não como ele se parece. O layout, as cores e a marca vêm do modelo do seu tema, e o WooCommerce não oferece um editor visual para nada disso.

No restante deste guia, mostrarei como substituir o checkout padrão por uma página que você mesmo projeta.

Como Criar uma Página de Checkout no WordPress (Sem Código)

Para este tutorial, usaremos o SeedProd para criar uma página de checkout do WordPress. O SeedProd é o melhor construtor de sites WordPress com arrastar e soltar, usado por mais de 1 milhão de sites.

Com o SeedProd, você pode criar qualquer página de destino do WordPress sem escrever uma única linha de código. Sua integração com o WooCommerce cobre o restante da sua loja também, para que você possa personalizar sua página de carrinho e página de loja da mesma forma.

Isso significa que, em vez de usar o checkout de página única padrão do WooCommerce, você pode criar uma página totalmente personalizada e otimizada para conversões. E antes de lançar, você pode criar uma página "Em Breve" do WooCommerce para gerar leads.

Portanto, se você deseja criar uma página de checkout no WordPress para iniciantes, veja como fazer isso com o SeedProd.

Tutorial em Vídeo

Passo 1: Instalar e Ativar o SeedProd

O primeiro passo é instalar e ativar o plugin SeedProd.

Se precisar de ajuda com esta etapa, siga este guia passo a passo sobre como instalar um plugin do WordPress.

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

Esta informação é fácil de encontrar na seção Downloads da sua conta no site SeedProd.

Etapa 2: Crie uma Nova Página

Após ativar sua chave de licença, navegue até SeedProd » Páginas no seu painel do WordPress. Nesta página, você verá uma visão geral dos diferentes modos de página do SeedProd e uma área para adicionar novas landing pages.

Com os modos de página, você pode instantaneamente:

• Criar e ativar uma página "Em Breve"
• Ativar o modo de manutenção
• Criar uma página 404 personalizada
• Configurar uma página de login personalizada do WordPress
• Criar uma landing page independente do WordPress

Cada modo adiciona funcionalidades que seu site precisaria de um plugin WordPress separado.

Para este guia, queremos criar uma página de checkout independente do WordPress. Para fazer isso, clique no botão Adicionar Nova Landing Page.

Na próxima tela, você pode escolher entre centenas de modelos de landing page responsivos.

Você pode filtrar os designs clicando nas abas no topo:

• Todos
• Em Breve
• Modo de Manutenção
• Página 404
• Vendas
• Webinar
• Lead Squeeze
• Entrar

A melhor abordagem é procurar um modelo que corresponda de perto ao design que você deseja. E se não for uma combinação perfeita, você pode personalizá-lo na próxima etapa sem PHP, CSS ou shortcodes.

Para este tutorial, usaremos o modelo Em Branco para mostrar como é fácil criar sua página de checkout do WordPress sem contratar um desenvolvedor.

Para escolher o modelo, passe o mouse sobre a miniatura e clique no ícone de visto laranja.

Depois, um pop-up aparece pedindo para você inserir um nome e URL para sua página.

Em seguida, clique no botão Salvar e Começar a Editar a Página.

Etapa 3: Adicione Conteúdo à Sua Página de Checkout

Após importar seu modelo, ele será aberto no construtor visual de páginas do SeedProd e terá uma aparência semelhante ao exemplo abaixo.

Nos meus testes do GTmetrix, uma página criada com SeedProd carregou em 556ms, em comparação com 1.882ms para a mesma página criada com Elementor. Uma página de checkout mais rápida significa menos abandonos antes do pagamento.

Você verá uma prévia ao vivo da sua página à direita. E à esquerda há um painel de opções onde você pode escolher diferentes blocos, seções e personalizar seu design.

Cabeçalho da Página de Checkout

Primeiro, adicionaremos um cabeçalho à sua página de checkout para que você possa manter a consistência da sua marca em todo o seu site.

Para fazer isso, clique na aba Seções no painel esquerdo e clique na categoria Cabeçalho. A partir daí, passe o mouse sobre qualquer seção de cabeçalho e clique no ícone de mais para adicioná-la à sua página.

Em seguida, clique na área da imagem da sua nova seção de cabeçalho. Aqui você pode fazer upload de uma imagem do seu computador ou da biblioteca de mídia do WordPress para usar como o logotipo do seu site.

Também recomendamos remover o menu de navegação da sua página de checkout. Menos rotas de saída significam mais checkouts concluídos.

Para excluir o menu de navegação, passe o mouse sobre o bloco de navegação e clique no ícone da lixeira.

Agora vamos personalizar o botão de call-to-action (CTA). Em vez de enviar os usuários para fora da página, você pode usar este botão para lembrar os usuários sobre o conteúdo do carrinho de compras deles.

Então clique no botão CTA para abrir as configurações à esquerda e substituir o texto padrão. No nosso caso, alteramos para ‘Ver Carrinho’.

Em seguida, você pode adicionar o URL da sua página de carrinho do WooCommerce no campo Link. Se desejar, você pode tornar o link nofollow ou abri-lo em uma nova aba selecionando a caixa de seleção.

Bloco de Checkout do WooCommerce

Com sua marca definida, é hora de adicionar o formulário de checkout em si. Primeiro, arraste um novo bloco Coluna para sua página.

Em seguida, escolha o seu layout preferido.

Em seguida, role o painel esquerdo para a seção WooCommerce. A partir daí, escolha o bloco Checkout e arraste-o para sua página.

Clique em qualquer lugar no bloco de Checkout para abrir suas configurações.

A aba Estilo oferece controle preciso sobre a aparência do formulário:

• Layout: um formulário de checkout de 1 ou 2 colunas
• Cabeçalho: fontes e cores para os títulos do checkout
• Campos: estilo de fundo, texto, borda e rótulo, além de espaçamento entre linhas
• Botão: estilo (flat, 2D, vintage, ghost ou link), cor e raio da borda
• Alertas: cores de destaque para mensagens de informação, erro e sucesso
• Carrinho: bordas, fundos, fontes e estilo do cabeçalho
• Seção de Pagamento: cor de fundo, cor do texto e família da fonte

Para um início mais rápido, clique na aba Modelos. Ela contém estilos pré-fabricados para seus campos de checkout, e um clique os aplica a todo o formulário.

Lembre-se de clicar em Salvar para armazenar suas alterações.

Alterando quais campos aparecem no checkout

As configurações do bloco de Checkout controlam a aparência do seu formulário, não quais campos ele exibe. O WooCommerce decide os campos, então você não pode remover o Nome da Empresa ou reordenar o formulário do painel do SeedProd.

Para adicionar, remover ou reordenar campos de checkout, use um plugin editor de campos dedicado como o Checkout Field Editor for WooCommerce. A versão gratuita cuida do básico.

Uma coisa a observar: snippets de PHP que editam campos de checkout só funcionam no checkout de shortcode clássico. O checkout de blocos mais novo do WooCommerce ignora esses filtros silenciosamente, e é por isso que tutoriais de código mais antigos muitas vezes param de funcionar.

Produtos Populares do WooCommerce

Se você deseja aumentar as vendas, pode adicionar produtos populares à sua página de checkout do WordPress em seguida. Isso pode incentivar os compradores a adicionar mais itens ao carrinho antes de pagar.

Para adicionar produtos populares, escolha o bloco Produtos Mais Vendidos na seção WooCommerce e arraste-o para sua página.

A partir daí, você pode editar o número de colunas, adicionar paginação e ajustar outras configurações nos menus suspensos.

Adicione um bloco de Título acima da grade e altere-o para algo como “Produtos Populares”. Dessa forma, os compradores saberão exatamente o que estão vendo.

Avaliações e Depoimentos

Avaliações e depoimentos tranquilizam os compradores de que outras pessoas confiam em seus produtos. Essa tranquilidade é mais importante no checkout, bem quando os compradores ficam com receio.

Você pode adicioná-los com o SeedProd. Vá para os blocos Avançados e arraste o bloco Depoimentos para sua página de checkout.

Nas configurações, você pode personalizar o bloco. Por exemplo, você pode adicionar uma foto de depoimento ou cargo e até transformá-lo em um carrossel rolável com múltiplos depoimentos.

Você também pode adicionar um bloco de Avaliação por Estrelas abaixo do depoimento para obter mais prova social.

Selos de confiança funcionam da mesma maneira. Um ícone de cadeado ou garantia de devolução do dinheiro perto do botão de pagamento é uma pequena adição que pode acalmar dúvidas de última hora.

Etapa 4: Publique sua página de checkout do WordPress

Quando estiver satisfeito com sua página, verifique como ela fica no celular. A maioria dos compradores navega em seus telefones, portanto, um checkout que falha em telas pequenas custa vendas. Certifique-se de que tudo esteja otimizado para celular antes de publicar.

O SeedProd tem uma pré-visualização móvel integrada para isso. Clique no ícone de celular na barra de navegação inferior.

Você verá a página como um comprador veria no celular, e poderá corrigir qualquer coisa que pareça apertada antes de publicar.

Quando estiver satisfeito com a aparência de tudo, clique na seta suspensa ao lado do botão verde Salvar e clique em Publicar para tornar sua página de checkout ativa.

Em vez do checkout padrão do WooCommerce, agora você tem uma página de checkout que é realmente sua.

Etapa 5: Atribuir sua página de checkout ao WooCommerce

O passo final é dizer ao WooCommerce para usar sua nova página. Esta é uma configuração no painel do WooCommerce.

Vá para WooCommerce » Configurações e clique na aba Avançado. Em seguida, ao lado do título Página de Checkout, procure pela página que você acabou de criar.

Quando a encontrar na lista suspensa, clique nela para atribuí-la como sua página de checkout oficial. Certifique-se de clicar em Salvar alterações na parte inferior da tela para preservar suas configurações.

Agora, quando um visitante clicar em ‘Prosseguir para o checkout’, ele será direcionado para a página que você acabou de construir. Isso funciona independentemente de sua loja ter usado o checkout de bloco ou o clássico anteriormente.

Antes de publicar, teste o checkout usando o modo de teste integrado do WooCommerce. Em WooCommerce » Configurações » Pagamentos, ative um gateway de teste e faça um pedido de teste para confirmar que tudo funciona.

Se seus métodos de pagamento não estiverem aparecendo na página, é aí que você deve verificar primeiro. O SeedProd exibe quaisquer gateways que você ativou lá, incluindo Stripe, PayPal e quaisquer outros que você ativou.

Perguntas frequentes sobre páginas de checkout do WordPress

Preciso de habilidades de codificação para personalizar uma página de checkout do WooCommerce?

Não. Com o construtor de arrastar e soltar do SeedProd, você pode personalizar a página de checkout do WooCommerce sem tocar em código. Altere o layout, estilize o formulário e adicione sinais de confiança usando controles visuais. Não é necessário PHP ou CSS.

Posso adicionar gateways de pagamento extras à minha página de checkout personalizada?

Sim. O WooCommerce suporta vários gateways de pagamento, incluindo Stripe, PayPal, Apple Pay e opções de Compre Agora, Pague Depois. Ative-os em WooCommerce » Configurações » Pagamentos, e o SeedProd os exibirá em sua página de checkout personalizada automaticamente.

Como faço para que o checkout do WooCommerce seja de página única?

Crie uma página com o SeedProd que inclua os blocos Carrinho e Checkout, e então a designe como sua página de checkout no WooCommerce » Configurações » Avançado. Os compradores verão seu carrinho, detalhes de faturamento e resumo do pedido em uma única página, sem recarregamentos.

Por que meu código não está funcionando para personalizar a página de checkout do WooCommerce?

Sua loja provavelmente está usando o checkout de blocos do WooCommerce, que ignora silenciosamente filtros PHP como woocommerce_checkout_fields. Mude de volta para o checkout clássico com shortcode, ou use um construtor visual como o SeedProd que substitui a página de checkout sem depender de hooks PHP.

O SeedProd funciona com o checkout em blocos do WooCommerce?

Sim. O SeedProd cria uma página de checkout personalizada separada, e designá-la nas configurações do WooCommerce substitui qualquer tipo de checkout que estava ativo antes, seja de blocos ou clássico. Você não precisa mudar os modos de checkout do WooCommerce primeiro.

Como posso melhorar as taxas de conversão na minha página de checkout?

Mantenha o formulário simples, ofereça várias opções de pagamento e adicione selos de segurança e depoimentos de clientes. Remover menus de navegação impede que os compradores saiam no meio do checkout. O construtor visual do SeedProd faz todos esses ajustes sem nenhum código.

Como testo meu checkout do WooCommerce antes de publicar?

Ative um gateway de teste em WooCommerce » Configurações » Pagamentos. Tanto Stripe quanto PayPal oferecem modos de sandbox. Faça um pedido de teste para confirmar que a página de checkout carrega corretamente, processa pagamentos e envia e-mails de confirmação de pedido antes de publicar.

Crie seu Checkout Personalizado no WordPress

Criar uma página de checkout personalizada no WordPress é mais do que design. Torna o processo de compra claro e rápido, para que mais compradores concluam seus pedidos.

Com o SeedProd, você pode criar uma página de checkout que combine com sua marca e remova distrações, sem escrever código. E assim que estiver no ar, você pode personalizar sua página de agradecimento do WooCommerce para oferecer upsell ou coletar avaliações após a venda.

Configure sua página personalizada hoje mesmo e transforme mais visitantes em clientes pagantes.

Se você está procurando mais dicas de WooCommerce, confira estas postagens:

• Como Habilitar o Modo de Manutenção para Páginas de Lojas WooCommerce
• Como Tornar o WordPress Rápido
• Como Configurar o Rastreamento de Conversão do WooCommerce para Sua Loja

Enquanto você está aqui, não se esqueça de nos seguir no Twitter, YouTube e Facebook para mais conteúdo útil para o crescimento do seu negócio.