Como Personalizar a Página de Checkout do WooCommerce

O checkout padrão do WooCommerce se parece com o de qualquer outra loja WooCommerce. Sem branding, sem sinais de confiança, sem controle sobre o design. Essa desconexão entre sua loja e seu checkout é um dos motivos pelos quais os clientes abandonam na última etapa.

Neste guia, mostrarei como redesenhar sua página de checkout do WooCommerce usando o SeedProd. Você controlará o layout, as cores, a tipografia, os estilos dos botões e a aparência geral sem tocar em uma linha de PHP.

Para personalizar a página de checkout do WooCommerce sem código, use o SeedProd. Instale o plugin, arraste o bloco de Checkout para uma nova página, estilize-o para combinar com sua marca e, em seguida, atribua-o em Configurações do WooCommerce » Avançado.

Por que Você Deve Personalizar a Página de Checkout do WooCommerce

A página de checkout é a última coisa que os clientes veem antes de concluir a compra. Ela é mais importante do que quase qualquer outra página em sua loja — em média, 70% dos compradores abandonam o carrinho antes de pagar, e um checkout confuso ou lento é um dos principais motivos.

• Reduza o abandono: Um checkout confuso ou mal projetado é um dos principais motivos pelos quais os clientes saem antes de concluir uma compra.
• Adicione sua marca: Um checkout genérico do WooCommerce quebra a experiência visual que os clientes construíram ao navegar em sua loja.
• Venda adicional no momento certo: Uma página de checkout personalizada permite que você mostre produtos relacionados onde os clientes já estão prontos para comprar. Veja os melhores plugins de venda adicional para WooCommerce para ir além.
• Construa confiança: Adicionar depoimentos, selos de confiança e um design limpo no checkout reduz o abandono de compradores que perdem a coragem no último segundo.

A boa notícia é que você não precisa codificar nada disso. Mostrarei como fazer tudo com um construtor de arrastar e soltar.

Configurações de Checkout do WooCommerce (Opções Gratuitas)

Antes de instalar qualquer coisa, vale a pena saber o que o WooCommerce permite que você altere por padrão. Essas configurações são gratuitas e estão disponíveis em todas as instalações do WooCommerce.

Vá para WooCommerce > Configurações > Geral / Contas e Privacidade / Avançado para acessar essas opções:

• Checkout para convidados: Habilite ou desabilite o checkout sem conta (WooCommerce > Configurações > Contas e Privacidade)
• Campo de cupom: Mostre ou oculte o campo de código de cupom no checkout (WooCommerce > Configurações > Geral)
• Atribuição da página de checkout: Escolha qual página serve como seu checkout (WooCommerce > Configurações > Avançado > Configuração de Página)
• Texto do botão: O texto padrão do botão “Finalizar Pedido” pode ser alterado por meio de um filtro simples do WooCommerce no functions.php do seu tema
• Campos de endereço: A visibilidade de alguns campos pode ser alternada no WooCommerce. O controle detalhado de campos requer um plugin.

Se você precisar de mais controle, como layouts de campos personalizados, alterações de design ou uma reformulação visual completa, é aí que o SeedProd entra em jogo. O tutorial abaixo cobre a abordagem sem código. Para uma visão mais ampla sobre a otimização de todo o seu fluxo de checkout, veja os melhores plugins de funil de vendas para WooCommerce.

Como Personalizar Sua Página de Checkout do WooCommerce

Se você não tem tempo para aprender a codificar ou o orçamento para contratar um desenvolvedor, personalizar sua página de checkout pode parecer quase impossível.

Mas a verdade é que não é, com as ferramentas certas em mãos.

No tutorial abaixo, mostraremos como personalizar sua página de checkout do WooCommerce com o SeedProd.

SeedProd é um construtor de sites WordPress com funcionalidade de arrastar e soltar. Ele permite que você construa e personalize qualquer página no WordPress visualmente.

Isso significa que você pode usar o editor de páginas de arrastar e soltar para criar páginas personalizadas e ver os resultados em tempo real. Ele remove a necessidade de codificar sua página manualmente, o que é uma ótima notícia para pessoas com habilidades limitadas de design e técnicas.

