28 ganchos de checkout do WooCommerce: mais do que um guia visual

Um dos melhores recursos do WooCommerce é a personalização. Com a ajuda de ganchos, você pode adicionar conteúdo nas páginas do produto, na página do carrinho e na página de checkout.

Este guia lista todos os ganchos de checkout do WooCommerce e onde você pode colocá-los na página de checkout e para quê.

Vamos dar uma rápida explicação sobre o que são ganchos, seus tipos e, em seguida, pular para os ganchos da página de checkout.

O que são ganchos?

Hooks no WordPress permite alterar ou adicionar código sem modificar os arquivos principais.

Eles são chamados de ganchos porque funcionam como um gancho da vida real para segurar objetos. No mundo do comércio eletrônico, os ganchos têm mantido programas adicionais.

Para melhorar a experiência do cliente, os lojistas e desenvolvedores usam esses ganchos. É aqui que eles adicionam parágrafos, descrições de produtos, ícones, imagens, logotipos e textos.

Os dois principais tipos de ganchos

Embora existam muitos ganchos do WordPress, você pode classificá-los em dois tipos:

1. Ganchos de ação
2. Ganchos de filtro

Ganchos de ação

Ganchos de ação permitem que você adicione funcionalidades extras em qualquer lugar do seu site. Este gancho pode ser usado para adicionar widgets extras, menus ou até mesmo uma mensagem.

Este é um exemplo de um gancho de ação:

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form' );
function storeapps_before_checkout_billing_form() {
   //adicione seu código aqui
}

Onde woocommerce_before_checkout_billing_form é o gancho e storeapps_callback_function é a função que criamos para adicionar nossos scripts personalizados.

Ganchos de filtro

Ganchos de filtro permitem que você modifique uma função existente. Nesses ganchos, você não está adicionando nada novo, mas apenas alterando ou filtrando os dados.

Por exemplo:

add_filter( 'woocommerce_breadcrumb_defaults', 'storeapps_change_breadcrumb' );
function storeapps_change_breadcrumb( $content ) {
   $content .= "StoreApps";
   retornar $conteúdo;
}

Outro exemplo pode ser os botões Adicionar ao carrinho de toda a sua loja mudando com um filtro.

Por que usar ganchos no WooCommerce?

Quase não há como ignorar e não usar esses ganchos depois de ver o que eles podem fazer. Tudo em sua loja é personalizável, para que você possa criar uma loja WooCommerce desejada usando esses ganchos.

Você não terá que se preocupar com essas consequências se usar ganchos. Alterar temas não afetará as alterações. Então é melhor ficar com ganchos para evitar todas as dores de cabeça e riscos.

Como o checkout é a página mais importante para qualquer loja, vejamos os ganchos da página de checkout do WooCommerce.

Todos os ganchos de checkout do WooCommerce

1. woocommerce_before_checkout_form
2. woocommerce_checkout_before_customer_details
3. woocommerce_checkout_billing
4. woocommerce_before_checkout_billing_form
5. woocommerce_after_checkout_billing_form
6. woocommerce_before_checkout_registration_form
7. woocommerce_after_checkout_registration_form
8. woocommerce_checkout_shipping
9. woocommerce_before_checkout_shipping_form
10. woocommerce_after_checkout_shipping_form
11. woocommerce_before_order_notes
12. woocommerce_after_order_notes
13. woocommerce_checkout_after_customer_details
14. woocommerce_checkout_before_order_review_heading
15. woocommerce_checkout_order_review
16. woocommerce_checkout_before_order_review
17. woocommerce_review_order_before_cart_contents
18. woocommerce_review_order_after_cart_contents
19. woocommerce_review_order_before_shipping
20. woocommerce_review_order_after_shipping
21. woocommerce_review_order_before_order_total
22. woocommerce_review_order_after_order_total
23. woocommerce_review_order_before_payment
24. woocommerce_review_order_before_submit
25. woocommerce_review_order_after_submit
26. woocommerce_review_order_after_payment
27. woocommerce_checkout_after_order_review
28. woocommerce_after_checkout_for

