Guia Visual de Hooks do WooCommerce: Página de Produto (Single Product)

Este artigo é um guia visual de hooks para a página de produto (single product page) do WooCommerce. 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.

Se você gostou deste guia e ele é útil para você, me conta nos comentários!

A forma mais fácil para utilizar este e outros guias visuais do WooCommerce, é alterando o arquivo functions.php do seu tema-filho e usar da seguinte forma:

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 produto do WooCommerce é onde aparece um único produto com seu preço, descrição, tipo (simples, variável, etc), categoria, entre tantas outras. 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 produto. 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 do produto, pode alterar a página de produto do WooCommerce por meio das funções do seu tema filho. Você pode remover elementos padrão (por exemplo, a imagem em destaque, o botão de comprar, os produtos relacionados…),

– você pode adicionar seus elementos personalizados escolhendo o hook posicionado corretamente e acionando sua função, e você pode até “mover” elementos existentes. Teste e aproveite!
woocommerce_before_single_product
woocommerce_before_single_product_summary
Sale!

woocommerce_product_thumbnails (may not work)
woocommerce_single_product_summary

Product Title

R$554,00R$6.565,00 R$44,00R$665,00

This is the short description!

woocommerce_before_add_to_cart_form
woocommerce_before_variations_form

Clear selection

woocommerce_before_add_to_cart_button

woocommerce_before_single_variation
woocommerce_single_variation
R$554,00 R$44,00

In stock

woocommerce_before_add_to_cart_quantity

woocommerce_after_add_to_cart_quantity

woocommerce_after_single_variation

woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form

woocommerce_product_meta_startSKU: htr554yn
Category: Bracelets
Tags: tag1, tag2
woocommerce_product_meta_end

woocommerce_share

woocommerce_after_single_product_summary

Additional Information

Weight546 kg
Dimensions546 x 456 x 456 cm
OptionOption 1, Option 2

You may also like…

woocommerce_after_single_product

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

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

/**
* @snippet Lista de ações padrões em WooCommerce Single Product
* @doar https://www.paypal.me/RafaCarvalhido
*/

// Estas são as actions que você pode enganchar sua função!
// Você pode, inclusive, unhook ou desenganchar umas dessas funções reais abaixo.


// antes do conteúdo
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );

// coluna da esquerda
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

// coluna da direita
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// coluna da direita - add to cart
do_action( 'woocommerce_before_add_to_cart_form' );
do_action( 'woocommerce_before_add_to_cart_button' );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
do_action( 'woocommerce_before_quantity_input_field' );
do_action( 'woocommerce_after_quantity_input_field' );
do_action( 'woocommerce_after_add_to_cart_button' );
do_action( 'woocommerce_after_add_to_cart_form' );

// coluna da direita - meta
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
do_action( 'woocommerce_product_meta_start' );
do_action( 'woocommerce_product_meta_end' );

// coluna da direita - compartilhamento
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
do_action( 'woocommerce_share' );

// tabs, upsells e produtos relacionados
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );
do_action( 'woocommerce_product_after_tabs' );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// aAvaliações
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
do_action( 'woocommerce_review_before_comment_text', $comment );
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );
do_action( 'woocommerce_review_after_comment_text', $comment );

// após conteúdo
do_action( 'woocommerce_after_single_product' );
do_action( 'woocommerce_after_main_content' );
Hooks da página de produto de lojas WooCommerce

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

Contudo, esta não é a única forma de alterar a página de produto. Existem técnicas mais avançadas e poderosas para alterar a página de produto WooCommerce. Se você quiser ver mais conteúdo sobre o 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 *