🚫 O índice de checkout do WooCommerce interfere com os clientes: 4 formas de remover a verificação

Porque é que a validação do código postal é uma barreira desnecessária

O WooCommerce exige o campo de código postal por defeito e valida-o. Mas a realidade é esta: dezenas de países em África, na América Central e na Oceânia não usam códigos postais. Um comprador do Quénia ou da Jamaica insere dígitos aleatórios, recebe um erro e vai-se embora.

Campos extra e erros na página de finalização da compra prejudicam diretamente a conversão. De acordo com o Baymard Institute, 17% dos compradores nos EUA abandonaram uma finalização de compra especificamente por ser demasiado longa ou complicada. Remover um ou dois campos desnecessários é a forma mais barata de aumentar as vendas sem um orçamento de publicidade.

A seguir, quatro formas de desativar a validação: desde remover completamente o campo até simplesmente renomeá-lo. Escolha com base no seu público.

💡 Visão geral rápida:

• Remover completamente o campo de código postal através de unset(), para lojas que não precisam dele de todo
• Tornar o código postal opcional, para lojas com um público geográfico misto
• Remover campos desnecessários do formulário de faturação, se o código postal for apenas parte do problema
• Alterar o rótulo do campo para algo que o utilizador compreenda, intervenção mínima
• Considerar plugins se preferir não mexer em código

Método 1: Remover completamente o campo de código postal da finalização da compra

O método mais radical e limpo. O hook woocommerce_checkout_fields dá controlo total sobre todos os campos de finalização da compra: pegue no array, retire o billing_postcode e devolva-o.

Adicione o código ao functions.php do seu tema filho:

1
/**
2
 * Remove the postal code field (billing_postcode) from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_postcode_checkout' );
5
function quadlayers_remove_billing_postcode_checkout( $fields ) {
6
    unset( $fields['billing']['billing_postcode'] );
7
    return $fields;
8
}

O que está a acontecer aqui. O hook woocommerce_checkout_fields recebe o array completo de campos de finalização da compra: faturação, envio e encomenda. A função unset() corta a chave específica billing_postcode da secção billing. O array é devolvido ao WooCommerce sem o campo de código postal, pelo que este desaparece tanto do formulário como da validação.

Mas se o seu público for misto e alguns clientes precisarem de código postal, veja o método 2.

Método 2: Tornar o código postal opcional

Em vez de remover o campo, pode simplesmente desmarcar a flag de obrigatório. O campo permanece na página, mas o comprador pode ignorá-lo sem erro.

Aqui usamos o filtro woocommerce_default_address_fields, que trata das configurações padrão para todos os campos de endereço:

1
/**
2
 * Make the postal code field optional.
3
 */
4
add_filter( 'woocommerce_default_address_fields', 'quadlayers_optional_postcode_checkout' );
5
function quadlayers_optional_postcode_checkout( $p_fields ) {
6
    $p_fields['postcode']['required'] = false;
7
    return $p_fields;
8
}

A diferença em relação ao primeiro método está no hook. O woocommerce_default_address_fields funciona um nível abaixo: define as propriedades dos próprios campos (rótulo, placeholder, obrigatório) antes de estes chegarem às secções de faturação e envio. É por isso que a chave aqui é simplesmente postcode, sem o prefixo billing_.

Adequado para lojas que vendem para países com e sem códigos postais.

Método 3: Remover campos desnecessários do formulário de faturação

Muitas vezes, o problema é mais amplo do que apenas o código postal. Os campos empresa, morada_2, cidade e estado também nem sempre são necessários: cada um acrescenta fricção à finalização da compra.

O mesmo hook woocommerce_checkout_fields remove qualquer campo pelo seu identificador. Aqui está a lista completa de chaves disponíveis para a secção de faturação:

1
unset( $fields['billing']['billing_company'] );
2
unset( $fields['billing']['billing_address_2'] );
3
unset( $fields['billing']['billing_city'] );
4
unset( $fields['billing']['billing_state'] );
5
unset( $fields['billing']['billing_phone'] );

Os nomes são autoexplicativos. O prefixo billing_ indica que o campo pertence ao formulário de faturação. Por exemplo, para remover company e address_2 juntamente com o código postal:

1
/**
2
 * Remove company, address_2 and postal code from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_fields' );
5
function quadlayers_remove_billing_fields( $fields ) {
6
    unset( $fields['billing']['billing_company'] );
7
    unset( $fields['billing']['billing_address_2'] );
8
    unset( $fields['billing']['billing_postcode'] );
9
    return $fields;
10
}

Várias chamadas a unset() coexistem pacificamente dentro de uma única função: basta listar as chaves que pretende ocultar.

Método 4: Renomear um campo para algo que o utilizador compreenda

Intervenção mínima com efeito máximo. Não mexe na validação, apenas altera o rótulo enigmático «Código Postal / ZIP» para algo que o seu público entenda. Por exemplo, «Distrito» ou «Código postal (se tiver)».

Usamos o hook gettext, o mesmo que o WordPress e o WooCommerce usam para traduzir a interface:

1
/**
2
 * Change checkout field labels via gettext.
3
 */
4
add_filter( 'gettext', 'quadlayers_billing_field_strings', 20, 3 );
5
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
6
    switch ( $translated_text ) {
7
        case 'Postcode / ZIP':
8
            $translated_text = __( 'Area code', 'woocommerce' );
9
            break;
10
    }
