Como reordenar os campos de checkout do WooCommerce

Deseja reordenar os campos de checkout do WooCommerce em sua loja online? Mostraremos todas as melhores maneiras de reordenar os campos de checkout neste tutorial.

O WooCommerce permite reordenar e reorganizar vários elementos em seu site de comércio eletrônico para melhorar as taxas de conversão. Fora deles, os campos de checkout também podem ser reorganizados para atender às necessidades do seu site e dos clientes.

Mas antes de seguirmos as etapas, vamos ver por que você pode precisar alterá-las.

Por que alterar a Ordem dos Campos de Checkout?

Quando você instala o WooCommerce em sua loja online, existem algumas páginas essenciais que o plugin cria por padrão. Eles incluem o carrinho, a loja, minha conta, a página de checkout e assim por diante. Mas quando se trata da página de checkout, os campos padrão podem não ser aplicáveis a todos os tipos de site de comércio eletrônico.

Dependendo do seu site e clientes, pode ser necessário reordenar os campos de checkout do WooCommerce de tempos em tempos. Por exemplo, na página de checkout padrão, o cliente precisa inserir o primeiro nome seguido do sobrenome. Mas, em alguns casos, você pode achar que inserir o sobrenome no início ou perguntar primeiro o endereço de cobrança do cliente pode ser mais apropriado.

Portanto, se você quiser personalizar esses campos com base em situações semelhantes, precisará reordená-los.

Como reordenar os campos de checkout do WooCommerce?

Você pode reordenar os campos de checkout do WooCommerce usando 2 maneiras principais no WordPress:

• Com plug-ins
• Programaticamente

Vamos passar por cada etapa em detalhes para este guia. No entanto, certifique-se de ter configurado corretamente o WooCommerce para o seu site e use um dos temas compatíveis do WooCommerce antes de começarmos.

Reordenar campos de checkout do WooCommerce com plugins

Os plugins podem ajudar muito a aumentar a funcionalidade do seu site. Da mesma forma, uma das maneiras mais fáceis de reordenar os campos do WooCommerce é usando um plugin. Tudo o que você precisa fazer é instalar o plugin no seu site WordPress e reorganizar os campos de checkout através dele.

Existem muitos plugins de checkout do WooCommerce que você pode usar para personalizar sua página de checkout. Mas, apenas alguns oferecem a opção de reordenar os campos de checkout no WooCommerce.

Para este tutorial, usaremos o plug-in Checkout Manager for WooCommerce , pois é muito fácil de usar. É também um dos melhores plugins para personalizar a página de checkout e você pode até usá-lo para reordenar os campos de checkout.

Mas para começar a usar o plugin, você precisa instalá-lo e ativá-lo.

1. Instale e ative o plug-in

Para instalar o plug-in, vá para Plugins > Adicionar novo no painel do WordPress e pesquise as palavras-chave do plug-in. Depois de encontrar o plug-in, clique em Instalar agora .

Após a conclusão da instalação, ative o plugin.

Você também pode instalar o plug-in manualmente se quiser usar um plug-in premium ou um plug-in que não esteja incluído no repositório do WordPress. O plug-in precisa ser baixado do mercado e carregado no seu site. Dê uma olhada em nosso guia para instalar um plugin WordPress manualmente para mais informações.

2. Reordene os campos de checkout do WooCommerce nas opções do plug-in

Depois que o plug-in for ativado, você poderá começar a usá-lo para reordenar os campos de checkout do WooCommerce. Basta acessar WooCommerce > Configurações no painel do WordPress e abrir a guia Checkout .

Uma página de checkout geralmente inclui detalhes de cobrança e envio. Reordenaremos os campos de faturamento primeiro. Portanto, selecione a opção Faturamento na guia Checkout. Aqui, você poderá ver todos os campos para os detalhes de cobrança.

Agora, tudo o que você precisa fazer é arrastar e soltar para reordenar os campos dos detalhes de cobrança. Basta arrastar os campos e soltá-los nas posições em que deseja colocá-los na página de checkout. Você também pode usar as setas para cima e para baixo para deslocar os campos para a posição desejada.

