# Como personalizar campos de checkout no WooCommerce em 5 passos

<strong>Personalizar campos de checkout</strong> no WooCommerce significa remover, reordenar e validar campos para tirar fricção da compra. Segundo o <a href="https://baymard.com/lists/cart-abandonment-rate">Baymard Institute</a> (2024), a taxa média de abandono de carrinho é 70,22%. Cada campo extra adiciona cerca de 12 segundos ao preenchimento. Comece pelo essencial e teste no Checkout Block.

Personalizar campos de checkout é o ato de editar os campos de cobrança, entrega e pedido que o WooCommerce exibe na finalização da compra. Você pode remover o que não usa, reordenar campos por prioridade, tornar um campo obrigatório ou opcional e validar o formato (CPF, CEP, telefone) antes de enviar o pedido. Há três caminhos: o filtro `woocommerce_checkout_fields` no código, um plugin visual ou o Elementor PRO com JetWooBuilder. Este tutorial mostra como personalizar campos de checkout pelos três, com o ganho e o risco de cada um. Para a base da loja, veja o <a href="https://full.services/woocommerce/">conteúdos de WooCommerce da FULL</a> antes de mexer no checkout.

---

## Por que personalizar campos de checkout reduz o abandono

Personalizar campos de checkout reduz abandono porque corta fricção: o checkout padrão do WooCommerce 9.x traz cerca de 13 campos de cobrança, e boa parte das lojas usa menos da metade. Segundo o Baymard Institute, 70,22% dos carrinhos são abandonados, e processos longos estão entre as 5 maiores causas. Menos campo na tela final significa menos desistência.

A gente vê no suporte da FULL que loja de produto digital pedindo endereço completo perde cliente na última etapa.

<table id="etapas-personalizar-campos-de-checkout">
  <caption>Personalizar campos de checkout: métodos, esforço e validação</caption>
  <thead>
    <tr>
      <th scope="col">Método</th>
      <th scope="col">Esforço técnico</th>
      <th scope="col">Check de validação</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Hook woocommerce_checkout_fields</th>
      <td>Alto (PHP no plugin de site)</td>
      <td>Campo some/aparece e sobrevive ao update do tema</td>
    </tr>
    <tr>
      <th scope="row">Plugin Checkout Field Editor</th>
      <td>Baixo (interface visual)</td>
      <td>Pedido de teste salva o campo no admin</td>
    </tr>
    <tr>
      <th scope="row">Elementor PRO + JetWooBuilder</th>
      <td>Médio (editor visual)</td>
      <td>Template de checkout renderiza no front-end</td>
    </tr>
  </tbody>
</table>

A escolha depende de quem mantém a loja. Quem não escreve código resolve com plugin; quem precisa de regra fina vai de hook. O <a href="https://full.services/woocommerce-tutorial/">tutorial de WooCommerce da FULL</a> cobre a instalação base.

---

## Como personalizar campos de checkout por código (hook)

Personalizar campos de checkout por código usa o filtro `woocommerce_checkout_fields`, que expõe os arrays `billing`, `shipping`, `account` e `order`. Em cerca de 30 linhas de PHP você remove, renomeia, reordena (via chave `priority`) e troca um campo de obrigatório para opcional. Segundo a <a href="https://developer.woocommerce.com/docs/cart-and-checkout-blocks/">WooCommerce Developer Docs</a>, o filtro continua válido no shortcode clássico `[woocommerce_checkout]`. O risco é claro: código solto no `functions.php` do tema some no próximo update.

A regra de ouro é onde o código mora. Editar o filtro direto no `functions.php` do tema mais a atualização do tema é igual a personalização perdida sem aviso. Coloque o snippet em um plugin de site (Code Snippets ou um plugin próprio) para que a edição sobreviva. Em <a href="https://full.services/glossario/functions-php/">functions.php</a> você entende por que esse arquivo é volátil. Os <a href="https://full.services/glossario/hooks-wordpress/">hooks do WordPress</a> são o mecanismo que torna tudo isso possível sem editar o core.

### Passo a passo: Personalizar campos de checkout por código

#### Passo 1: Crie o snippet em um plugin de site

<p class="wp-caption-text">Legenda: o filtro recebe o array de campos e devolve a versão editada, sem tocar no core do WooCommerce.</p>

Adicione `add_filter( 'woocommerce_checkout_fields', 'minha_funcao' )` em um plugin de site, nunca no tema. Dentro da função você manipula `$fields['billing']`, `$fields['shipping']` e `$fields['order']`. Salvar aqui garante que o update do tema não apague nada.

#### Passo 2: Remova e renomeie campos

Para remover o campo de empresa, use `unset( $fields['billing']['billing_company'] )`. Para renomear, ajuste a chave `label`. Cada `unset` tira um campo da tela e reduz o tempo de preenchimento, que gira em torno de 12 segundos por campo extra em formulários longos.

