Woocommerce

Mostrar la descripción corta del producto en la página de tienda

1 hay 1 solo Like :)

Mostrar la descripción corta del producto en la página de tienda de WooCommerce

¿Te gustaría mostrar la descripción corta del producto en la lista de productos y tu tema no te lo permite?, no te preocupes, felizmente WooCommerce nos proporciona algunos hooks que podemos usar para mostrar información adicional del producto.

Mostrar descripción en lista de productos

Usaremos el hook de WooCommerce llamado woocommerce_after_shop_loop_item_title, este hook nos permitirá agregar información a los ítems de productos.

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

function dcms_show_description_item_product() { 
	global $product;
	$chars_quantity = 100; //cantidad de caracteres a mostrar
	
	//Obtenemos la información del producto
	$product_details = $product->get_data();
	$short_description = $product_details['short_description'];

	//limpieza
	$short_description = strip_shortcodes($short_description);
	$short_description = wp_strip_all_tags($short_description);

	//recorte caracteres
	$short_description = substr($short_description, 0, $chars_quantity);
	$short_description = substr($short_description, 0, strripos($short_description, ' '));

	//mostrar descripción
	echo "<div class='dcms-item-description'>".$short_description."...</div>";
}

En el código anterior:

Usamos el hook woocommerce_after_shop_loop_item_title que hace referencia a la función dcms_show_additional_data_item_product
Dentro de la función declaramos el objeto global de producto y obtenemos el dato de la descripción
Usamos funciones para limpiar los shortcodes y código HTML de la descripción corta
Recortamos la descripción corta en caso pase la cantidad máxima de caracteres, el recorte se hace buscando el espacio anterior para no recortar una palabra
Finalmente imprimimos la descripción envuelta en una etiqueta HTML con una clase CSS llamada dcms-item-description

 

Mostrar cualquier otra información de producto

Siguiendo esa misma lógica es posible mostrar cualquier otra información y no sólo la descripción, incluso se podría mostrar información de un campo personalizado.

En el código anterior se usa la propiedad $product->get_data() , esto nos devuelve un array asociativo con los campos del producto, por ejemplo algunos de los valores que podemos obtener son:

  • id
  • name
  • slug
  • date_created
  • date_modified
  • status
  • featured
  • description
  • short_description
  • sku
  • price
  • regular_price
  • width
  • height
  • length
  • weight

 
Entonces en base al código inicial, para mostrar algún campo, como por ejemplo el SKU, quedaría:

Mostrar SKU en lista de productos

 

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

function dcms_show_additional_data_item_product() { 
	global $product;
	
	//Obtenemos la información del producto
	$product_details = $product->get_data();
	$sku = $product_details['sku'];

	//mostrar sku
	echo "<div class='dcms-item-sku'> SKU: ".$sku."</div>";
}