Adicionando a breve descrição do produto às páginas de arquivamento

O WooCommerce vem com páginas de arquivo e loops que fazem um ótimo trabalho, mas às vezes você pode precisar exibir um pouco mais de informações em sua loja principal e outras páginas de arquivo.

Neste tutorial, mostrarei como você pode adicionar a descrição curta do produto às suas páginas de arquivo e exibi-la abaixo do título do produto.

Se você quiser aprender a usar o WooCommerce do início ao fim, confira meu curso gratuito para iniciantes.

O que você precisará

Para acompanhar, você precisará de:

• Uma instalação de desenvolvimento do WordPress.
• Um editor de código.
• WooCommerce instalado e ativado.
• Produtos adicionados — importei os dados fictícios do produto que vêm com o WooCommerce; para obter detalhes sobre como fazer isso, consulte este guia.
• Um tema compatível com WooCommerce ativado – estou usando o Storefront.

Antes de começar, verifique se você configurou o WooCommerce. Para adicionar as descrições curtas do produto, você seguirá três etapas:

1. Crie um plugin para a função e ative o plugin.
2. Adicione uma função que produza a breve descrição do produto.
3. Identifique o gancho no WooCommerce ao qual precisamos conectar a função e anexe a função a esse gancho.

Então vamos começar!

Criando o plug-in

Na tua wp-conteúdo/plugins diretório, crie um novo arquivo PHP. eu estou chamando o meu tutsplus-product-archive-short-descriptions.php.

Abra o arquivo em seu editor de código. No topo do arquivo, adicione isto:

Isso configura o plugin e dá ao WordPress tudo o que precisa para ativá-lo.
Agora vá para o Plug-ins tela no seu administrador do WordPress e encontre o plugin:

Agora ative-o.
A princípio, não fará nenhuma diferença, pois você não o preencheu.  Veja como está a página principal da loja agora:


Escrevendo uma função para gerar a breve descrição

A breve descrição dos produtos no WooCommerce usa o trecho que você encontraria em postagens normais, portanto, para exibi-lo, tudo o que você precisa fazer é exibir o trecho da postagem.
Em seu arquivo de plugin, adicione o código abaixo:
function tutsplus_excerpt_in_product_archives() {
     
    the_excerpt();
     
}
É simples assim!  Mas agora você precisa vincular sua função à ação correta, para que ela seja exibida no local correto em suas páginas de arquivo.
Conectando a função à ação correta
Vamos dar uma olhada no arquivo no WooCommerce que gera o conteúdo do loop nas páginas de arquivo.  Este arquivo é content-product.phpe você o encontrará na pasta de modelos no plug-in WooCommerce.
O arquivo inclui vários ganchos de ação, todos usados ​​pelo WooCommerce para produzir conteúdo diferente.
Como queremos exibir nosso trecho abaixo do título do produto, o gancho que precisamos usar é woocommerce_after_shop_loop_item_title.  Como você pode ver a partir do content-product.php arquivo, ele já tem duas funções anexadas a ele, woocommerce_template_loop_rating() e woocommerce_template_loop_price()que tem como prioridades 5 e 10 respectivamente.  Portanto, precisamos vincular nossa função a um número de prioridade mais alto, para garantir que ela seja acionada depois disso.  vou deixar alguma margem de manobra e usar 40 como a prioridade.
Abaixo de sua função, adicione isto:
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
Agora salve seu arquivo de plugin e atualize a página da loja em seu navegador.  Agora você verá as descrições curtas dos produtos abaixo dos nomes dos produtos:

Restringindo o comprimento das descrições do produto
Se as descrições curtas do seu produto forem longas, elas podem atrapalhar o layout da página da sua loja.  Veja como fica com uma descrição mais longa:

Pessoalmente, eu usaria descrições mais curtas em um site ativo e manteria as informações mais detalhadas para a descrição longa.  Mas e se você quiser usar uma descrição curta mais longa em suas páginas de produtos, mas restringir seu comprimento na página principal da loja?
Você pode fazer isso usando o wp_trim_words() função em sua função para exibir o trecho.  Edite a função para que fique assim:
function tutsplus_excerpt_in_product_archives() {
     
    echo wp_trim_words( get_the_excerpt(), 10 );
         
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
A breve descrição do produto exibida será limitada ao número de palavras que você especificou em sua função:


Escondendo a breve descrição na página do produto

Outra coisa que você pode querer fazer é usar a descrição curta para as páginas de loja e arquivo e usar apenas a descrição longa nas páginas de produtos individuais.
Por padrão, o WooCommerce exibe a descrição curta na parte superior da página do produto e a descrição longa na parte inferior:

Para remover a descrição curta da página do produto e adicionar a descrição longa em seu lugar, você precisa desconectar a função que gera a descrição curta e substituí-la por uma de saída do conteúdo, que é a descrição longa.
Adicione isto ao seu arquivo de plugin:
function tutsplus_remove_short_desc_product() {
    
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
	add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
	
}
add_action( 'init', 'tutsplus_remove_short_desc_product' );
Isso removerá a descrição curta da parte superior da página do produto e a substituirá pela descrição longa.  Mas a descrição longa agora está duplicada na parte inferior da página, então você precisa removê-la das guias de produtos.  Faça isso com outra função, ligada ao woocommerce_product_tabs gancho:
function tutsplus_remove_product_long_desc( $tabs ) {

    unset( $tabs['description'] );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );
Agora, você descobrirá que suas páginas de produtos individuais têm a descrição longa na parte superior em vez da curta:

Resumo
Como o WooCommerce produz quase todo o seu conteúdo usando ganchos de ação, é simples adicionar mais conteúdo escrevendo funções e anexando-as a esses ganchos.  Neste tutorial, você aprendeu como adicionar descrições curtas de produtos aos seus arquivos de produtos.  Se você quiser levar isso adiante, poderá incluir uma ou mais tags condicionais em sua função para fazer isso em páginas de arquivo específicas.