Reordenar campos de checkout do WooCommerce 2024

Neste artigo, você aprenderá como a página de checkout do WooCommerce é construída e como reordenar os campos de checkout do WooCommerce. Embora o WooCommerce já seja muito intuitivo, cada negócio tem suas peculiaridades. Assim sendo, esta é uma habilidade extremamente poderosa, pois você pode modificar os campos de checkout de acordo com suas necessidades ou do cliente.

O que você precisa saber para reordenar os campos do checkout eficientemente

Seções do formulário de finalização de compra

Primeiramente, o formulário de campo de checkout é composto por 4 seções principais:

Billing: Esta seção compreende os campos necessários para os detalhes de faturamento do pedido, frequentemente utilizados por gateways de pagamento.

Shipping: Os campos de envio são semelhantes aos de faturamento e são projetados para capturar o endereço de entrega do comprador. O WooCommerce pode preencher automaticamente esses campos com base nos dados de faturamento.

Account: A seção de conta permite que os usuários existentes façam login em sua conta ou criem uma nova conta.

Order: Inclui informações adicionais (notas do pedido)

Cada uma dessas seções contém os campos de formulário necessários para fazer um pedido. Nos grupos de formulários de faturamento e envio, cada campo é ordenado por prioridade, começando em 10 e aumentando em 10 para cada campo. A lista de campos é mostrada abaixo com a prioridade atribuída a cada campo.

Nomes dos campos do checkout

Em segundo lugar, é importante conhecer o nome de cada um dos campos existentes e suas respectivas prioridades padrão. No código, mencionarei os campos da seção billing, mas a maioria deles também existe na seção shipping e basta trocar essas duas palavras para modificar o campo da seção apropriada. Veja a lista:

De acordo com a tabela acima, os campos em verde e amarelo são aqueles adicionados pelo plugin Brazilian Market on WooCommerce.

Por fim, você deveria saber onde faremos os ajustes. Os códigos que vou te ensinar devem ser colocados no arquivo functions.php do seu tema filho. Basta colocar na última linha e vai funcionar. Claro, o seu tema filho deve ser o tema ativo no seu site para surtir efeito.

Disto isto, programador, você está pronto para codificar. Preste atenção em como se faz:

Como reordenar os campos de checkout do WooCommerce

Para reordenar os campos de checkout do WooCommerce, você precisará usar o filtro woocommerce_checkout_fields. Esse filtro permite alterar as propriedades dos campos de checkout, incluindo sua ordem, ao modificar o atributo de prioridade.

Com o intuito de facilitar a didática, aqui está um exemplo simples de como você pode reordenar alguns dos campos de fatura (billing) e envio (shipping):

// Modificar CAMPOS DO CHECKOUT
function racar_modify_checkout_fields( $fields ) {
    $fields['billing']['billing_email']['priority'] = 25;

    // Lista de Billing fields
    // $fields['billing']['billing_company'];
    // $fields['billing']['billing_email'];
    // $fields['billing']['billing_phone'];
    // $fields['billing']['billing_state'];
    // $fields['billing']['billing_first_name'];
    // $fields['billing']['billing_last_name'];
    // $fields['billing']['billing_address_1'];
    // $fields['billing']['billing_address_2'];
    // $fields['billing']['billing_city'];
    // $fields['billing']['billing_postcode'];
    // $fields['billing']['billing_country'];

    // Campos adicionados pelo plugin Brazilian Market on WooCommerce
    // $fields['billing']['billing_birthdate'];
    // $fields['billing']['billing_cellphone'];
    // $fields['billing']['billing_number'];
    // $fields['billing']['billing_neighborhood'];
    // $fields['billing']['billing_rg'];
    // $fields['billing']['billing_cpf'];
    // $fields['billing']['billing_cnpj'];
    // $fields['billing']['billing_ie'];
    // $fields['billing']['billing_persontype'];

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'racar_modify_checkout_fields', PHP_INT_MAX, 1 );

Dado o exemplo de como colocar o e-mail como o primeiro campo do formulário, agora se quiser trocar outros campos, basta adicionar uma nova linha e colocar o devido nome do campo e sua prioridade. Lembre-se que é possível trocar os campos de shipping também, mas cada um dentro de sua seção.

Conclusão

Organizar os campos de checkout no WooCommerce pode melhorar a fluidez do processo de finalização de compra, tornando-o mais eficiente e personalizado para atender às necessidades do seu negócio e dos seus clientes. Portanto, ao aprender a manipular esses campos, você pode elevar consideravelmente a experiência do usuário e, possivelmente, aumentar as conversões ao reduzir atritos durante o checkout. Alterar as prioridades dos campos conforme a lógica do seu negócio e o fluxo dos clientes pode transformar a interação dos usuários com sua página de checkout. Lembre-se sempre de fazer backup do seu site antes de qualquer modificação no código! E visto que plugins podem dar problemas, preferivelmente, utilize a wp-cli para fazer o backup.