Ganchos de arquivo WooCommerce [Guia Completo]

Publicados: 2022-05-28

Ganchos de arquivo WooCommerce No breve post de hoje, compartilharemos os ganchos da página de arquivo do produto WooCommerce. O principal objetivo deste guia é ajudar desenvolvedores iniciantes e avançados a personalizar a página da loja.

É importante aprender a personalizar esta página sem editar os arquivos principais. A página de arquivo do produto contém uma lista de produtos relacionados a uma categoria.

O WooCommerce vem com diferentes ganchos para sua página de loja, páginas de produtos, página de carrinho e página de checkout. Eles ajudam a adicionar conteúdo em diferentes locais dessas páginas.

Reunimos os ganchos de arquivo do WooCommerce para que você possa conhecer suas localizações reais. Vale a pena mencionar que você também pode copiá-los e colá-los e depois colocar suas funções personalizadas.

Ganchos de arquivo WooCommerce

Aqui está uma lista de todos os ganchos:

  • woocommerce_before_main_content – ​​É colocado no início da página da loja.
  • woocommerce_archive_description – É colocado após o título do cabeçalho 'Loja' na página da loja.
  • woocommerce_before_shop_loop – É colocado antes da lista de produtos na página da loja.
  • woocommerce_before_shop_loop_item – É colocado no topo de cada produto da lista.
  • woocommerce_before_shop_loop_item_title – É colocado acima da imagem do produto.
  • woocommerce_shop_loop_item_title – É colocado acima do nome do produto.
  • woocommerce_after_shop_loop_item_title – É colocado abaixo do nome do produto.
  • woocommerce_after_shop_loop_item – É colocado acima do nome 'Adicionar ao carrinho'.
  • woocommerce_after_shop_loop – É colocado logo abaixo da lista de produtos.
  • woocommerce_after_main_content – ​​É colocado após todo o conteúdo da página.

WooCommerce add_action para a página de arquivo do produto

É importante aprender como você pode usar esses ganchos para adicionar funções personalizadas de gatilho em diferentes seções da página de arquivo no WooCommerce. Você pode desconectar/remover cada um deles: 

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 );

Exemplo para adicionar um gancho à página de arquivamento

Nesta seção, vamos ilustrar como você pode adicionar uma descrição da loja acima do título 'Loja'. É importante colar o código no arquivo functions.php do seu tema filho. Isso garante que suas alterações não sejam perdidas durante uma atualização.

Aqui estão os passos que você precisa seguir:

  1. Faça login no seu painel do WordPress como administrador.
  2. No painel, navegue até Appearance > Theme Editor . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema onde adicionaremos a função para adicionar uma descrição da loja abaixo do título 'Loja'.
  3. Adicione o seguinte código ao arquivo funções.php: 
add_action( 'woocommerce_before_main_content', 'shop_banner', 35);
function shop_banner(){
  echo '<h1>Hello</h1>';
}
  1. Este é o resultado: loja acima
  2. Como alternativa, se você quiser adicionar texto abaixo da página 'Loja', adicione o seguinte código no arquivo functions.php: 
add_action( 'woocommerce_archive_description', 'shop_banner', 35);

function shop_banner(){
  echo '<h1>Hello</h1>';
}
  1. Este é o resultado: abaixo da loja

Conclusão

Neste post, compartilhamos todos os ganchos de arquivo do WooCommerce. Você pode usá-los para personalizar a página da loja adicionando texto ou uma seção sem editar os arquivos principais.

É importante colar seu código no arquivo functions.php do seu tema filho. Isso garantirá que suas alterações não sejam perdidas durante uma atualização.

Se você precisar de mais personalização na página da loja, sinta-se à vontade para entrar em contato conosco para um orçamento personalizado. Esperamos que este post tenha ajudado você a personalizar a página da loja.

Artigos semelhantes

  1. Como alterar o link de retorno à loja no Woocommerce
  2. Como adicionar pesquisa à página de compras no WooCommerce
  3. Como ocultar a categoria WooCommerce Storefront Theme
  4. Como estilizar a página de checkout do WooCommerce
  5. Como obter o último pedido pelo ID do usuário WooCommerce
  6. Guia de finalização do WooCommerce Visual Hook
  7. Como verificar se a página do produto no WooCommerce
  8. Como mostrar o menu suspenso de variações suspensas na página da loja WooCommerce
  9. Como adicionar informações à página da loja WooCommerce
  10. Como exibir categorias de produtos no WooCommerce
  11. Como mostrar apenas uma categoria no WooCommerce
  12. Como obter o nome da marca do produto no WooCommerce
  13. Como alterar o guia do WooCommerce para adicionar ao carrinho de texto com exemplos
  14. Como ocultar a loja no WooCommerce
  15. Como adicionar produtos afiliados da Amazon ao WooCommerce
  16. Como adicionar texto após o preço no WooCommerce » Adicionar sufixo de preço
  17. Mais de 80 truques para personalizar o tema WooCommerce da vitrine: o melhor guia de personalização do tema da vitrine
  18. Como adicionar o botão Comprar agora WooCommerce sem plug-in
  19. Como corrigir o checkout não está disponível enquanto seu carrinho está vazio WooCommerce