Vejamos cada gancho em detalhes, onde ele é colocado e como você pode adicioná-lo.

1. woocommerce_before_checkout_form
O gancho é definido antes do formulário de checkout. Ele é colocado acima do campo de cupom na página de checkout.

add_action( 'woocommerce_before_checkout_form', 'storeapps_before_checkout_form', 10 );
function storeapps_before_checkout_form() {
	echo '<h2>woocommerce_before_checkout_form</h2>';
}

2. woocommerce_checkout_before_customer_details
O gancho é definido no formulário de checkout antes dos detalhes do cliente.

add_action( 'woocommerce_checkout_before_customer_details', 'storeapps_checkout_before_customer_details', 10 );
function storeapps_checkout_before_customer_details() {
	echo '<h2>woocommerce_checkout_before_customer_details</h2>';
}

3. woocommerce_checkout_billing
Este é um novo gancho adicionado à página de checkout. O modelo de formulário de cobrança na página de checkout é incluído usando este gancho.

add_action('woocommerce_checkout_billing', 'storeapps_checkout_billing');
function storeapps_checkout_billing() {
    echo '<h2>woocommerce_checkout_billing</h2>';
}

4. woocommerce_before_checkout_billing_form
O gancho é definido antes do início do formulário de cobrança.

add_action( 'woocommerce_before_checkout_billing_form', 'storeapps_before_checkout_billing_form', 10 );
function storeapps_before_checkout_billing_form() {
	echo '<h2>woocommerce_before_checkout_billing_form</h2>';
}

5. woocommerce_after_checkout_billing_form
O gancho é definido após o preenchimento do formulário de cobrança.

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
function storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
}

6. woocommerce_before_checkout_registration_form
O gancho é definido no modelo de formulário de cobrança após o formulário de criação de conta. Isso será executado para os usuários convidados.

add_action('woocommerce_before_checkout_registration_form', 'storeapps_before_checkout_registration');
function storeapps_before_checkout_registration_form() {
    echo '<h2>woocommerce_before_checkout_registration_form</h2>';
}

7. woocommerce_after_checkout_registration_form
Este gancho é definido no modelo de formulário de cobrança. Isso será executado para os usuários convidados.

add_action('woocommerce_after_checkout_registration_form', 'storeapps_after_checkout_registration_form');
function storeapps_after_checkout_registration_form() {
    echo '<h2>woocommerce_after_checkout_registration_form</h2>';
}

8. woocommerce_checkout_shipping
Este gancho é definido no modelo de formulário de envio antes do formulário de envio.

add_action('woocommerce_checkout_shipping', 'storeapps_checkout_shipping');
function storeapps_checkout_shipping() {
    echo '<h2>woocommerce_checkout_shipping</h2>';
}

9. woocommerce_before_checkout_shipping_form
Este gancho é definido antes do início do formulário de envio.

add_action( 'woocommerce_before_checkout_shipping_form', 'storeapps_before_checkout_shipping_form', 10 );
function storeapps_before_checkout_shipping_form() {
	echo '<h2>woocommerce_before_checkout_shipping_form</h2>';
}

10. woocommerce_after_checkout_shipping_form
Este gancho é definido após o preenchimento do formulário de envio.

add_action( 'woocommerce_after_checkout_shipping_form', 'storeapps_after_checkout_shipping_form', 10 );
function storeapps_after_checkout_shipping_form() {
	echo '<h2>woocommerce_after_checkout_shipping_form</h2>';
}

11. woocommerce_before_order_notes
Este gancho é definido antes do campo de notas do pedido na página de checkout.

add_action( 'woocommerce_before_order_notes', 'storeapps_before_order_notes', 10 );
function storeapps_before_order_notes() {
	echo '<h2>woocommerce_before_order_notes</h2>';
}

