WooCommerce Checkout Blocks

Matheus Aguiar — Wed, 03 Apr 2024 22:27:14 +0000

No ano passado(2023) o plugin WooCommerce trouxe grandes mudanças no seu ecossistema. E uma das principais mudanças, com certeza, foi a definição de que as páginas de checkout e carrinho viriam como padrão com um modelo baseado nos blocos do Gutenberg, que é a tecnologia oficial de gerenciamento e construção de páginas do WordPress.

O checkout baseado em blocos foi lançado em novembro de 2023, na versão 8.3 do plugin WooCommerce. E desde então todas as novas instalações WooCommerce já possui como padrão a utilização desta tecnologia.

O novo modelo

Todo mundo sabe que mudanças são difíceis. Principalmente quando falamos de tecnologia.
Por ser algo relativamente novo, naturalmente não temos muito material e conteúdo sobre o assunto, o que dificulta um pouco a adaptação e a resolução de problemas durante o desenvolvimento.

Neste caso, só nos resta ler a documentação(que não é bem o forte do WooCommerce/WordPress). Então, logo abaixo neste post, deixei as fontes que usei para escrevê-lo, inclusive com exemplos de implementação e de páginas da própria documentação do WooCommerce.

O novo modelo de checkout traz um design mais bonito e moderno. Separando melhor suas seções e melhorando a experiência dos usuários durante o processo de finalização de compra.

Veja este exemplo utilizando o tema Storefront:

Porém, para quem precisa de algo mais personalizável, talvez não seja tão vantajoso. Veja no tópico abaixo.

Quando o simples se torna complexo

Para quem gosta de fugir do padrão, talvez o checkout baseado em blocos não seja a melhor opção.

Embora a ideia da utilização de blocos tenha como objetivo facilitar a personalização e também fornecer uma edição mais fácil do conteúdo, ela ainda não traz uma personalização suficiente para quem quer um checkout único.

Quando você ouve a sobre a utilização de blocos do Gutenberg no checkout, automaticamente vem na sua mente algumas dúvidas, como por exemplo:

Agora vou poder adicionar quantos campos eu precisar pelo painel?
Não.

Então eu vou poder construir uma página personalizada do zero para o checkout e só chamar os components da maneira que eu desejar. Certo?
Não.

Posso pelo menos reordenar os blocos para definir quais campos quero que venha primeiro?
Não.

Posso estilizar os blocos e campos no checkout através do painel?
Não.

E remover os campos que não quero no checkout?
Também não.

Isso significa que o novo checkout é inútil? Definitivamente não!

Assim como no checkout clássico, existem limitações ao que é entregue nativamente pelo plugin para esse novo checkout, e que serão ser tratadas por plugins desenvolvidos de terceiros e/ou desenvolvimentos personalizados. Porém, por ser uma ferramenta recente, ainda não temos tantas opções disponíveis.

Ah. Falando em desenvolvimento personalizado...

Campos personalizados

Sim. É possível criar campos personalizados para o checkout baseado em blocos do WooCommerce. Só não é tão simples como no checkout clássico.

Como disse anteriormente, o checkout clássico possui uma série de ferramentas e plugins de terceiros, muitos gratuitos, para poder manipular da maneira que quiser a página e formulário de checkout. Este novo checkout ainda não possui tantas integrações e vai demorar um pouco até que chegue ao nível do checkout clássico.

Mas falando de desenvolvimento personalizado, sem ferramentas de drag and drop e plugins de terceiros, as coisas ficaram um pouco mais complicadas.

Enquanto antes o desenvolvedor precisava saber lidar com o PHP, HTML, CSS e talvez Javascript, no novo checkout ele vai precisar dominar o Javascript e ter uma boa base de ReactJS.
Isso porque os blocos do Gutenberg utilizam o ReactJS para a construção de seus elementos components.

Para nós desenvolvedores, isso significa que vamos precisar estudar e nos adequar as novas estruturas. Digo não superficialmente, mas de fato entender como tudo funciona.

Já para quem quer investir em uma loja virtual, isso significa ficar atento ao aumento no valor do investido. Pois, quanto maior a complexidade, maior é o tempo de desenvolvimento, e tempo é dinheiro.

Trouxe aqui um post tutorial, mostrando como criar campos personalizados para o checkout baseado em blocos.

E os gateways de pagamento?

Trouxe este tópico pois, na minha visão, os gateways de pagamentos são os mais afetados nessa transição. Mas vou passar brevemente sobre o assunto pois vou criar um novo post dedicado a isso.

Basicamente, para que um gateway de pagamento funcione também no novo checkout, é necessário fazer alguma adaptações. E por isso, caso você tenha testado ou venha testar, alguns métodos de pagamento simplesmente não irão aparecer no checkout.

Mas se você for na edição da página de checkout verá uma mensagem de alerta sobre a incompatibilidade desse gateway:

Acredito que inicialmente essa compatibilidade vai reduzir as opções de gateways de pagamentos, devido a necessidade dos plugins atuais se adequarem ao novo modelo.
Vale ainda ressaltar que, alguns plugins de gateways tem como dependência outros plugins, que também não possuem integração com blocos ainda.

Com isso, trouxe aqui neste post alguns links úteis para quem vai fazer a adaptação de gateways:

E o checkout clássico? Morreu?

Nem de longe!
Acredito que o checkout baseado em blocos é muito promissor e com certeza vai trazer muita coisas boas no futuro. E eventualmente, vai acabar desbancando de vez o checkout clássico. Mas ainda falta muito!

Na minha opinião, na maioria dos casos, ainda está muito cedo para considerar construir lojas utilizando o novo checkout. A solução não parece estar 100% completa e não atende nenhum dos extremos do público que utiliza o WooCommerce como loja virtual.

O lojista que deseja montar um loja "low code" ou "no code" não vai ter ferramentas suficientes para personalizar o básico, mesmo que seja algo simples.

E o lojista que deseja montar um loja mais complexa e personalizada também vai acabar sendo prejudicado pela falta de ferramentas e vai acabar tendo que investir em mais mão de obra para uma tecnologia que ainda não está 100% consolidada.

Com isso, acredito que vale a pena esperar um pouco antes de migrar para esse novo modelo. E devemos ficar atento as mudanças que virão e como isso vai impactar nossa forma de trabalhar.

Obrigado!

Fontes:

https://www.tychesoftwares.com/how-to-add-custom-fields-in-woocommerce-checkout-block/
https://woo.com/document/cart-checkout-blocks-status/
https://github.com/woocommerce/woocommerce-blocks/tree/trunk/docs#third-party-developers
https://developer.woo.com/2023/08/07/extending-the-woocommerce-checkout-block-to-add-custom-shipping-options/
https://developer.woo.com/2022/05/20/hiding-shipping-and-payment-options-in-the-cart-and-checkout-blocks/
https://developer.woo.com/2021/03/15/integrating-your-payment-method-with-cart-and-checkout-blocks/
https://www.npmjs.com/package/@woocommerce/extend-cart-checkout-block
https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/changelog.txt