Além disso, você também tem uma opção de posição para cada campo. Os campos podem ser colocados no lado esquerdo ou direito da tela ou com uma área de campo ampla. Os campos podem até ser ocultados se for necessário ativando o botão de alternância na coluna Desativado.

Depois de reordenar todos os campos de checkout da sua loja WooCommerce, clique em Salvar alterações . Ao recarregar a página de checkout, você poderá ver os campos recém-ordenados.

Da mesma forma, você também pode reordenar os campos de detalhes de envio. Basta selecionar a opção de envio na guia Checkout e reordenar os campos novamente. Depois de reorganizar todos os campos necessários, você também poderá ver que eles foram reordenados na página de checkout do frontend.

Reordenar os campos de checkout do WooCommerce programaticamente

Você também pode reordenar os campos de checkout do WooCommerce usando snippets de código se não quiser adicionar plug-ins adicionais ao seu site. Mas essa abordagem é adequada para você somente se você tiver conhecimento avançado em programação.

Além disso, os trechos de código são adicionados no arquivo functions.php do seu site e você pode perdê-los ao atualizar seu tema WordPress. Portanto, você deve criar um tema filho para adicionar os snippets. Se precisar de ajuda com isso, você pode até usar um dos melhores plugins de tema filho para WordPress para criar um.

No entanto, também recomendamos que você faça backup do seu site WordPress antes de adicionar os trechos de código. O arquivo functions.php é um dos arquivos principais do seu site e quaisquer alterações indesejadas nele podem resultar em mais problemas. Agora, vamos continuar com o processo.

1. Acesse o arquivo functions.php no Editor de Temas

Você precisará adicionar os trechos de código no arquivo functions.php do editor de temas. Para acessá-lo, vá para Aparência > Editor de Temas no painel do WordPress. Em seguida, selecione o arquivo functions.php do lado direito da tela nos arquivos do tema.

Agora, você pode começar a adicionar os snippets de código depois de rolar até a parte inferior do editor e atualizar o arquivo . Usamos o tema Divi para este tutorial. Portanto, pode parecer um pouco diferente do seu editor, dependendo do tema que você usa.

2. Adicione os trechos de código

Há vários trechos de código que você pode adicionar ao seu site para reordenar os campos de checkout do WooCommerce. Mas primeiro, você precisa entender que os campos são divididos em 4 grupos:

• Endereço de cobrança - cobrança
• Endereço de entrega - envio
• Login da conta - conta
• Informações Adicionais – Encomenda

Além disso, cada um dos campos desses grupos tem sua prioridade específica. Você também precisa saber a prioridade deles se desejar reordenar os campos.

Você pode encontrar os campos na lista a seguir abaixo. O número representado após os campos é sua prioridade.

• Cobrança
  • billing_first_name – 10
  • billing_last_name – 20
  • billing_company – 30
  • billing_address_1 – 40
  • billing_address_2 – 50
  • billing_city – 60
  • billing_postcode – 70
  • billing_country – 80
  • billing_state – 90
  • billing_email – 100
  • billing_phone – 110
• Envio
  • shipping_first_name – 10
  • shipping_last_name – 20
  • shipping_company – 30
  • shipping_address_1 – 40
  • shipping_address_2 – 50
  • shipping_city – 60
  • shipping_postcode – 70
  • shipping_country – 80
  • shipping_state – 90
• Conta
  • account_password (sem prioridade)
• Pedido
  • order_comments (sem prioridade)

Agora, vejamos alguns exemplos:

2.1. Mover um campo para o topo

Se você quiser mover um campo de checkout para exibi-lo na parte superior ou na primeira linha, use o seguinte trecho de código.

 add_filter('woocommerce_checkout_fields', 'quadlayers_email_top');

function quadlayers_email_top($checkout_fields) {
$checkout_fields['billing']['billing_email']['priority'] = 5;
return $checkout_fields;
}

Por padrão, o primeiro nome tem a prioridade mais alta com 10. Portanto, se você quiser reordenar um campo para o topo, apenas certifique-se de que a prioridade do campo seja menor que 10 .

No nosso caso, a prioridade do campo de e-mail é 5. Por isso, ele é colocado no topo do campo de checkout.