12. woocommerce_after_order_notes
Este gancho é definido após o campo de notas do pedido na página de checkout.

add_action( 'woocommerce_after_order_notes', 'storeapps_after_order_notes', 10 );
function storeapps_after_order_notes() {
	echo '<h2>woocommerce_after_order_notes</h2>';
}

13. woocommerce_checkout_after_customer_details
O gancho é colocado após o preenchimento dos dados do cliente, ou seja, após os campos de faturamento e envio.

add_action( 'woocommerce_checkout_after_customer_details', 'storeapps_checkout_after_customer_details', 10 );
function storeapps_checkout_after_customer_details() {
	echo '<h2>woocommerce_checkout_after_customer_details</h2>';
}

14. woocommerce_checkout_before_order_review_heading
Este gancho é definido no modelo de checkout antes do título de revisão do pedido, ou seja, “Seu pedido”. Este gancho foi adicionado no WooCommerce v3.6.0.

add_action('woocommerce_checkout_before_order_review_heading', 'storeapps_checkout_before_order_review_heading');
function storeapps_checkout_before_order_review_heading() {
    echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
}

15. woocommerce_checkout_order_review
O gancho é definido no modelo de checkout principal. O modelo de tabela de revisão de pedidos é incluído usando este gancho.

add_action('woocommerce_checkout_order_review', 'storeapps_checkout_order_review');
function storeapps_checkout_order_review() {
    echo '<h2>woocommerce_checkout_order_review</h2>';
}

16. woocommerce_checkout_before_order_review
Este gancho é definido antes dos detalhes do pedido na página de checkout.

add_action( 'woocommerce_checkout_before_order_review', 'storeapps_checkout_before_order_review', 10 );
function storeapps_checkout_before_order_review() {
	echo '<h2>woocommerce_checkout_before_order_review</h2>';
}

17. woocommerce_review_order_before_cart_contents
Esse gancho é definido dentro do corpo da tabela de pedidos antes do conteúdo.

add_action( 'woocommerce_review_order_before_cart_contents', 'storeapps_review_order_before_cart_contents', 10 );
function storeapps_review_order_before_cart_contents() {
	echo '<h2>woocommerce_review_order_before_cart_contents</h2>';
}

18. woocommerce_review_order_after_cart_contents
Este gancho é definido dentro do corpo da tabela de pedidos após todo o conteúdo.

add_action( 'woocommerce_review_order_after_cart_contents', 'storeapps_review_order_after_cart_contents', 10 );
function storeapps_review_order_after_cart_contents() {
	echo '<h2>woocommerce_review_order_after_cart_contents</h2>';
}

19. woocommerce_review_order_before_shipping
Este gancho é definido antes da seção de envio na tabela de pedidos.

add_action( 'woocommerce_review_order_before_shipping', 'storeapps_review_order_before_shipping', 10 );
function storeapps_review_order_before_shipping() {
	echo '<h2>woocommerce_review_order_before_shipping</h2>';
}

20. woocommerce_review_order_after_shipping
Este gancho é definido após a seção de envio na tabela de detalhes do pedido.

add_action( 'woocommerce_review_order_after_shipping', 'storeapps_review_order_after_shipping', 10 );
function storeapps_review_order_after_shipping() {
	echo '<h2>woocommerce_review_order_after_shipping</h2>';
}

21. woocommerce_review_order_before_order_total
Este gancho é definido antes da seção total e após a seção de envio na tabela de detalhes do pedido.

add_action( 'woocommerce_review_order_before_order_total', 'storeapps_review_order_before_order_total', 10 );
function storeapps_review_order_before_order_total() {
	echo '<h2>woocommerce_review_order_before_order_total</h2>';
}

22. woocommerce_review_order_after_order_total
Este gancho é definido após a seção total e na tabela de detalhes do pedido.

