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:
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…),
R$554,00–R$6.565,00 R$44,00–R$665,00
woocommerce_before_add_to_cart_form
woocommerce_before_variations_form
| Clear selection |
woocommerce_before_add_to_cart_button
In stock
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form
woocommerce_share
This is the long description!
| Weight | 546 kg |
|---|---|
| Dimensions | 546 x 456 x 456 cm |
| Option | Option 1, Option 2 |
R$1,00
Add to cart
woocommerce_after_single_product
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.
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.
Neste artigo, você aprenderá como a página de checkout do WooCommerce é construída e como…
O WordPress usa os plugins drop-in, um recurso oculto, para substituir, adicionar ou aprimorar um…
Descubra se o WordPress é realmente gratuito e aprenda sobre os custos associados à criação…
Fala Profissional! Neste tutorial, eu, Rafa Carvalhido vou ajudar a resolver um bug específico que…
Encontre os hooks do WooCommerce na página de produto rapidamente! Este guia prático mostra de…
Fala Profissional! Você está buscando integrar a nova API dos Correios com seu e-commerce? Está…