2.2. Mover um campo para outro grupo

Usar o snippet de código para reordenar o campo de checkout do WooCommerce não se limita apenas a mover um campo para o topo. Você também pode modificar ou criar mais trechos de código para mover um campo para outro grupo.

Por exemplo, vamos considerar o seguinte trecho:

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_billing_email_another_group' );
function quadlayers_billing_email_another_group( $checkout_fields ){
// 1. Atribuímos um array de campo a outro grupo aqui
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Remova um campo de um local anterior
unset( $checkout_fields['billing']['billing_email']);
return $checkout_fields;
}

Como você pode ver, o e-mail de cobrança foi movido para o grupo de informações adicionais. Da mesma forma, você pode alterar o código de acordo com as necessidades do seu site e usá-lo para mover campos em diferentes grupos também.

Se você precisar de mais ajuda, até o WooCommerce forneceu um guia detalhado para editar os campos de checkout usando códigos. Basta clicar aqui para visualizá-lo.

Bônus: Habilite o Checkout Direto no WooCommerce

Como agora você está familiarizado com o processo de reordenar os campos de checkout do WooCommerce, pode ser melhor encurtar o processo de checkout do seu site também. E se você quiser simplificar o processo, pular a página do carrinho é uma das melhores práticas. Dessa forma, os clientes podem ser redirecionados diretamente para a página de checkout se quiserem comprar apenas alguns produtos.

Para habilitar o checkout direto, usaremos o plugin Direct Checkout for WooCommerce . É um plugin simples que permite que seus clientes pulem a página do carrinho e os redirecionem para a página de checkout. Mas para começar a usar o plugin, você precisa instalá-lo e ativá-lo primeiro.

Então, vá para Plugins > Adicionar Novo no seu painel do WordPress mais uma vez e procure o plugin. Em seguida, clique em Instalar agora e ative o plug-in assim que a instalação estiver concluída.

Agora, você precisa ajustar algumas configurações padrão do WooCommerce. Eles podem ser encontrados em WooCommerce > Configurações na guia Produtos do seu painel do WordPress. Aqui, selecione a opção Geral e você poderá ver as opções gerais dos produtos WooCommerce.

Em seguida, navegue até o comportamento de adicionar ao carrinho e verifique as duas opções para que elas não interfiram nas configurações do plug-in.

Depois disso, abra a guia Checkout direto e selecione a opção Geral aqui também. Agora, defina o redirecionamento Adicionado ao carrinho como Checkout no menu suspenso. Por fim, salve as alterações .

É isso, os clientes serão redirecionados para a página de checkout em vez da página do carrinho em seu site. Também temos um guia detalhado para pular a página do carrinho se precisar de mais informações.

Conclusão

Estas são as várias maneiras pelas quais você pode reordenar os campos de checkout do WooCommerce em seu site. É uma personalização muito boa que você pode aplicar na sua página de checkout para a satisfação de seus clientes. E dependendo do seu site, pode ser mais fácil para você também.

Para resumir , analisamos as duas melhores maneiras de reordenar os campos de checkout. Eles são:

• Usando um plug-in
• Programaticamente

Usar um plugin é uma das maneiras mais rápidas de reordenar os campos. Você só precisa ajustar algumas opções do seu painel WooCommerce e reordenar os campos. No entanto, se você quiser uma abordagem mais avançada e tiver conhecimento técnico, também poderá reordená-los usando trechos de código.

Além disso, também incluímos um pequeno tutorial para simplificar o processo de checkout pulando a página do carrinho. Se você deseja melhorar ainda mais sua página de checkout, também temos guias detalhados para otimizar o checkout do WooCommerce, criar checkout de uma página, alterar o texto do checkout e assim por diante.

Esperamos que este tutorial tenha sido útil para você. Aqui estão mais alguns artigos que podem ser interessantes para você:

• Como alterar as mensagens de erro do WooCommerce Checkout
• Melhores plugins de checkout de uma página do WooCommerce (gratuitos e pagos)
• Como adicionar campos condicionais ao checkout do WooCommerce

Então, você pode reordenar os campos de checkout agora? Você teve algum problema? Por favor deixe nos saber nos comentarios!