27+ Ganchos de Checkout WooCommerce Ilustrados

Neste post, você aprenderá como usar ganchos de checkout no WooCommerce. Fique até o final, pois veremos os principais ganchos e daremos exemplos do que você pode fazer com eles. Eles ajudam você a personalizar a página de checkout para aumentar suas taxas de conversão.

Ganchos WooCommerce

Hooks são funções poderosas que permitem alterar ou adicionar código sem modificar os arquivos principais. Eles fornecem muita flexibilidade e os desenvolvedores os usam para alterar as funcionalidades padrão do WooCommerce.

Você deve notar que existem dois tipos de ganchos diferentes:

• Ganchos de ação – Eles permitem que você adicione código personalizado para realizar determinadas ações quando ocorre um evento.
• Ganchos de filtro – Eles alteram o comportamento de uma variável ou função existente.

Ganchos de checkout WooCommerce

Hooks ajudam os desenvolvedores a criar soluções personalizadas de forma prática e flexível. Os ganchos de checkout são um tipo de vários ganchos suportados pelo WooCommerce. Ganchos de checkout podem ser usados ​​para adicionar algum conteúdo antes dos campos de cobrança, aplicar alguma lógica para aumentar o preço ou limitar usuários por função, antes da revisão do pedido ou após o formulário de checkout e muito mais.

Você deve observar que os ganchos do WooCommerce funcionam exatamente como os ganchos nativos do WordPress. Antes de começarmos, recomendo criar um tema filho para que suas alterações não sejam perdidas.

A página de checkout do WooCommerce tem os seguintes ganchos:

1. woocommerce_before_checkout_form

O gancho woocommerce_before_checkout_form é 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', 'njengah_before_checkout_form', 10 );
		


function njengah_before_checkout_form(){

            echo '<h2>woocommerce_before_checkout_form</h2>';

} 

2. woocommerce_checkout_before_customer_details

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

 add_action( 'woocommerce_checkout_before_customer_details', 'njengah_checkout_before_customer_details', 10 );

function njengah_checkout_before_customer_details(){

echo '<h2>woocommerce_checkout_before_customer_details</h2>';

} 

3. woocommerce_checkout_billing

O woocommerce_checkout_billing é 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', 'njengah_checkout_billing');
		


function njengah_checkout_billing() {

echo '<h2>woocommerce_checkout_billing</h2>';

} 

4. woocommerce_before_checkout_billing_form

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

 add_action( 'woocommerce_before_checkout_billing_form', 'njengah_before_checkout_billing_form', 10 );

function njengah_before_checkout_billing_form(){

echo '<h2>woocommerce_before_checkout_billing_form</h2>';

} 

5. woocommerce_after_checkout_billing_form

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

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_after_checkout_billing_form', 10 );
		


function njengah_after_checkout_billing_form(){

echo '<h2>woocommerce_after_checkout_billing_form</h2>';

} 

6. woocommerce_before_checkout_registration_form

O gancho woocommerce_before_checkout_registration_form é 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', 'njengah_checkout_billing');

function njengah_checkout_billing() {

echo '<h2>woocommerce_before_checkout_registration_form</h2>';

} 

7. woocommerce_after_checkout_registration_form

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

 add_action('woocommerce_after_checkout_registration_form', 'njengah_after_checkout_registration_form');
		


function njengah_after_checkout_registration_form() {

echo '<h2>woocommerce_after_checkout_registration_form</h2>';

} 

8. woocommerce_checkout_shipping

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

 add_action('woocommerce_checkout_shipping', 'njengah_checkout_shipping');

function njengah_checkout_shipping() {

echo '<h2>woocommerce_checkout_shipping</h2>';

} 

9. woocommerce_before_checkout_shipping_form

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

 add_action( 'woocommerce_before_checkout_shipping_form', 'njengah_before_checkout_shipping_form', 10 );
		


function njengah_before_checkout_shipping_form(){

echo '<h2>woocommerce_before_checkout_shipping_form</h2>';

} 

10. woocommerce_after_checkout_shipping_form

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

 add_action( 'woocommerce_after_checkout_shipping_form', 'njengah_after_checkout_shipping_form', 10 );

function njengah_after_checkout_shipping_form(){

echo '<h2>woocommerce_after_checkout_shipping_form</h2>';

} 

11. woocommerce_before_order_notes

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

 add_action( 'woocommerce_before_order_notes', 'njengah_before_order_notes', 10 );
		


function njengah_before_order_notes(){

echo '<h2>woocommerce_before_order_notes</h2>';

} 

12. woocommerce_after_order_notes

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

 add_action( 'woocommerce_after_order_notes', 'njengah_after_order_notes', 10 );

function njengah_after_order_notes(){

echo '<h2>woocommerce_after_order_notes</h2>';

} 

13. woocommerce_checkout_after_customer_details

O gancho woocommerce_checkout_after_customer_details é colocado após a conclusão dos detalhes do cliente após os campos de faturamento e envio.

 add_action( 'woocommerce_checkout_after_customer_details', 'njengah_checkout_after_customer_details', 10 );
		


function njengah_checkout_after_customer_details(){

echo '<h2>woocommerce_checkout_after_customer_details</h2>';

} 

14. woocommerce_checkout_before_order_review_heading

O gancho woocommerce_checkout_before_order_review_heading é definido no modelo de checkout antes do título de revisão do pedido que é "Seu pedido". Este gancho foi adicionado no WooCommerce v3.6.0.

 add_action('woocommerce_checkout_before_order_review_heading', 'njengah_checkout_before_order_review_heading');

