Como adicionar um campo extra no formulário de checkout do WooCommerce

Publicados: 2020-09-21

Como adicionar um campo extra no formulário de checkout do WooCommerce Se você estiver executando uma loja WooCommerce, já sabe sobre o significado de uma página de checkout. No entanto, há momentos em que você precisa adicionar um campo extra no formulário de checkout do WooCommerce ou outros campos de checkout personalizados em uma página de checkout de acordo com os requisitos do seu projeto. Isso pode ser um trabalho pesado para alguns donos de lojas WooCommerce e é por isso que decidi criar um breve tutorial sobre como você pode adicionar um campo extra no formulário de checkout do WooCommerce.

Página de checkout do WooCommerce

Em geral, a página de checkout é um termo de comércio eletrônico que se refere a uma página mostrada a um cliente durante o processo sistemático de checkout, na última etapa antes de fazer a compra. Existem várias maneiras de melhorar as conversões da página de checkout, mas uma das maneiras é adicionar um campo extra no formulário de checkout do WooCommerce relacionado ao seu produto específico, bem como remover todos os outros campos desnecessários da página de checkout.

Esta página contém campos que os clientes precisam preencher. Vale ressaltar também que esta é a página mais importante tanto para o vendedor quanto para o cliente, pois o cliente precisa fornecer informações importantes como endereços, detalhes de cobrança, forma de pagamento, que ajudarão o vendedor a entregar o produto ao cliente . página de checkout padrão

Quando houver erros nesta página, nenhum cliente poderá efetuar qualquer compra. Isso afetaria muito o desempenho de sua loja, pois você não poderá fazer nenhuma venda.

Se você estiver usando o WooCommerce para alimentar sua loja online, também receberá sua página de checkout. No entanto, se você estiver familiarizado com o WooCommerce, sabe que ele não oferece a oportunidade de personalizar sua página de checkout nas configurações.

Adicionar campo extra no formulário de checkout do WooCommerce

Existem muitas maneiras de modificar a página de checkout de suas lojas WooCommerce, como usar um plug-in de terceiros, extensões WooCommerce ou desenvolvimento personalizado.

Como mencionei anteriormente, o campo de checkout personalizado do WooCommerce é importante na montagem para obter mais dados dos compradores antes de concluir um pedido.

Há momentos em que você precisa de algumas informações extras de seus clientes e precisa de um campo extra para fazer isso.

Agora que você conhece o básico, vamos mergulhar fundo no tutorial. Para adicionar um campo personalizado à página de checkout, usaremos duas abordagens:

  • Usando um plug-in.
  • Criando um código personalizado.

a) Etapas para adicionar um campo extra à sua página de checkout do WooCommerce usando código

Esta solução é para pessoas que sabem codificar como desenvolvedores. Esse código personalizado ajudará você a adicionar o campo personalizado à página de checkout usando algumas etapas simples.

Aqui estão os passos simples que você precisa seguir:

  1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
  2. No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema onde adicionaremos a função que adicionará um campo extra à página de checkout no WooCommerce .
  3. Adicione o seguinte código ao arquivo php :
 /**

* Adicionar campo personalizado à página de checkout

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

função custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' . __('Novo título') . '</h2>';

woocommerce_form_field('custom_field_name', array(

'tipo' => 'texto',

'classe' => array(

'my-field-class form-row-wide'

),

'label' => __('Campo Adicional Personalizado'),

'placeholder' => __('Novo campo personalizado'),

),

$checkout->get_value('custom_field_name'));

echo '</div>';

}
  1. Para ver o resultado , você precisa atualizar a página de checkout e deverá ver isto: campo personalizado no checkout
  2. No entanto, é importante observar que precisamos validar os dados do campo personalizado. para fazer isso, basta adicionar o seguinte código ao arquivo functions.php :
 /**

* Processo de checkout

*/

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

função customized_checkout_field_process()

{

// Mostra uma mensagem de erro se o campo não estiver definido.

if (!$_POST['customised_field_name']) wc_add_notice(__('Digite o valor!') , 'error');

}

