Guia Visual de Hooks do WooCommerce: Página de Checkout

Este artigo é um guia visual de hooks para a página de checkout do WooCommerce (em pt-BR, página de finalização de compra). Ele pertence à “Série de Guias Visuais de Hooks do WooCommerce“, através da qual você pode encontrar hooks do WooCommerce de forma rápida e fácil, vendo seus locais reais. Fique à vontade para copiar/colar.

Graças a este guia visual dos archives do WooCommerce, agora você pode ir para o arquivo functions.php do seu tema-filho e usar de forma fácil:

function minha_funcao() {
//código da minha função
echo '<div>Minha DIV</div>';
}
add_action( 'nome-do-hook' , 'minha_funcao' );
Exemplo de utilização de hook no WordPress

Como você já deve saber, a página de checkout do WooCommerce é onde aparecem os produtos que o cliente separou para comprar. Aqui é possível alterar a quantidade, remover produtos, verificar o frete e se preparar para finalizar a compra. O WooCommerce cria esta página automaticamente para que você não tenha de fazê-lo. Você pode editar esta página de forma simples usando os ganchos ou hooks do WooCommerce. Os ganchos são como um identificador em certa parte da página que você pode alterar para seu site sem medo de tudo ser apagado na próxima atualização do WooCommerce.

Ao colocar o código do exemplo acima no seu functions.php, você fará uma alteração diretamente na página do checkout de compras. Você pode encontrar mais referências sobre hooks do WordPress clicando aqui.

Caso queira ver uma lista dos hooks WordPress em sua ordem de aparecimento, Clique no link abaixo:
Lista de Hooks WordPress em Ordem de Aparecimento

Agora que você conhece os ganchos da página de checkout (ou finalização de compras, como já foi dito), pode alterar a página que em inglês se chama WooCommerce checkout por meio das funções do seu tema filho. Você pode também remover elementos padrão (por exemplo, a imagem em destaque de cada produto) e adicionar seus próprios elementos, como um quadro de produtos relacionados,

– você pode então colocar suas funções personalizadas exatamente onde você gostaria que elas estivessem. Teste e aproveite!

woocommerce_before_checkout_form

woocommerce_checkout_before_customer_details

Detalhes de faturamento

woocommerce_before_checkout_billing_form

woocommerce_after_checkout_billing_form


woocommerce_before_checkout_shipping_form

woocommerce_after_checkout_shipping_form

woocommerce_before_order_notes

Informação adicional

woocommerce_after_order_notes

woocommerce_checkout_after_customer_details

Seu pedido

woocommerce_checkout_before_order_review

Produto Total
woocommerce_review_order_before_cart_contents
Produto teste  × 1 R$1,00
woocommerce_review_order_after_cart_contents
Subtotal R$1,00
woocommerce_review_order_before_shipping
Entrega
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
Total R$8,00
woocommerce_review_order_after_order_total

woocommerce_review_order_before_payment

woocommerce_review_order_before_submit

woocommerce_review_order_after_submit

woocommerce_review_order_after_payment

woocommerce_checkout_after_order_review

woocommerce_after_checkout_form

add_action padrões da Página de Checkout do WooCommerce

Abaixo você encontra os códigos necessários para alterar a página do checkout. Fique à vontade para copiar/colar, pois eu quero que você veja no seu site isso funcionando.

// Estas são algumas das actions que você pode usar como gancho em sua função!
// Você pode, inclusive, unhook ou desenganchar umas dessas funções reais abaixo.
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_output_all_notices', 10 );

add_action( 'woocommerce_checkout_billing', array( self::$instance, 'checkout_form_billing' ) );
add_action( 'woocommerce_checkout_shipping', array( self::$instance, 'checkout_form_shipping' ) );

add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
Hooks da página de checkout

Em suma, se você precisa alterar a página de checkout de compras do WooCommerce, a melhor forma é utilizando os hooks/ganchos do WooCommerce que você conheceu na lista acima.

Contudo, esta não é a única forma de alterar a página do checkout . Existem técnicas mais avançadas e poderosas para alterar a página da loja WooCommerce. Se você quiser ver mais conteúdo sobre este assunto, comenta abaixo pois eu quero saber se o tema é algo que você precisa saber.

Rafa Carvalhido Escrito por:

Rafa é Programador Web especializado em WordPress + WooCommerce e escritor nos tempos livres. Criação de sites, otimizações de velocidade e SEO, e criação de plugins são algumas de suas funções rotineiras que lhe permitem falar com propriedade quando o assunto é WordPress.

seja o primeiro a comentar

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *