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

[ 2 junio 2020 ] [ Actualizado: 2 julio 2020 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras

¿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

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

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:

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>";
}

 
Al final obtendremos algo similar a como se muestra en la siguiente imagen:

Conclusión

Como has podido comprobar, puedes mostrar la descripción del producto o incluso cualquier otra información de producto en un ítem de producto de manera simple a través de código.

 
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…