O SeedProd vem com centenas de modelos de página de destino projetados profissionalmente para começar rapidamente. Você pode então personalizar cada modelo no editor visual usando blocos de página flexíveis como:

• Formulários de optin e formulários de login
• Imagens e vídeos
• Texto e títulos
• Perfis de mídia social e botões de compartilhamento
• Formulários de contato personalizados com plugins de terceiros como WPForms
• Sorteios RafflePress
• Depoimentos e avaliações com estrelas
• Temporizadores de contagem regressiva e barras de progresso
• Menus de navegação e acordeões
• E mais.

O SeedProd também possui blocos de página de destino dedicados a lojas WooCommerce, incluindo botões de adicionar ao carrinho, checkout, carrinho de compras e grades de produtos flexíveis. Isso significa que você pode facilmente criar páginas versáteis de produtos, carrinho e checkout para sua loja de e-commerce sem contratar um desenvolvedor. Você também pode usar o SeedProd para personalizar sua página de loja WooCommerce usando a mesma abordagem de arrastar e soltar.

Com isso em mente, vamos ver como personalizar a página de checkout do WooCommerce com o SeedProd.

1. Instalar e Ativar o SeedProd

O primeiro passo é começar com o SeedProd e baixar o plugin para o seu computador. Para acessar os recursos de integração do WooCommerce do SeedProd, você precisará de pelo menos um Plano SeedProd Pro.

Após baixar o SeedProd, você precisa instalar e ativar o plugin em seu site WordPress. Você pode seguir estas etapas para instalar um plugin do WordPress se precisar de ajuda.

Após ativar o plugin, você verá uma tela de boas-vindas.

A tela pede para você inserir sua chave de licença do SeedProd. Você pode encontrar sua chave fazendo login em sua conta SeedProd e clicando no link Ver chave de licença, detalhes e downloads.

A partir daí, você pode copiar sua chave para salvá-la na área de transferência. Depois, cole a chave no campo da chave de licença e clique no botão Verificar chave.

Agora role um pouco para baixo na página e clique no botão Criar sua primeira página.

Isso leva você ao painel de páginas de destino do SeedProd. Na parte superior da página, há 4 modos de página diferentes:

• Em Breve
• Modo de Manutenção
• 404
• Entrar

Cada modo de página permite ativar páginas de destino específicas com um único clique.

Por exemplo, você pode ativar o modo "Em Breve" para adicionar uma página de "Em Breve" informando as pessoas sobre sua nova loja. Ou você pode ativar o modo "Página 404" para adicionar uma página de erro 404 personalizada ao seu site.

Abaixo dessa seção é onde você verá uma lista de quaisquer outras páginas que você criar com o SeedProd. Como ainda não criamos nenhuma, clique no botão Criar Nova Página de Destino para começar.

2. Crie uma Nova Landing Page

Após clicar no botão para criar uma nova página de destino, você verá a biblioteca de modelos de página de destino do SeedProd.

Você pode filtrar os modelos por objetivo ou setor clicando nas abas na parte superior.

Cada modelo é multifuncional. Como tal, você pode usar qualquer design e personalizá-lo no editor de arrastar e soltar para que fique do jeito que você quiser.

Para este guia, mostraremos como criar e personalizar sua página de checkout do WooCommerce do zero usando o Modelo em Branco. Isso lhe dará uma excelente visão geral de como é fácil usar o SeedProd.

Então, passe o mouse sobre a miniatura do Modelo em Branco e clique no ícone de visto.

Em seguida, um pop-up aparece pedindo para você inserir um nome e URL para sua página. Você pode alterar essa configuração mais tarde, então nomeie como quiser.

Agora clique no botão Salvar e Começar a Editar a Página para lançar sua página.

Na tela seguinte, você verá o editor de páginas de destino do SeedProd.

Ele tem um layout simples de 2 painéis:

1. Painel esquerdo: Blocos e seções de página para construir e personalizar sua página
2. Painel direito: Prévia de como sua página de destino fica em tempo real

