Como adicionar thumb de imagem nas categorias do Woocommerce tema StoreFront

/ Developping / Por /

Como adicionar o suporte para imagens das categorias de produtos do WooCommerce no tema StoreFront. A solução não se limita ao tema StoreFront e pode ser adaptada para qualquer tema de WooCommerce uma vez que segue a estrutura dos hooks do WooCommerce.

Em seu tema filho copie e cole o código abaixo no arquivo functions.php

/**
 * Habilitar imagens na categoria de arquivos
 */
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
    if ( is_product_category() ){
	    global $wp_query;
	    $cat = $wp_query->get_queried_object();
	    $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
	    $image = wp_get_attachment_url( $thumbnail_id );
	    if ( $image ) {
		    echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
		}
	}
}

Entenda cada linha do código

Vamos destrinchar o código acima linha por linha, focando nos códigos do WooCommerce. Se você nunca teve contato com Hooks do WooCommerce ou funções padrão do WordPress, sugiro as leituras WooCommerce Hooks: Actions and filters e Code Reference.

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image()

A função utiliza o hook do WooCommerce que estrutura todo o plugin e é utilizado para ordenar layout de temas personalizados. O termo woocommerce_archive_description sinaliza onde a função será chamada na estrutura do tema, no caso instruindo a ser utilizado na página de Edição dos Arquivos. O termo woocommerce_category_image indica qual o nome da função que deverá ser utilizada, e que é definida na linha function woocommerce_category_image() { . O nome da função em alguns casos pode ser escolhido livremente, no caso utilizamos o padrão do WooCommerce.

if ( is_product_category() ){

Checa e valida se a pagina na qual deve ser executada a função é uma página de Categoria de Produto. A função is_product_category() é padrão do WooCommerce e pode ser utilizada em várias situações para fazer esta validação.

global $wp_query;
$cat = $wp_query->get_queried_object();

Chamadas padrão do WordPress para acessar a Query em uso definida.

$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );

A função get_term_meta faz a requisição do meta campo thumbnail_id buscando pelo ID do termo (categoria) atual via chamada $cat->term_id. Retornando o ID da imagem associada.

A função wp_get_attachment_url retorna a URL da imagem associada buscando pelo ID da variável $thumbnail_id . Caso não exista uma imagem associada o valor é retornado como falso.

if ( $image ) {
     echo '<img src="' . $image . '" alt="' . $cat->name . '" />'; 
}

Verifica se existe uma imagem associada via if ( $image ) caso exista imprime no código a tag de imagem definida como <img src="' . $image . '" alt="' . $cat->name . '" /> , sendo $image a URL da imagem e $cat->name o nome da Categoria como o parâmetro Alt da imagem.

Conteúdos relacionados