Guia Visual de Hooks do WooCommerce: Páginas Archive / Loja / Categoria

Este artigo é um guia visual de hooks para a página de arquivos do WooCommerce (que é usado o mesmo arquivo php das páginas Loja, Categoria, Tag). 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 arquivos do WooCommerce é onde aparecem vários produtos relacionados. Por exemplo todos os produtos estão na página principal da loja, mas você também pode filtrar por categoria ou tags sem ter que criar nada. O WooCommerce cria uma nova página para cada nova categoria ou tag que você adiciona. 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 da loja ou categoria. 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 arquivos, pode alterar a página da loja do WooCommerce por meio das funções do seu tema filho. Você pode remover elementos padrão (por exemplo, a imagem em destaque, o texto do botão de comprar, o título, etc),

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

LOJA

woocommerce_archive_description

woocommerce_before_shop_loop

Showing all 4 results

  • woocommerce_before_shop_loop_item

    woocommerce_before_shop_loop_item_title

    woocommerce_shop_loop_item_title

    Product Title

    woocommerce_after_shop_loop_item_title

    R$5,00

    woocommerce_after_shop_loop_item

    Add to cart

  • woocommerce_before_shop_loop_itemwoocommerce_before_shop_loop_item_title woocommerce_shop_loop_item_title

    Test 6

    woocommerce_after_shop_loop_item_title

    R$5,00

    woocommerce_after_shop_loop_item

    Select options

woocommerce_after_shop_loop

woocommerce_after_main_content

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

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

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

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
Hooks da página de arquivo, loja, categorias e tags

Em suma, se você precisa alterar a página de arquivos/loja/categoria 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 arquivos. 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 *