Como usar os Hooks do WooCommerce para organizar seu child template

3/06/2016 | WooCommerce |

Olá pessoal. Estou estudando bastante o plugin WooCommerce do Wordpress e dessa vez gostaria de compartilhar com vocês o que aprendi até o momento sobre como trabalhar com os Hooks do WooCommerce para reposicionar os elementos do seu template.

PS: Estou trabalhando com o tema Storefront.

Bom, antes de mais nada, você precisa entender que o WooCommerce trabalhar com hooks (ganchos) que "chamam" as partes da template da loja para formá-lo como um todo. Por exemplo, se você abrir o arquivo storefront-template-hooks.php do tema Storefront, vai ver o seguinte código:

<?php
/**
 * Storefront hooks
 *
 * @package storefront
 */

/**
 * General
 *
 * @see storefront_header_widget_region()
 * @see storefront_get_sidebar()
 */
add_action( 'storefront_before_content', 'storefront_header_widget_region', 10 );
add_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );

/**
 * Header
 *
 * @see storefront_skip_links()
 * @see storefront_secondary_navigation()
 * @see storefront_site_branding()
 * @see storefront_primary_navigation()
 */
add_action( 'storefront_header', 'storefront_skip_links', 0 );
add_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_header', 'storefront_secondary_navigation', 30 );
add_action( 'storefront_header', 'storefront_primary_navigation_wrapper', 42 );
add_action( 'storefront_header', 'storefront_primary_navigation', 50 );
add_action( 'storefront_header', 'storefront_primary_navigation_wrapper_close', 68 );

/**
 * Footer
 *
 * @see storefront_footer_widgets()
 * @see storefront_credit()
 */
add_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
add_action( 'storefront_footer', 'storefront_credit', 20 );

/**
 * Homepage
 *
 * @see storefront_homepage_content()
 * @see storefront_product_categories()
 * @see storefront_recent_products()
 * @see storefront_featured_products()
 * @see storefront_popular_products()
 * @see storefront_on_sale_products()
 * @see storefront_best_selling_products()
 */
add_action( 'homepage', 'storefront_homepage_content', 10 );
add_action( 'homepage', 'storefront_product_categories', 20 );
add_action( 'homepage', 'storefront_recent_products', 30 );
add_action( 'homepage', 'storefront_featured_products', 40 );
add_action( 'homepage', 'storefront_popular_products', 50 );
add_action( 'homepage', 'storefront_on_sale_products', 60 );
add_action( 'homepage', 'storefront_best_selling_products', 70 );

/**
 * Posts
 *
 * @see storefront_post_header()
 * @see storefront_post_meta()
 * @see storefront_post_content()
 * @see storefront_paging_nav()
 * @see storefront_single_post_header()
 * @see storefront_post_nav()
 * @see storefront_display_comments()
 */
add_action( 'storefront_loop_post', 'storefront_post_header', 10 );
add_action( 'storefront_loop_post', 'storefront_post_meta', 20 );
add_action( 'storefront_loop_post', 'storefront_post_content', 30 );
add_action( 'storefront_loop_after', 'storefront_paging_nav', 10 );
add_action( 'storefront_single_post', 'storefront_post_header', 10 );
add_action( 'storefront_single_post', 'storefront_post_meta', 20 );
add_action( 'storefront_single_post', 'storefront_post_content', 30 );
add_action( 'storefront_single_post_after', 'storefront_post_nav', 10 );
add_action( 'storefront_single_post_after', 'storefront_display_comments', 20 );

/**
 * Pages
 *
 * @see storefront_page_header()
 * @see storefront_page_content()
 * @see storefront_display_comments()
 */
add_action( 'storefront_page', 'storefront_page_header', 10 );
add_action( 'storefront_page', 'storefront_page_content', 20 );
add_action( 'storefront_page_after', 'storefront_display_comments', 10 );

Falando bem "no popular" essas ações add_action do código acima inserem uma parte do template em seu respectivo lugar. Vamos traduzir o código para o popular, assim:

Ação retirada do código:

add_action( 'storefront_page', 'storefront_page_header', 10 );

Traduzindo:
adicionar no layout('em tal lugar','o tal pedaço do template', na posição 10);

Ou seja pra você adicionar um pedaço de template em determinado lugar terá que usar a função add_action e no primeiro parâmetro colocar onde você quer inserir o pedaço, no segundo parâmetro deverá falar qual é o pedaço e no terceiro parâmetro a posição desse pedaço. Pois podem ter vários pedaços no mesmo "tal lugar".

Da mesma forma que você adiciona um hook, você pode remove-lo com a seguinte função:

remove_action( 'storefront_header', 'storefront_site_branding', 20 );

No caso do código acima estou removendo do topo da loja o parte da logo/nome da loja.

Pois bem, aonde você faz isso? Bem, você tem duas opções: fazer isso no functions.php do seu tema filho (vou explicar o tema filho em outro post) ou criar um plugin que faça a modificação para você. Qual é melhor? Bom, as duas opções tem prós e contras, ou seja, você que sabe...rsrs.

Bom, por questões didáticas vou trabalhar com o arquivo functions.php. Abra ele e insira:

remove_action( 'storefront_header', 'storefront_site_branding', 20 );
add_action( 'storefront_before_content', 'storefront_site_branding', 1 );

Explicando: No código acima estou desenganchando a parte que mostra a logo/nome do site (storefront_site_branding) do template e em seguida estou adicionando essa mesma parte em outro lugar do template. Em vez de colocar ela no cabeçalho do template (storefront_header), estou colocando como a primeira parte (1) antes do conteúdo (storefront_before_content) do template.

Neste link você pode encontrar a referência de todos os hooks do WooCommerce:
https://docs.woothemes.com/wc-apidocs/hook-docs.html

Espero que tenham gostado do tutorial. É simples, mas creio que pode clarear seu entendimento se você é iniciante no WooCommerce assim como eu.

E, se você já é fera no plugin, ficarei muito feliz se você pudesse adicionar seus comentários trazendo para todos nós mais conhecimento ou, até mesmo, me corrigindo, caso eu escreva alguma besteira.

Não se esqueça de se inscrever no meu canal do Youtube e até a próxima!


Seja o primeiro a comentar.

Adoraria ler seu comentário aqui!

Responderei assim que possível.

Categorias