add_action( 'woocommerce_review_order_after_order_total', 'storeapps_review_order_after_order_total', 10 );
function storeapps_review_order_after_order_total() {
	echo '<h2>woocommerce_review_order_after_order_total</h2>';
}

23. woocommerce_review_order_before_payment
Este gancho é definido antes da seção de métodos de pagamento na página de checkout.

add_action( 'woocommerce_review_order_before_payment', 'storeapps_review_order_before_payment', 10 );
function storeapps_review_order_before_payment() {
	echo '<h2>woocommerce_review_order_before_payment</h2>';
}

24. woocommerce_review_order_before_submit
Este gancho é definido antes do botão 'Place order' na página de checkout.

add_action( 'woocommerce_review_order_before_submit', 'storeapps_review_order_before_submit', 10 );
function storeapps_review_order_before_submit() {
	echo '<h2>woocommerce_review_order_before_submit</h2>';
}

25. woocommerce_review_order_after_submit
Este gancho é definido após o botão 'Place order' na página de checkout.

add_action( 'woocommerce_review_order_after_submit', 'storeapps_review_order_after_submit', 10 );
function storeapps_review_order_after_submit() {
	echo '<h2>woocommerce_review_order_after_submit</h2>';
}

26. woocommerce_review_order_after_payment
Este gancho é definido após toda a seção de pagamento, incluindo o botão 'Fazer pedido'.

add_action( 'woocommerce_review_order_after_payment', 'storeapps_review_order_after_payment', 10 );
function storeapps_review_order_after_payment() {
	echo '<h2>woocommerce_review_order_after_payment</h2>';
}

27. woocommerce_checkout_after_order_review
Este gancho é definido após a seção de revisão do pedido na página de checkout, que inclui a tabela de detalhes do pedido e a seção de pagamento.

add_action( 'woocommerce_checkout_after_order_review', 'storeapps_checkout_after_order_review', 10 );
function storeapps_checkout_after_order_review() {
	echo '<h2>woocommerce_checkout_after_order_review</h2>';
}

28. woocommerce_after_checkout_form
Este gancho é definido no final do formulário de checkout.

add_action( 'woocommerce_after_checkout_form', 'storeapps_after_checkout_form', 10 );
function storeapps_after_checkout_form() {
	echo '<h2>woocommerce_after_checkout_form</h2>';
}

Removendo as ações padrão na página de checkout

Por padrão, apenas alguns dos ganchos são usados ​​pelo WooCommerce para adicionar:

• formulário de login antes do formulário de checkout (woocommerce_checkout_login_form)
• formulário de cupom antes do formulário de checkout (woocommerce_checkout_coupon_form)
• tabela de revisão de pedidos para a seção de revisão de pedidos (woocommerce_order_review)
• tabela de pagamentos também para a seção de revisão de pedidos (woocommerce_checkout_payment)

Este código pode ser facilmente removido como mostrado abaixo. Você também pode consultar este documento sobre como adicionar trechos de código do WordPress com segurança.

/**
 * Remova os ganchos de checkout padrão do WooCommerce
 */
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Editor de campo de checkout personalizado no WooCommerce

Os exemplos acima mostram como adicionar alguns textos com trechos de código simples à página de checkout do WooCommerce.

Mas e os campos de checkout personalizados? A codificação personalizada exigiria muito mais trabalho.

Mas com a ajuda do Caixa, você pode editar/adicionar/remover campos principais do WooCommerce e também adicionar campos personalizados para a seção de envio, cobrança e campos adicionais.

Empacotando

Espero que este guia tenha ajudado você a cobrir todos os ganchos cruciais de checkout do WooCommerce.

Use-os para melhorar a página de checkout da sua loja online. A conclusão é que uma página de checkout é como uma porta de entrada para seus clientes e esses ganchos podem melhorar a experiência geral do usuário da sua loja, se usados ​​com sabedoria.

E para mais otimização de checkout, os plugins de checkout do WooCommerce estão sempre à sua disposição.