Adicionar conteúdo à sua página é tão simples quanto arrastar um bloco da esquerda e soltá-lo no lugar à direita. Mostraremos como fazer isso na próxima etapa.

3. Adicione o Bloco de Checkout à Sua Página

Observação sobre o Checkout com Blocos do WooCommerce: O WooCommerce agora vem com um checkout baseado em blocos por padrão (desde o WooCommerce 8.x). Este tutorial funciona tanto com o checkout de blocos quanto com o checkout clássico de shortcode. Você substituirá o tipo de checkout atualmente ativo atribuindo sua página SeedProd na Etapa 7.

Antes de começar a personalizar sua página de checkout do WooCommerce, vamos configurar uma estrutura básica de página de checkout.

No painel direito, escolha um layout de página clicando em qualquer uma das opções de coluna.

Como você pode ver abaixo, ele adiciona uma estrutura simples à sua página. É aqui que ficarão todos os elementos de página que você adicionar.

Em seguida, você precisa adicionar seu checkout do WooCommerce à sua página. No painel esquerdo, role para baixo até a seção WooCommerce. Em seguida, clique no bloco Checkout e arraste-o para uma das colunas que você criou anteriormente.

Agora você deve ver seu formulário de checkout do WooCommerce diretamente no design da sua página de destino.

Personalizando Campos de Checkout do WooCommerce com SeedProd

Quando você clica no bloco Checkout no editor do SeedProd, a aba Estilo oferece controle preciso sobre a aparência do seu formulário de checkout. Você está trabalhando com design visual aqui — o SeedProd cuida da estilização enquanto o WooCommerce cuida de quais campos aparecem.

Veja o que você pode alterar na aba Estilo:

• Layout: Alterne entre layouts de formulário de 1 coluna e 2 colunas
• Cabeçalho: Tipografia e cor
• Campos: Cor de fundo, cor do texto, cor da borda, largura da borda, cor do rótulo, tipografia do rótulo e espaçamento entre linhas
• Botão: Estilo (flat, 2D, vintage, ghost ou link), cor e raio da borda
• Alertas: Cor de destaque para mensagens de informação, erro e sucesso
• Carrinho: Cor da borda, largura e raio; cor de fundo; cor do texto; fontes; fonte do cabeçalho, cor e cor de fundo
• Seção de pagamento: Cor de fundo, cor do texto e família de fontes

Agora clique na aba Modelos e você verá uma variedade de estilos personalizados para seus campos de checkout. Clique em qualquer estilo para adicioná-lo instantaneamente ao seu formulário de checkout.

Observação: a aba Estilo controla apenas a aparência. Você não pode reorganizar campos, alterar rótulos de campos ou ocultar o Nome da Empresa a partir daqui. Para alterações em nível de campo como essas, você precisará de um plugin separado, como o Checkout Field Editor for WooCommerce.

Antes de prosseguir, clique no botão verde Salvar no canto superior direito da sua tela para salvar seu progresso.

4. Personalize o Design da sua Página de Checkout

Com sua página de destino agora parecendo mais com o que deveria, vamos ver outras maneiras de personalizar sua página de checkout do WooCommerce.

Adicionando um Cabeçalho à sua Página de Checkout do WooCommerce

Para ajudar os clientes a se orientarem, é uma boa prática adicionar um cabeçalho à sua página de checkout. O SeedProd oferece uma maneira fácil de fazer isso com Seções.

Ao lado do painel de blocos, clique na aba Seções. Isso mostra vários layouts pré-fabricados que você pode adicionar à sua página com um único clique.

Por exemplo, clicar na seção Cabeçalhos mostra 3 estilos de cabeçalho pré-fabricados diferentes. Escolha um design que você goste e clique no ícone de mais para importá-lo para o seu design.

Por padrão, qualquer nova seção é adicionada ao final da sua página. Para movê-la para a área do cabeçalho, passe o mouse sobre ela e clique no ícone de mover seção. Em seguida, arraste a seção inteira para o topo da página.