function njengah_checkout_before_order_review_heading() {

echo '<h2>woocommerce_checkout_before_order_review_heading</h2>';
		


} 

15. woocommerce_checkout_order_review

O gancho woocommerce_checkout_order_review é 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', 'njengah_checkout_order_review');

function njengah_checkout_order_review() {

echo '<h2>woocommerce_checkout_order_review</h2>';

} 

16. woocommerce_checkout_before_order_review

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

 add_action( 'woocommerce_checkout_before_order_review', 'njengah_checkout_before_order_review', 10 );
		


function njengah_checkout_before_order_review(){

echo '<h2>woocommerce_checkout_before_order_review</h2>';

} 

17. woocommerce_review_order_before_cart_contents

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

 add_action( 'woocommerce_review_order_before_cart_contents', 'njengah_review_order_before_cart_contents', 10 );

function njengah_review_order_before_cart_contents(){

echo '<h2>woocommerce_review_order_before_cart_contents</h2>';

} 

18. woocommerce_review_order_after_cart_contents

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

 add_action( 'woocommerce_review_order_after_cart_contents', 'njengah_review_order_after_cart_contents', 10 );
		


function njengah_review_order_after_cart_contents(){

echo '<h2>woocommerce_review_order_after_cart_contents</h2>';

} 

19. woocommerce_review_order_before_shipping

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

 add_action( 'woocommerce_review_order_before_shipping', 'njengah_review_order_before_shipping', 10 );

function njengah_review_order_before_shipping(){

echo '<h2>woocommerce_review_order_before_shipping</h2>';

} 

20. woocommerce_review_order_after_shipping

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

 add_action( 'woocommerce_review_order_after_shipping', 'njengah_review_order_after_shipping', 10 );

function njengah_review_order_after_shipping(){

echo '<h2>woocommerce_review_order_after_shipping</h2>';

} 

21. woocommerce_review_order_before_order_total

O gancho woocommerce_review_order_before_order_total é 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', 'njengah_review_order_before_order_total', 10 );

function njengah_review_order_before_order_total(){

echo '<h2>woocommerce_review_order_before_order_total</h2>';

} 

22. woocommerce_review_order_after_order_total

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

 add_action( 'woocommerce_review_order_after_order_total', 'njengah_review_order_after_order_total', 10 );

function njengah_review_order_after_order_total(){

echo '<h2>woocommerce_review_order_after_order_total</h2>';

} 

23. woocommerce_review_order_before_payment

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

 add_action( 'woocommerce_review_order_before_payment', 'njengah_review_order_before_payment', 10 );

function njengah_review_order_before_payment(){

echo '<h2>woocommerce_review_order_before_payment</h2>';

} 

24. woocommerce_review_order_before_submit

O gancho woocommerce_review_order_before_submit é definido antes do botão 'Place Order' na página de checkout.

 add_action( 'woocommerce_review_order_before_submit', 'njengah_review_order_before_submit', 10 );

function njengah_review_order_before_submit(){

echo '<h2>woocommerce_review_order_before_submit</h2>';

} 

25. woocommerce_review_order_after_submit

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

 add_action( 'woocommerce_review_order_after_submit', 'njengah_review_order_after_submit', 10 );

function njengah_review_order_after_submit(){

echo '<h2>woocommerce_review_order_after_submit</h2>';

} 

26. woocommerce_review_order_after_payment

O gancho woocommerce_review_order_after_payment é definido após toda a seção de pagamento, incluindo o botão 'Place Order'.

 add_action( 'woocommerce_review_order_after_payment', 'njengah_review_order_after_payment', 10 );

function njengah_review_order_after_payment(){

echo '<h2>woocommerce_review_order_after_payment</h2>';

} 

27. woocommerce_checkout_after_order_review

O gancho woocommerce_checkout_after_order_review é 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', 'njengah_checkout_after_order_review', 10 );

function njengah_checkout_after_order_review(){

echo '<h2>woocommerce_checkout_after_order_review</h2>';

} 

28. woocommerce_after_checkout_form

O gancho woocommerce_after_checkout_form é definido no final após o formulário de checkout.

 add_action( 'woocommerce_after_checkout_form', 'njengah_after_checkout_form', 10 );

function njengah_after_checkout_form(){

echo '<h2>woocommerce_after_checkout_form</h2>';

} 

Conclusão

Este post ilustra todos os ganchos do WooCommerce que estão disponíveis na página de checkout. Esses ganchos permitem que você personalize a página de checkout de acordo com suas necessidades.

Se esta é sua primeira vez com ganchos, você pode copiar esses scripts e colá-los diretamente no arquivo functions.php do seu tema filho. Agora você pode ser criativo e personalizar a página de checkout para aumentar as taxas de conversão.

Alternativamente, você pode usar plugins para personalizar esta seção se não estiver familiarizado com os códigos. Se você precisar de mais personalização, considere contratar um desenvolvedor qualificado do WordPress.

Artigos semelhantes

1. O que é o tema WooCommerce Storefront? [Respondidas]
2. Como colocar o carrinho e o checkout do WooCommerce em uma página
3. Como adicionar um campo extra no formulário de checkout do WooCommerce
4. Como personalizar a página de checkout da vitrine
5. Como remover o tema WooCommerce Storefront da página do carrinho
6. Como ocultar o imposto no checkout se o valor do campo existir WooCommerce
7. Como ocultar o campo do nome da empresa WooCommerce Checkout Page
8. Como remover o botão de checkout WooCommerce
9. Como alterar a quantidade no checkout WooCommerce
10. Como remover informações adicionais da página de checkout WooCommerce