11
    return $translated_text;
12
}

Se quiser renomear vários campos, adicione casos dentro do switch:

1
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
2
    switch ( $translated_text ) {
3
        case 'Billing details':
4
            $translated_text = __( 'Order information', 'woocommerce' );
5
            break;
6
        case 'Ship to a different address?':
7
            $translated_text = __( 'Send to other location please', 'woocommerce' );
8
            break;
9
        case 'Company name':
10
            $translated_text = __( 'Company', 'woocommerce' );
11
            break;
12
        case 'Postcode / ZIP':
13
            $translated_text = __( 'Area code', 'woocommerce' );
14
            break;
15
    }
16
    return $translated_text;
17
}

Na imagem acima, o resultado da combinação de abordagens: vários campos estão ocultos, o campo de código postal foi renomeado para «Código de área» e tornado opcional, os títulos das secções de faturação e envio foram substituídos por títulos personalizados. O checkout ficou mais curto e claro, sem plugins.

Plugins para gerir campos de checkout

Se não quiser mexer no functions.php, existem ferramentas prontas a usar. Vejamos dois plugins gratuitos que resolvem o problema sem uma única linha de código.

Checkout field manager for WooCommerce

Checkout Field Manager, um dos editores de campos de checkout mais populares. Permite adicionar, remover e reordenar campos nas secções de Faturação, Envio e Adicionais, tudo através de uma interface visual.

O plugin é gratuito; a versão básica cobre os cenários principais: ocultar um campo, torná-lo opcional, renomeá-lo. Para lógica condicional (mostrar um campo apenas para um país específico) e tipos de campo adicionais, existe uma versão premium.

Direct Checkout for WooCommerce

Direct Checkout for WooCommerce (anteriormente chamado «WooCommerce Direct Checkout») resolve um problema mais amplo: simplifica todo o processo de checkout. Além de remover campos, pode: saltar o carrinho e levar o cliente diretamente para o checkout, alterar o texto do botão «Adicionar ao carrinho», adicionar AJAX add-to-cart nas páginas de produto.

Ambos os plugins são atualizados regularmente e compatíveis com as versões atuais do WordPress e WooCommerce.

⁉️🤔 Perguntas frequentes

Posso desativar a validação apenas para determinados países?

Sim. Pode associar a verificação a WC()->customer->get_billing_country() dentro do filtro woocommerce_checkout_fields e aplicar unset() ou required = false apenas para a lista de países sem códigos postais. Dessa forma, os compradores da Alemanha ou dos EUA continuarão a ver um campo obrigatório, enquanto os clientes do Quénia não.

O envio pode falhar após desativar a validação do código postal?

Depende do serviço de envio. Serviços postais como USPS ou Royal Mail usam o código postal para calcular as tarifas; para eles, é melhor manter o campo obrigatório ou, pelo menos, visível. Se vende produtos digitais ou usa entrega por estafeta dentro de uma cidade, pode remover o código postal com segurança. Teste o cálculo de custos para cada zona de envio após fazer alterações.

O código não funciona; o campo de código postal ainda aparece. O que está errado?

Três causas comuns. Primeira: cache. Limpe a cache do seu site e do navegador; após editar o functions.php, abra o checkout em modo anónimo. Segunda: outro plugin ou tema substitui o campo depois do seu filtro. Tente aumentar a prioridade do hook: add_filter( 'woocommerce_checkout_fields', '...', 99 ). Terceira: está a editar o functions.php errado. O código deve estar no ficheiro do tema (filho) ativo.

Como removo o campo de código postal sem editar o functions.php?

Instale o Checkout field manager for WooCommerce; ele permite desativar quaisquer campos através do painel de administração. Ou use o plugin Code Snippets: cole o código PHP do método 1 como um snippet e ative-o. Ambas as opções são mais seguras do que editar diretamente o functions.php e não se perdem quando o tema é atualizado.

E se a validação do código postal estiver desativada, mas o WooCommerce ainda apresentar um erro?

Muito provavelmente, o erro não é gerado pelo núcleo do WooCommerce, mas por um plugin de terceiros, como um plugin de serviço de envio ou um validador de moradas. Desative os plugins de envio e verificação de moradas um a um para encontrar o culpado. Verifique também se a validação está definida ao nível do JavaScript no tema; por vezes, os programadores duplicam a verificação no front-end.

Um exemplo prático do vídeo

Veja um exemplo ao vivo de configuração de campos de checkout, do código ao resultado no front-end:

Código ou plugin: qual escolher?

Se só precisa de remover um ou dois campos e se sente à vontade com o editor de temas, quatro linhas de PHP do método 1 ou 2 são suficientes. É uma solução leve e não acrescenta código extra ao site.

Se tem muitos campos para configurar, faz experiências frequentes com o checkout ou prefere não mexer no functions.php, opte pelo Checkout Field Manager for WooCommerce. É gratuito e dá-lhe controlo visual sobre todos os campos sem o risco de partir o site com um erro de digitação no código.

Para uma otimização abrangente do checkout (ignorar o carrinho, botões AJAX, etiquetas personalizadas), o Direct Checkout for WooCommerce cobre tudo num único plugin.

A regra de ouro: após qualquer alteração, faça uma encomenda de teste do início ao fim. Cinco minutos de testes poupam horas a resolver queixas de clientes reais.