Depois, você pode clicar em qualquer elemento dentro da sua seção de cabeçalho para ver as opções de personalização no painel esquerdo. Por exemplo, clicar no bloco de imagem dentro da seção de cabeçalho permite que você carregue uma nova imagem para usar como seu logotipo.

Você pode até excluir o bloco de botões no seu cabeçalho e substituí-lo por seus ícones de perfil social.

Adicionando Produtos Sugeridos à sua Página de Checkout do WooCommerce

Com a poderosa integração WooCommerce do SeedProd, é fácil fazer cross-sell e promover seus produtos e serviços de qualquer página de destino. A gama de blocos de grade de produtos permite que você exiba:

• Produtos recentes
• Produtos em promoção
• Produtos mais vendidos
• Produtos em Destaque
• Produtos mais bem avaliados

Basta selecionar o bloco Grade de Produtos e arrastá-lo para o local desejado em sua página. Você pode então clicar no bloco para ver as configurações no painel esquerdo.

Neste painel, você pode escolher quantas colunas de produtos exibir e adicionar paginação à sua grade de produtos. Você também pode filtrar quais produtos os visitantes veem escolhendo um tipo de consulta no menu suspenso.

Depois, você pode definir a ordem dos produtos por:

• Data
• ID
• Ordem do Menu
• Popularidade
• Aleatório
• Avaliação
• Título

Você também pode optar por mostrá-los em ordem crescente ou decrescente.

Adicionando Depoimentos à Sua Página de Checkout

Depoimentos e avaliações com estrelas são outra ótima maneira de adicionar confiança e credibilidade à sua página de checkout. Se os clientes potenciais virem que as pessoas avaliam positivamente seus produtos, é mais provável que concluam a compra. A pesquisa de consumidores de 2026 da BrightLocal descobriu que 85% dos consumidores dizem que avaliações positivas os tornam mais propensos a usar um negócio.

Para adicionar depoimentos de clientes à sua página de checkout do WooCommerce, arraste o bloco Depoimento do painel esquerdo e solte-o no local desejado em sua página. Em seguida, você pode clicar no bloco para ver as configurações e adicionar seus depoimentos de clientes.

Você pode incluir quantos depoimentos desejar e até mesmo exibi-los como um carrossel de depoimentos deslizante.

Configurações Globais de Personalização

As configurações globais de personalização do SeedProd permitem que você altere a aparência geral da sua página de checkout do WooCommerce.

Clique no ícone de engrenagem no canto inferior esquerdo da sua tela. Isso exibe um painel de Configurações Globais para fontes, cores, plano de fundo e CSS personalizado.

Fontes

Expandir o título Fonte permite que você altere as fontes e os pesos de seus títulos e corpo de texto. É tão fácil quanto escolher uma fonte do Google no menu suspenso.

Ou você pode clicar no botão Temas de Fonte para ver exemplos de diferentes combinações de fontes. A partir daí, é só um clique para aplicá-los à sua página.

Cores

A seção Cores é semelhante. Clique em qualquer cor para ver uma ferramenta conta-gotas e selecionar cores individuais para títulos, texto, botões e muito mais.

Ou você pode clicar no botão Paletas de Cores para escolher entre mais de 20 esquemas de cores pré-projetados.

Plano de Fundo

Na seção Plano de Fundo, você pode alterar a cor, o gradiente e a imagem de fundo. Você pode até adicionar um plano de fundo de vídeo ou uma apresentação de slides em tela cheia.

CSS Personalizado

E, finalmente, na seção CSS Personalizado, você pode adicionar código personalizado para personalizar ainda mais a página de checkout do WooCommerce.

Quando estiver satisfeito com a aparência de tudo, clique no botão Salvar.

5. Configure as Configurações da Sua Página de Checkout

Com suas personalizações implementadas, vamos dar uma olhada em algumas outras configurações que você pode alterar em sua página de checkout. 

Conectando Sua Lista de E-mails

Primeiro estão as configurações de marketing por e-mail. O SeedProd permite que você conecte sua página de destino à sua lista de e-mails facilmente. 