#### Passo 3: Reordene pela prioridade

Cada campo tem uma chave `priority` (10, 20, 30...). Defina `$fields['billing']['billing_phone']['priority'] = 25` para mover o telefone. Reordenar coloca os campos críticos no topo, onde o cliente decide se continua.

#### Passo 4: Valide o formato com woocommerce_checkout_process

Use o hook `woocommerce_checkout_process` com `wc_add_notice( ..., 'error' )` para barrar CPF ou CEP inválido. A validação roda antes de criar o pedido e devolve a mensagem na própria tela, sem recarregar o checkout inteiro.

#### Passo 5: Teste no Checkout Block e no clássico

Faça um pedido de teste nos dois modos. Se a loja usa o novo Checkout Block (Gutenberg), o filtro clássico pode não renderizar o campo, porque o bloco lê o Store API. Confirme onde seu checkout vive antes de declarar pronto.

---

## Como personalizar campos de checkout sem código (plugin)

Personalizar campos de checkout sem código é o caminho da maioria das lojas: um plugin como o Checkout Field Editor adiciona, remove e reordena campos por uma interface no `wp-admin`, sem escrever PHP. A versão gratuita no repositório oficial cobre os campos padrão; a PRO, em torno de US$ 49/ano, libera campos condicionais e tipos novos.

A gente vê no suporte da FULL que esse é o método que menos gera ticket de "sumiu tudo", justamente porque a configuração fica salva no banco, e não em arquivo de tema.

O ganho é não depender de desenvolvedor para uma troca simples. O ponto de atenção é o acúmulo: plugin de checkout com bloco de pagamento ativo mais tema antigo sem suporte aos Cart e Checkout Blocks é igual a campos que não renderizam. Para escolher, o guia de <a href="https://full.services/melhor-plugin-de-checkout-para-woocommerce/">melhor plugin de checkout para WooCommerce</a> compara os principais. Um checkout mais limpo costuma melhorar a <a href="https://full.services/glossario/taxa-de-conversao-wordpress/">taxa de conversão</a> da loja.

---

## Personalizar campos de checkout pelo Elementor PRO e JetWooBuilder

Personalizar campos de checkout no Elementor PRO usa o widget de Checkout (WooCommerce Builder), e o JetWooBuilder, da Crocoblock, estende isso com layouts de múltiplas colunas e campos condicionais. Você edita a tela de finalização visualmente, arrastando blocos, sem tocar em PHP. É o método preferido por quem já construiu a loja inteira no Elementor e quer o checkout com a mesma identidade visual do resto do site.

O custo entra aqui: o widget de Checkout exige o Elementor PRO (não existe na versão gratuita), e o JetWooBuilder é um produto à parte da Crocoblock. Em troca, você ganha controle de layout que nem plugin nem hook entregam sozinhos. A limitação honesta é que builder visual adiciona CSS e JavaScript, então em servidor fraco o checkout pode ficar mais pesado. Para detalhes do fluxo visual, veja <a href="https://full.services/como-usar-plugins-para-personalizar-o-checkout-woocommerce-no-elementor/">como personalizar o checkout WooCommerce no Elementor</a>.

---

## Erros comuns ao personalizar campos de checkout

Personalizar campos de checkout dá errado em três pontos previsíveis, e quase sempre é configuração, não bug. Remover o campo de CEP sem ajustar a zona de entrega quebra o cálculo de frete; o cliente chega no fim e não vê o valor. Esse trio aparece com frequência nos tickets da FULL.

Os outros dois são igualmente comuns. Tornar o telefone opcional sem avisar a transportadora gera pedido sem contato. Editar no tema, e não em plugin de site, apaga tudo no próximo update.

O caso mais traiçoeiro é o Checkout Block. Em lojas que migraram para o bloco do Gutenberg sem testar, os campos adicionados via `woocommerce_checkout_fields` somem, porque o bloco usa o Store API e não o template clássico. A saída é usar o filtro `woocommerce_blocks_checkout_block_registration` ou voltar ao shortcode `[woocommerce_checkout]` até o seu plugin suportar blocos. Quem remove campo de frete deve revisar o <a href="https://full.services/frete-gratis-no-woocommerce/">frete grátis no WooCommerce</a> para não cortar uma regra ativa.

---

## Ative o WooCommerce completo com a plataforma FULL

Personalizar campos de checkout fica mais simples quando os plugins certos já vêm ativados e atualizados na mesma plataforma. A gente vê no suporte da FULL que loja que centraliza licença e atualização abre menos ticket de incompatibilidade no checkout, porque não há versão desencontrada entre tema, builder e plugin de campos.

