Woocommerce

Mostrar categorías y etiquetas en lista de productos

2 Genial hay muchos Likes :D

Mostrar categorías y etiquetas en lista de productos resultado

En un artículo anterior habíamos visto cómo mostrar la descripción corta en la página de tienda de WooCommerce, en este artículo veremos algo similar, pero mostraremos las categorías y etiquetas que tiene un producto cuando se muestra una lista de productos.

Código para mostrar la categoría en lista de productos

add_action( 'woocommerce_after_shop_loop_item_title', 'dcms_categories_item_product', 10, 0 );

function dcms_categories_item_product() {
	
	if ( ! is_shop() ) return;
	
	global $product;
	$product_data = $product->get_data();
	$category_ids = $product_data['category_ids'];

	if ( ! count($category_ids) ) return;

	print("<section class='item-categories'>");
	foreach ($category_ids as $category_id){
		$term_object = get_term_by('id', $category_id, 'product_cat');
		$category_name = $term_object->name;
		$category_link = get_category_link($category_id);

		printf("<a href='%s' title='%s'>%s</a>",$category_link, $category_name, $category_name);
	}
	print("</section>");
}

En el código anterior:

Utilizamos uno de los hooks de WooCommerce para agregar contenido a los productos de una lista
El hook hace referencia a la función dcms_categories_item_product()
Dentro de la función obtenemos los datos del producto actual, el dato que nos interesa es el ID o IDs de las categorías
Luego recorremos todas las categorías y por cada ID obtenemos datos adicionales de la categoría con la función get_term_by()
Formamos el enlace con el nombre de la categoría y la imprimimos

 

Código para mostrar etiquetas en lista de productos

 
add_action( 'woocommerce_after_shop_loop_item_title', 'dcms_tags_item_product', 10, 0 );

function dcms_tags_item_product() {
	
	if ( ! is_shop() ) return;
	
	global $product;
	$product_data = $product->get_data();
	$tag_ids = $product_data['tag_ids'];

	if ( ! count($tag_ids) ) return;

	print("<section class='item-tags'>");
	foreach ($tag_ids as $tag_id){
		$term_object = get_term_by('id', $tag_id, 'product_tag');
		$tag_name = $term_object->name;
		$tag_link = get_tag_link($tag_id);

		printf("<a href='%s' title='%s'>%s</a>",$tag_link, $tag_name, $tag_name);
	}
	print("</section>");
}

En el código anterior:

  • Utilizamos uno de los hooks de WooCommerce para agregar contenido a los productos de una lista
  • El hook hace referencia a la función dcms_tags_item_product()
  • Dentro de la función obtenemos los datos del producto actual, el dato que nos interesa es el ID o IDs de las etiquetas
  • Luego recorremos todas las etiquetas y por cada ID obtenemos datos adicionales de la etiqueta con la función get_term_by()
  • Formamos el enlace con el nombre de la etiqueta y la imprimimos

Código CSS complementario

En el código anterior hemos usado como contenedor algunas clases, con el siguiente código estilizamos las etiquetas y categorías.

.item-categories {
  margin: 10px;
}

.item-categories a {
  margin-right: 10px;
}

.item-tags a {
  display: inline-block;
  background-color: lightgrey;
  color: grey;
  padding: 0 8px;
  border-radius: 8px;
  margin-right: 10px;
}

.item-tags {
  margin: 10px;
}

Conclusión

Tal como hemos visto, puedes mostrar datos adicionales en la lista de productos, como categorías y etiquetas de manera simple a través de código. Además puedes condicionarlo para que sólo se muestren en determinadas partes de tu sitio, por ejemplo sólo en la página de tienda.