Clique em Conectar no topo da tela e você verá uma ampla variedade de serviços populares de marketing por e-mail. Portanto, se você quiser pedir aos usuários para se inscreverem em sua newsletter em sua página de checkout, use este painel para vincular seu serviço de marketing por e-mail. 

Basta escolher seu provedor favorito e seguir as etapas em nossa documentação de integração de e-mail para configurar.

Na mesma tela, você pode vincular sua página de checkout a milhares de aplicativos via Zapier, monitorar o desempenho do seu site com o Google Analytics e protegê-lo contra spam com o Recaptcha.

Configurando as Configurações da Sua Página

Após conectar sua lista de e-mails, clique na guia Configurações da Página para ver outras configurações que você pode configurar no SeedProd. Geralmente, há 5 seções na página de configurações, mas isso depende do tipo de página que você cria e do seu plano do SeedProd.

Configurações Gerais

As configurações Gerais permitem que você altere o nome e a URL da página de checkout do WooCommerce. Você também pode alternar entre publicado e rascunho.

Se você quiser evitar conflitos de plugins e acelerar sua página, pode ativar o Modo de Isolamento. Isso impede que scripts específicos de cabeçalho e rodapé sejam executados e interfiram no seu desempenho.

SEO e Análise

Na guia SEO, você pode usar um plugin de SEO para WordPress para configurar a tag de título da sua página de destino, meta descrição, etc. Um dos melhores plugins para isso é o All In One SEO.

O mesmo vale para a guia Análise. Aqui você pode conectar seu plugin favorito do Google Analytics e monitorar o desempenho da sua página de destino. Por que não experimentar o MonsterInsights para Google Analytics?

Se você quiser mais detalhes, pode sempre conferir nossa análise do MonsterInsights.

Scripts

Na área de Scripts, você pode adicionar código ao cabeçalho, corpo e rodapé da sua página. Isso pode ser qualquer coisa, como seus cookies de rastreamento, pixel de rastreamento do Facebook ou até mesmo seu script de análise.

Domínio Personalizado

Se você é um usuário do Plano Pro do SeedProd, pode dar a qualquer página de destino um domínio personalizado que não esteja conectado ao seu site existente.

Por exemplo, se você quiser lançar um novo site e ainda não o configurou, pode criar uma página de "em breve" no SeedProd em seu site existente e apontá-la para o seu novo site.

Com essa tática, você pode direcionar novos assinantes para a lista do site futuro sem configurar uma nova instalação do WordPress.

Após configurar suas configurações, salve suas alterações e clique de volta na guia Design.

6. Publique Sua Página de Checkout Personalizada

Antes de colocar sua página de checkout no ar, é uma boa ideia testá-la em dispositivos móveis. Se sua página de checkout não for responsiva para dispositivos móveis, ela não terá uma boa aparência nem um bom desempenho em telas sensíveis ao toque menores, como tablets e smartphones.

Isso pode até fazer com que os usuários abandonem seus carrinhos de compras por frustração.

A boa notícia é que o SeedProd tem uma opção de visualização móvel integrada para que você possa verificar se sua página é compatível com dispositivos móveis. Basta clicar no ícone de celular na parte inferior da tela.

Agora você pode ver como sua página de checkout aparece no celular e alterar qualquer coisa que não pareça ou funcione corretamente.

Quando tudo parecer ótimo, é hora de publicar. Clique na seta para baixo ao lado do botão verde Salvar e clique em Publicar.

Agora você pode visitar a página para vê-la em ação.

Ótimo trabalho! Agora você tem uma página de checkout WooCommerce incrível e personalizada!

7. Atribua Sua Página de Checkout no WooCommerce

Há mais um passo até que sua nova página de checkout esteja pronta para receber pedidos. Você precisa defini-la como sua página de checkout padrão no WooCommerce.

Para fazer isso, navegue até WooCommerce > Configurações > Avançado > Configuração da página. Encontre o menu suspenso Página de checkout e escolha a página que você acabou de criar no SeedProd.

