O novo checkout de blocos do WooCommerce é uma evolução do checkout clássico que promete melhor conversão e usabilidade; no entanto, todo o seu desenvolvimento é baseado no novo paradigma de blocos do WordPress, o que exige conhecimentos avançados de JavaScript/React para qualquer customização. Sendo assim, não é fácil, nem existem muitas soluções para adicionar campos personalizados neste checkout, tal como existem para o checkout clássico.
Esta nova experiência de checkout já é o padrão em novas instalações do WooCommerce, mas muitas lojas brasileiras ainda estão presas ao antigo checkout clássico, justamente pela dificuldade de adicionar campos obrigatórios para o tipo de pessoa, CPF ou CNPJ, assim como a inscrição estadual.
O nosso plugin “Simple Checkout Fields Manager for WooCommerce” permite resolver este problema, oferecendo uma solução simples e fácil para adicionar os campos de checkout obrigatórios para vendas no Brasil.
Adicionando campos obrigatórios no checkout de blocos para vendas no Brasil
Primeiramente, deve-se instalar o plugin “Simple Checkout Fields Manager for WooCommerce”. Depois de ativar, vá para a opção WooCommerce > “Gestão Simples de Campos de Checkout” para começar a configurar os campos desejados.
TL/DR: temos aqui um documento JSON com todas as configurações prontas para usar. Use a opção “Importar definições de campos” do nosso plugin, na seção Ferramentas, e pule para o próximo passo. (IMPORTANTE: todas as definições atuais dos campos de checkout serão excluídas durante a importação!)
Na seção “Informações de contato”, adicionar os seguintes campos, com as seguintes definições:
Tipo de pessoa
- Geral
- Legenda:
Tipo de pessoa - Tipo:
Seleção - Opções de seleção:
fisica/Pessoa físicajuridica/Pessoa jurídica
- Legenda:
- Opções avançadas
- Posição: 1
- Regras condicionais
- Visível se:
País de cobrança/é um de/Brasil
- Obrigatório se:
País de cobrança/é um de/Brasil
- Visível se:
CPF
- Geral
- Legenda:
CPF - Tipo:
Texto
- Legenda:
- Opções avançadas
- Posição: 2
- Comp. máximo: 11
- Padrão:
^(?1([0-9])\1{10}$)\d{11}$ - Atributo título: “Apenas números”
- Regras condicionais
- Visível se:
País de cobrança/é um de/Brasil( AND / E )Tipo de pessoa/é igual a/fisica
- Obrigatório se:
Tipo de pessoa/é igual a/fisica
- Visível se:
CNPJ
- Geral
- Legenda:
CNPJ - Tipo:
Texto
- Legenda:
- Opções avançadas
- Posição: 3
- Comp. máximo: 14
- Padrão:
^[0-9A-Za-z]{12}[0-9]{2}$ - Atributo título: “Apenas letras e números”
- Regras condicionais
- Visível se:
Tipo de pessoa/é igual a/juridica - Obrigatório se:
País de cobrança/é um de/Brasil( AND / E )Tipo de pessoa/é igual a/juridica
- Visível se:
Inscrição Estadual
- Geral
- Legenda:
Inscrição estadual - Tipo:
Texto
- Legenda:
- Opções avançadas
- Posição: 4
- Regras condicionais
- Visível se:
Tipo de pessoa/é igual a/juridica
- Visível se:
Testando a finalização de compra com os campos obrigatórios para o mercado brasileiro
Depois de adicionar um produto ao carrinho, vamos à Finalização de Compra. Se o endereço preenchido for no Brasil, aparecerá o campo obrigatório “Tipo de pessoa” na seção “Informações de contato” e, conforme a opção escolhida, serão exibidos os campos CPF ou CNPJ e Inscrição Estadual.
Neste momento, ainda estamos limitados a escrever apenas dígitos e letras nos campos CPF e CNPJ (incluindo o novo padrão alfanumérico).
Para validar os dados e aplicar as máscaras de formatação “999.999.999-99” no CPF e “XX.XXX.XXX/XXXX-00” no CNPJ, veja a seguir.
Validando os números de CPF e CNPJ (dígitos verificadores) antes de finalizar a compra
Em complemento ao Simple Checkout Fields Manager for WooCommerce, disponibilizamos o plugin “Validate CPF/CNPJ”, que realiza as validações necessárias para CPF e CNPJ (incluindo o novo formato alfanumérico).
A partir da versão 2.0, o plugin “Validate CPF/CNPJ” também aplica a máscara nos campos, tornando a digitação visualmente mais intuitiva.
A instalação é simples:
- Baixe e instale o plugin Simple Checkout Fields Manager for WooCommerce.
- Importe o arquivo JSON swcbcf-fields-cpf-cnpj.json para criar os campos, conforme vimos acima.
- Baixe e instale o plugin Simple Checkout Fields Manager for WooCommerce – Validate CPF/CNPJ.
- Pronto! A máscara e a validação de cada campo são ativadas automaticamente, não sendo necessária nenhuma configuração adicional.
How to add the “Pessoa Jurídica”, “CPF”, “CNPJ”, and “Inscrição Estadual” fields to the WooCommerce Block Checkout
WooCommerce’s new block-based checkout is an evolution of the classic checkout, promising improved conversion and usability; however, its development is based on the new WordPress block paradigm, which requires advanced JavaScript/React knowledge for any customization. Consequently, adding custom fields to this checkout is not easy, nor are there as many solutions available as for the classic checkout.
While this new checkout experience is already the default for new WooCommerce installations, many Brazilian stores remain tied to the old classic checkout precisely because of the difficulty involved in adding mandatory fields specific to the Brazilian market, such as customer type (pessoa física or jurídica), CPF or CNPJ, and inscrição estadual (company registry in Brazilian states).
Our “Simple Checkout Fields Manager for WooCommerce” plugin solves this problem by offering a simple, easy way to add the mandatory checkout fields required for sales in Brazil.
Adding fields to the blocks checkout for sales in Brazil
First, install the “Simple Checkout Fields Manager for WooCommerce” plugin. After activating it, go to WooCommerce > Simple Checkout Fields Manager to start configuring the desired fields.
TL/DR: Here is a JSON document containing all the ready-to-use settings. Use the “Import field settings” option in our plugin (under the Tools section) and skip to the next step. (IMPORTANT: all current checkout field settings will be deleted during the import!)
In the “Contact information” section, add the following fields with these settings:
Tipo de pessoa
- General
- Label:
Tipo de pessoa - Type:
Select - Options:
fisica/Pessoa físicajuridica/Pessoa jurídica
- Label:
- Advanced options
- Position: 1
- Conditional rules
- Visible if:
Billing country/is one of/Brazil
- Required if:
País de cobrança/is one ofBrazil
- Visible if:
CPF
- General
- Label:
CPF - Type:
Text
- Label:
- Advanced options
- Position: 2
- Max. length: 11
- Pattern:
^(?1([0-9])\1{10}$)\d{11}$ - Title attribute: “Apenas números”
- Conditional rules
- Visible if:
Billing countryis one of/Brazil( AND )Tipo de pessoa/is/fisica
- Required if:
Tipo de pessoa/is/fisica
- Visible if:
CNPJ
- General
- Label:
CNPJ - Type:
Text
- Label:
- Advanced options
- Position: 3
- Max. length: 14
- Pattern:
^[0-9A-Za-z]{12}[0-9]{2}$ - Title attribute: “Apenas letras e números”
- Conditional rules
- Visible if:
Tipo de pessoa/is/juridica - Required if:
Billing country/is one of/Brazil( AND )Tipo de pessoa/is/juridica
- Visible if:
Inscrição Estadual
- General
- Label:
Inscrição estadual - Type:
Text
- Label:
- Advanced options
- Position: 4
- Conditional rules
- Visible if:
Tipo de pessoa/is/juridica
- Visible if:
Testing checkout with required fields for the Brazilian market
After adding a product to the cart, proceed to checkout. If the entered address is in Brazil, the required field “Tipo de pessoa” will appear in the “Contact information” section, and, depending on the chosen option, the CPF or CNPJ and Inscrição Estadual fields will be displayed.
At this time, we are still limited to writing only digits (and letters) in the CPF and CNPJ fields (including the new alphanumeric standard).
To validate the data and apply the formatting mask “999.999.999-99” to the CPF (Brazilian individual taxpayer registration number) and “XX.XXX.XXX/XXXX-00” to the CNPJ (Brazilian company taxpayer registration number), see below.
Validating CPF and CNPJ numbers (check digits) before finalizing the purchase
In addition to the Simple Checkout Fields Manager for WooCommerce, we offer the “Validate CPF/CNPJ” add-on plugin, which performs the necessary validations for CPF and CNPJ (including the new alphanumeric format).
Starting with version 2.0, the “Validate CPF/CNPJ” add-on also applies a mask to the fields.
The installation is simple:
- Download and install the Simple Checkout Fields Manager plugin for WooCommerce.
- Import the JSON file swcbcf-fields-cpf-cnpj.json to create the fields, as seen above.
- Download and install the Simple Checkout Fields Manager for WooCommerce – Validate CPF/CNPJplugin.
- Done! The mask and validation of each field are automatically activated, requiring no further configuration.