Era uma tarde de sexta-feira quando recebemos um novo projeto: uma loja virtual de livros cristãos. O cliente queria algo simples e compatível com o sistema anterior: WooCommerce integrado com o gateway de pagamento Asaas.
Identificamos logo de cara: A loja virtual estava bastante desatualizada, e o pagamento, assim como o cálculo de frete pelos Correios, não funcionavam.
Então, para este projeto teríamos que testar um Tema padrão do WordPress com os plugins: WooCommerce, Asaas e outros essenciais. Depois dos testes, iríamos migrar os produtos e em seguida criar um novo tema.
O Asaas tem sido um bom gateway de pagamento, oferecendo opções via Pix, boleto e cartão de crédito com menores taxas. No entanto, para pagamentos via Pix e boleto, é necessário fornecer os campos de CPF/CNPJ. Por isso, ao instalar o plugin do Asaas, ele exige a ativação de um plugin de terceiros bastante conhecido no Brasil: Brazilian Market on WooCommerce.
🎭 Primeiro Ato: A Configuração “Perfeita”
Começamos com o roteiro clássico:
- WooCommerce instalado, tema leve nativo do WordPress (para testes), produtos cadastrados.
- Plugin do Asaas configurado com as chaves da API.
- Brazilian Market on WooCommerce ativado para adicionar CPF/CNPJ no checkout.
Mas então surgiu um problema inesperado: os campos de CPF/CNPJ simplesmente não apareciam.
Verificamos tudo: token do Asaas, configurações do plugin, cache e regras do WAF. Tudo parecia normal, sem impedimentos.
❌ O Problema: Campos Fantasmas
Ao ativar o Checkout Block do WooCommerce, o CPF e o CNPJ simplesmente desapareceram. O plugin Brazilian Market, essencial para esses campos, não era compatível com o editor de blocos.
Sem esses campos, o Asaas recusava processar pagamentos, pois os dados fiscais eram obrigatórios.
Tentamos de tudo:
✔ Inserir os campos manualmente com hooks PHP e scripts JS.
✔ Usar plugins alternativos para CPF/CNPJ compatíveis com blocos (como o Checkout Field Editor for WooCommerce).
✔ Forçar a exibição via CSS (mas os dados não eram enviados ao backend).
✔ Criar um plugin personalizado para habilitar o campo de CPF.
Nada funcionava. O Asaas simplesmente não era exibido no checkout no layout em blocos.
🔎 O Clímax: Busca em Fóruns e Suporte do Asaas
No fórum de suporte do Brazilian Market on WooCommerce, encontramos relatos de outras pessoas com o mesmo problema.
Problema identificado:
💡 “O checkout em blocos não processa hooks tradicionais.”
💡 “O plugin Brazilian Market nunca foi compatível com os blocos do WooCommerce.”
Era isso! O Brazilian Market usava funções como woocommerce_checkout_fields para adicionar os campos, mas o React (base dos blocos) ignorava essas modificações.
🔄 A Solução: Retroceder para Avançar
Decidimos abandonar o layout moderno e partir para a solução clássica:
1️⃣ Removemos o bloco de checkout da página.
2️⃣ Inserimos o shortcode [woocommerce_checkout].
3️⃣ Atualizamos a página… e como num passe de mágica, o checkout Asaas apareceu junto com os campos CPF e CNPJ
O Asaas finalmente processou os pagamentos e os testes foram bem-sucedidos.
O cliente ficou aliviado, mas um pouco insatisfeito com o visual “menos moderno”. No entanto, conseguimos contornar esse detalhe via CSS, melhorando a estética sem perder a funcionalidade.
🎬 Episódio Pós-Créditos: A Lição
Aprendemos que, embora o WordPress e o WooCommerce estejam evoluindo para blocos, muitos plugins ainda dependem da estrutura clássica. A pressa em adotar novidades pode comprometer funcionalidades essenciais.
Para o futuro:
✅ Sempre testar a compatibilidade dos plugins antes de definir prazos.
✅ Manter um checklist de fallback (como o shortcode clássico) para emergências.
No final, a loja funcionou perfeitamente com o checkout clássico, e migramos os produtos da loja antiga. Agora, seguimos para a criação do novo site, com um tema responsivo e otimizado para dispositivos móveis.
🔹 Moral da história: Às vezes, voltar ao básico é a saída mais inteligente. 🛠️
Descubra mais sobre AD (Arte Design)
Assine para receber nossas notícias mais recentes por e-mail.