Na plataforma FULL, o plano PRO custa R$ 849/mês e inclui o bundle com Elementor PRO, Crocoblock (JetWooBuilder), WPForms e mais 13 produtos premium prontos para ativar em 1 clique. Distribuído pelos 10 sites do plano, o bundle sai por cerca de R$ 85 por site, abaixo do preço avulso de uma única licença anual da maioria desses plugins. Para uma loja que combina Elementor no checkout, plugin de campos e formulários, ter tudo no mesmo painel evita o conflito de versão que costuma derrubar a tela de finalização. Conheça os <a href="https://full.services/planos">planos da FULL</a>.

---

<h2 id="faq">Perguntas frequentes sobre personalizar campos de checkout</h2>

<details>
  <summary>Por que os campos personalizados do checkout somem depois de atualizar o tema?</summary>
  <p>Somem porque o código foi colocado no functions.php do tema, e o update sobrescreve esse arquivo. O filtro woocommerce_checkout_fields precisa morar em um plugin de site (como o Code Snippets) ou em um plugin próprio, que não é afetado pela atualização do tema. Essa é a causa número um de "minha personalização desapareceu" nos tickets de checkout.</p>
</details>

<details>
  <summary>É possível personalizar campos de checkout sem usar código nenhum?</summary>
  <p>Sim. Plugins como o Checkout Field Editor adicionam, removem e reordenam campos por uma interface no wp-admin, sem escrever PHP. A versão gratuita no repositório oficial cobre os campos padrão; a PRO, em torno de US$ 49 por ano, libera campos condicionais e tipos novos como data e upload. É o método recomendado para quem não tem desenvolvedor fixo na loja.</p>
</details>

<details>
  <summary>Qual a diferença entre editar o checkout por hook e por plugin?</summary>
  <p>O hook woocommerce_checkout_fields dá controle total e validação fina (CPF, regra condicional), mas exige PHP e disciplina de onde guardar o código. O plugin entrega interface visual e zero código, ao custo de menos flexibilidade e de uma dependência a mais. Para troca simples, o plugin vence; para regra de negócio específica, o hook é o caminho.</p>
</details>

<details>
  <summary>Quanto custa um plugin para personalizar campos de checkout?</summary>
  <p>A versão gratuita do Checkout Field Editor no repositório oficial custa R$ 0 e resolve a maioria dos casos. As versões PRO ficam entre US$ 49 e US$ 99 por ano por site. No bundle PRO da plataforma FULL, plugins premium como Crocoblock e WPForms saem por cerca de R$ 85 por site, em vez de licença avulsa de cada um. Comece pelo gratuito antes de pagar.</p>
</details>

<details>
  <summary>Como validar um campo de checkout obrigatório no WooCommerce?</summary>
  <p>Use o hook woocommerce_checkout_process com a função wc_add_notice marcando o erro. A validação roda no servidor antes de criar o pedido e devolve a mensagem na própria tela de checkout, sem recarregar tudo. Para CPF ou CEP, combine a regra com uma checagem de formato (regex) para barrar dado inválido antes de o pedido entrar.</p>
</details>

---

<aside aria-label="Metodologia dos Testes">
<h2 id="metodologia-dos-testes">Metodologia dos testes</h2>
<p>As observações deste tutorial vêm de checkouts WooCommerce 9.x testados entre <time datetime="2026-02">fevereiro</time> e <time datetime="2026-05">maio de 2026</time>, em WordPress 6.x com PHP 8.2, em servidores LiteSpeed e Nginx. Avaliamos os três métodos em lojas reais da base FULL, comparando o shortcode clássico e o novo Checkout Block do Gutenberg.</p>
<p>Os três métodos foram o filtro woocommerce_checkout_fields, o plugin Checkout Field Editor e o Elementor PRO com JetWooBuilder. Os casos de campo que some após o update e de frete quebrado por remoção de CEP refletem padrões recorrentes nos tickets de suporte da FULL, não números de proporção medidos, que a FULL não divulga.</p>
</aside>

---

## Próximos passos para um checkout mais enxuto

Personalizar campos de checkout é, no fim, uma decisão de prioridade: cada campo que fica precisa justificar o atrito que cria. Comece removendo o que não usa, reordene pelo que o cliente decide primeiro e valide só o essencial. Escolha um método e fique nele: hook para controle, plugin para velocidade, Elementor PRO para identidade visual. Teste sempre nos dois modos de checkout, clássico e bloco, antes de publicar. Para seguir aprendendo, o <a href="https://full.services/guias/crie-uma-loja-online-com-wordpress/">guia de loja online com WordPress da FULL</a> conecta checkout, frete e <a href="https://full.services/retencao-recuperacao-de-carrinho-woocommerce/">recuperação de carrinho</a> num fluxo só.
