Como adicionar campos no formulário de registro WooCommerce

Publicados: 2021-04-20

Você está procurando uma maneira de adicionar campos de formulário de registro WooCommerce? Neste tutorial, mostrarei como adicionar campos personalizados ao formulário de registro do WooCommerce para solicitar mais informações aos clientes antes do registro em sua loja WooCommerce.

O WooCommerce continua a ser popular entre a maioria dos donos de lojas porque é flexível para personalização. Você pode usar plugins ou código personalizado para adicionar mais funcionalidades.

Como adicionar campos no formulário de registro WooCommerce

Neste post, você verá como pode usar scripts PHP personalizados para adicionar campos de formulário de registro do WooCommerce. Recomendamos a criação de um tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização.

Antes de começarmos, precisamos ter certeza de que os formulários de registro do WooCommerce estão ativados na página de login da conta.

Para isso, acesse WooCommerce > Configurações > Contas e marque Habilitar o registro do cliente na página “ Minha conta ” conforme mostrado abaixo: habilitar registro

Isso garantirá que o formulário de registro do WooCommerce seja exibido no front-end.

Etapas para adicionar campos no formulário de registro do WooCommerce

Nesta seção, adicionaremos mais campos a essa estrutura utilizando as ações a seguir. Incluiremos campos como nome, sobrenome e número de celular.

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

Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
No menu Dashboard, clique em Appearance Menu > Theme Editor Menu. Ao abrir a página do Editor de Temas, procure o arquivo de funções do tema onde adicionaremos a função que adicionará campos no formulário de cadastro.
Adicione o seguinte código ao arquivo functions.php:

 function njengah_extra_register_fields() {?>

       <p class="form-row form-row-wide">

       <label for="reg_billing_phone"><?php _e( 'Telefone', 'woocommerce' ); ?></label>

       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />

       </p>

       <p class="form-row form-row-first">

       <label for="reg_billing_first_name"><?php _e( 'Primeiro nome', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST[' billing_first_name']); ?>" />

       </p>

       <p class="form-row form-row-last">

       <label for="reg_billing_last_name"><?php _e( 'Sobrenome', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST[' billing_last_name']); ?>" />

       </p>

       <div class="clear"></div>

       <?php

 }

 add_action('woocommerce_register_form_start', 'njengah_extra_register_fields');

Este é o resultado quando você atualiza a página:

Os campos do formulário de registro são os mesmos do endereço de cobrança.

Incluímos o prefixo “billing_” antes do nome do campo.

Aqui estão os campos válidos do formulário WooCommerce que podem ser adicionados ao formulário de registro e podem ser associados a um endereço de cobrança:

faturamento_first_name
cobrança_sobrenome
faturamento_empresa
Endereço de cobrança 1
faturamento_endereço_2
cidade_cobrança
cobrança_postal
País de faturamento
Estado de faturamento
cobrança_e-mail
faturamento_telefone

Agora que os formulários foram criados, precisamos validá-los usando o seguinte código que deve ser inserido no arquivo functions.php:

 /**

* campos de cadastro Validando.

*/

function njengah_validate_extra_register_fields( $username, $email, $validation_errors ) {




      if ( isset( $_POST['billing_first_name'] ) && vazio( $_POST['billing_first_name'] ) ) {




             $validation_errors->add( 'billing_first_name_error', __( '<strong>Erro</strong>: Primeiro nome é obrigatório!', 'woocommerce' ) );

      }

      if ( isset( $_POST['billing_last_name'] ) && vazio( $_POST['billing_last_name'] ) ) {




             $validation_errors->add( 'billing_last_name_error', __( '<strong>Erro</strong>: Sobrenome é obrigatório!.', 'woocommerce' ) );




      }

         return $validation_errors;

}




add_action( 'woocommerce_register_post', 'njengah_validate_extra_register_fields', 10, 3 );

A última etapa é salvar esses valores no banco de dados adicionando o seguinte código no arquivo fucntions.php:

 /**

* Abaixo do código salve os campos extras.

*/

function njengah_save_extra_register_fields( $customer_id) {

    if ( isset( $_POST['billing_phone'] ) ) {

                 // Entrada de telefone arquivada que é usada no WooCommerce

                 update_user_meta( $customer_id, 'billing_phone', repair_text_field( $_POST['billing_phone']) );

          }

      if ( isset( $_POST['billing_first_name'] ) ) {

             //Campo de nome que é por padrão

             update_user_meta( $customer_id, 'first_name', repair_text_field( $_POST['billing_first_name'] ) );

             // Campo de nome que é usado no WooCommerce

             update_user_meta( $customer_id, 'billing_first_name', higieniza_text_field( $_POST['billing_first_name'] ) );

      }

      if ( isset( $_POST['billing_last_name'] ) ) {

             // Campo de sobrenome que é por padrão

             update_user_meta( $customer_id, 'last_name', repair_text_field( $_POST['billing_last_name'] ) );

             // Campo de sobrenome que é usado no WooCommerce

             update_user_meta( $customer_id, 'billing_last_name', higieniza_text_field( $_POST['billing_last_name'] ) );

      }




}

add_action( 'woocommerce_created_customer', 'njengah_save_extra_register_fields' );

Agora os campos foram adicionados, validados e inseridos para uso futuro.

Ao acessar a página de endereço de cobrança em sua conta, você precisa clicar em editar para ir até lá. Os campos já estão preenchidos: Confira

Conclusão

Neste post, você aprendeu como adicionar campos no formulário de registro do WooCommerce.

Se você encontrar algum problema ao implementar este código, entre em contato com um desenvolvedor qualificado do WordPress.

Artigos semelhantes

Como editar os detalhes de cobrança da página de checkout do WooCommerce
Redirecionamento do WooCommerce após o checkout: Redirecionar para a página de agradecimento personalizada
Redirecionamento do WooCommerce após o logout [Guia definitivo]
Como adicionar pesquisa à página de compras no WooCommerce
Como alterar as mensagens de erro do WooCommerce Checkout
Como adicionar campo de data ao checkout no WooCommerce
Como adicionar a validação do número de telefone do Checkout WooCommerce
30 melhores plugins de download para compartilhamento de arquivos do WordPress e muito mais
35+ Melhor plugin de formulário gratuito WordPress
Como alterar o símbolo da moeda no WooCommerce
Como configurar o preço do produto WooCommerce por kg
Como mover o campo de checkout do WooCommerce
Como verificar se o usuário está logado no WordPress
Como estilizar a página de checkout do WooCommerce
Como remover o cupom do checkout no WooCommerce
Como adicionar moeda ao WooCommerce [moeda personalizada]
Como criar um campo de caixa de seleção na página de checkout do WooCommerce
Como obter o URL de checkout no WooCommerce
Guia rápido de otimização de checkout móvel do WooCommerce