Lembre-se de clicar no botão Salvar alterações para armazenar suas configurações.

Observação para usuários do checkout em blocos: O WooCommerce 8.x vem com o checkout em blocos ativado por padrão. Essa configuração ainda funciona. O SeedProd substitui a página de checkout visualmente, quer você estivesse usando o checkout em blocos ou clássico antes.

E é isso!

Agora você sabe como personalizar a página de checkout do WooCommerce com o construtor de páginas de destino do SeedProd. A integração do SeedProd com o WooCommerce facilita o controle do design da sua loja online.

O plugin é rápido e sem excessos. Iniciantes podem criar uma loja personalizada sem contratar um desenvolvedor.

Uma vez que seu checkout estiver no ar, você também pode personalizar sua página de agradecimento do WooCommerce para vender mais, coletar avaliações ou impulsionar compartilhamentos sociais após a venda.

Perguntas Frequentes

Como remover campos da página de checkout do WooCommerce?

A guia Estilo do SeedProd controla o design visual do seu formulário de checkout, não quais campos aparecem. Para remover ou ocultar campos como Nome da empresa ou Endereço Linha 2, use um plugin dedicado de edição de campos, como o Checkout Field Editor for WooCommerce (versão gratuita disponível).

Se você estiver usando o checkout com shortcode clássico, também pode remover campos com um filtro PHP em functions.php. Essa abordagem não funciona com o checkout em blocos.

Posso personalizar o checkout do WooCommerce gratuitamente?

O WooCommerce inclui opções gratuitas prontas para uso: alternar o campo de cupom, habilitar o checkout para convidados, alterar qual página serve como checkout. Para alterações de design visual, layouts de campos personalizados e remoção de campos específicos, você precisará de um plugin.

O SeedProd requer um plano Pro para recursos do WooCommerce.

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

Um verdadeiro checkout de página única coloca o carrinho, os detalhes de faturamento e o resumo do pedido em uma única página sem recarregamentos. Com o SeedProd, você cria um layout com o bloco de Checkout e atribui essa página como seu URL de checkout nas configurações do WooCommerce.

Para uma experiência completa de carrinho e checkout de página única, combine os blocos Carrinho e Checkout na mesma página do SeedProd.

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

Se você estiver usando filtros PHP como woocommerce_checkout_fields e eles não estiverem funcionando, sua loja provavelmente está usando o checkout em blocos. Hooks PHP que funcionam no checkout clássico com shortcode são ignorados silenciosamente no checkout em blocos.

A solução: volte para o checkout clássico ou use um plugin 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 totalmente personalizada e você a define como seu URL de checkout nas configurações do WooCommerce. Isso substitui qualquer tipo de checkout que estava ativo antes (em blocos ou clássico) pelo seu design do SeedProd.

Você não precisa alternar os modos de checkout do WooCommerce. O SeedProd gerencia o formulário de checkout através de sua própria integração de blocos do WooCommerce.

Enquanto você está aqui, talvez você também ache os seguintes guias do WooCommerce úteis:

• Como Personalizar a Aba Informações Adicionais do WooCommerce
• Como Adicionar o Botão Ver Carrinho no WooCommerce
• Como Alterar o Título da Página da Loja no WooCommerce
• Como Criar uma Galeria de Imagens de Produtos Deslumbrante no WooCommerce 
• Como Adicionar Avaliação por Estrelas às Páginas de Produto do WooCommerce
• Como Exibir Produtos Relacionados no WooCommerce
• Como Exibir Categorias e Tags de Produtos no WooCommerce 
• Como Obter e Exibir Descrições de Produtos no WooCommerce
• Como Exibir Produtos em Destaque no WooCommerce 
• Como Corrigir o Erro de Carrinho de Compras do WooCommerce Não Funciona
• Como Personalizar o Botão Adicionar ao Carrinho do WooCommerce
• Como Adicionar um Ícone de Carrinho de Compras do WooCommerce aos Menus
• Como personalizar páginas de categoria de produto no WooCommerce
• Como Adicionar uma Nova Seção de Produtos WooCommerce ao WordPress

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.