Se não houver entrada no campo personalizado, haverá um erro e este será o resultado : nenhuma entrada no campo personalizado

  1. Agora que adicionamos o campo de checkout personalizado e o validamos, vamos agora confirmar se os detalhes inseridos no campo personalizado estão sendo salvos ou não . Isso pode ser feito usando o seguinte código que será adicionado ao arquivo functions.php :
 /**

* Atualize o valor fornecido no campo personalizado

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

função custom_checkout_field_update_order_meta($order_id)

{

if (!empty($_POST['customised_field_name'])) {

update_post_meta($order_id, 'Algum campo',sanitize_text_field($_POST['customised_field_name']));

}

}

Como o Código Funciona.

Este código funciona em três etapas simples. No primeiro trecho de código, criei o campo personalizado com o título. Em seguida, o segundo snippet serve para validar se há uma entrada no campo personalizado.

O terceiro trecho de código é usado para confirmar se os detalhes inseridos no campo personalizado pelo cliente estão sendo salvos ou não. Também é importante observar que esses trechos de código devem ser adicionados ao arquivo functions.php de sua loja WooCommerce.

b) Etapas para adicionar um campo extra à sua página de checkout do WooCommerce usando um plug-in

Esta solução é para usuários do WordPress que não estão familiarizados com codificação. Esta solução envolve o uso do WooCommerce Checkout Manager Plugin. Gerenciador de checkout WooCommerce

Darei a você um guia sistemático detalhado que o ajudará a baixar o plug-in e usá-lo para adicionar um campo extra na página de checkout.

Aqui estão os passos que você precisa seguir:

  1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
  2. Então, vamos instalar o plugin que indicamos anteriormente. Se você baixou usando o link acima, basta navegar até Plugins > Adicionar Novo. Depois disso, clique em Upload Plugin e, em seguida, procure o arquivo baixado conforme mostrado abaixo: instalando o plug-in
  3. Para baixá-lo diretamente no Painel Administrativo, basta navegar até Plugins > Adicionar Novo. Depois disso, você precisará fazer uma pesquisa por palavra-chave para o plugin 'WooCommerce Checkout Manager'. Você precisa instalá -lo e ativá -lo conforme mostrado abaixo: Instalação do WooCommerce Checkout Manager
  4. Para criar novos campos, acesse o Painel do WordPress e clique em WooCommerce > Configurações . Em seguida, clique na guia Checkout e clique na guia Adicional . Clique em Adicionar novo campo como mostrado abaixo: adicionando novo campo usando plugin
  5. Uma nova janela aparecerá e você precisará adicionar os detalhes relevantes. Lembre-se de salvar todas as alterações feitas: usando o plug-in
  6. Para ver o resultado, atualize a página de checkout e você verá o novo campo de checkout: campo personalizado no checkout

Conclusão

Neste breve tutorial, mostrei como adicionar um novo campo à página de checkout. Tenho certeza que agora você sabe como adicionar um campo extra e não é muito difícil. Eu compartilhei duas soluções. Um envolve o uso de um código PHP que irá adicionar o campo extra e o outro é com um plugin. O plugin tem outros recursos adicionais que você pode ver também, e é uma solução para os não tão experientes em tecnologia. No entanto, você pode alterar o nome dos campos dependendo de seus requisitos.

Artigos semelhantes

  1. Como pular o carrinho e redirecionar para a página de checkout WooCommerce
  2. Como integrar o Stripe ao WooCommerce
  3. Como remover a barra lateral da página do produto em temas WooCommerce
  4. Como adicionar ícones de pagamento WooCommerce no rodapé [HTML]
  5. Como obter métodos de pagamento no WooCommerce » Exemplo de código
  6. Como ocultar produtos sem preço no WooCommerce
  7. Como remover os detalhes de cobrança do WooCommerce Checkout
  8. Ocultar ou remover o campo de quantidade da página do produto WooCommerce
  9. Como ocultar o campo de código de cupom WooCommerce
  10. Como renomear mensagens de status de pedidos no WooCommerce
  11. Como remover a classificação de produtos padrão WooCommerce
  12. Como classificar as categorias do WooCommerce para uma melhor experiência do usuário
  13. Como adicionar a página de checkout do WooCommerce da imagem do produto
  14. Como ocultar o botão Adicionar ao carrinho no WooCommerce
  15. Como ocultar o produto WooCommerce dos resultados da pesquisa
  16. Como ocultar todos os produtos da página da loja no WooCommerce
  17. Como desativar o método de pagamento para uma categoria específica
  18. Como verificar se o plugin está ativo no WordPress [3 MANEIRAS]
  19. Como usar os atributos do produto WooCommerce passo a passo [Guia Completo]
  20. Como redimensionar imagens de produtos WooCommerce
  21. Como adicionar categorias aos produtos WooCommerce
  22. Como criar minha página de conta no WooCommerce
  23. Como criar um aviso de administração do WooCommerce para o plug-in – Desenvolvimento WooCommerce
  24. Como encontrar rapidamente o ID do seu produto no WooCommerce
  25. Como alterar o texto do botão de checkout no WooCommerce [Place Order]