X
Jhon Marreros Guzmán

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

Puedes agregar este código al final de tu archivo functions.php de tu tema hijo o usar algún plugin de Snippets.
Puedes usar algún otro hook de manera similar, revisa esta guia visual de los hooks para items de productos.

 

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.

 

Artículos Relacionados

Categorías: Plugins
Etiquetas: mejoraswoocommerce

Ver comentarios (60)

  • Buenas noches
    muchas gracias por el valioso tutorial.
    Que código iría si esa información personalizada (por ej el texto) lo quiero también
    mostrar como columnas en el listado de productos que están en el back end?
    muchísimas gracias

  • Ok Jhon ... voy a revisar ese plugin que me recomiendas ... muchisimas gracias!
    un abrazo.-

  • hola amigo sabes como sacar la categoria que viene por defecto en woocomerce que no se puede borrar sin usar un plugin
    gracias

  • buenas tardes Jhon, como agregaría la información de un campo personalizado, ya cree los campos personalizados, pero no toma el valor que tengo.

  • Buenos días Jhon,
    Tengo una tienda online de aceites y me gustaría que en la página de la tienda donde se muestran todos los productos, bajo el precio del producto apareciese el precio del mismo pero €/Litro, quedando así titulo del producto, precio a pagar y precio/litro.
    Entiendo que para conseguir esto debo crear primero un campo personalizado para ese segundo precio (€/Litro) y después seguir este artículo para mostrar el valor de dicho campo de la misma forma que tu muestras el campo 'descripción corta'.
    ¿Cómo debo modificar el código para que sea el campo personalizado el que se muestra?
    Una segunda cuestión menos importante, tambien pretendo que aparezca el mismo 'segundo precio' DENTRO de la página de producto; en un primer momento he pensado en ponerlo en la misma descripción corta, ya que sólo me interesa que se visualice, como texto, y puedo ponerlo manualmente en cada producto; ahora bien, ¿podría usar ese campo personalizado que he creado tambien para esta función metiendo que se muestre la variable en algun lugar de la pagina de producto? ¿o sería más sencillo hacerlo manualmente con texto como he expuesto?
    Muchas gracias por la ayuda,
    Alfonso.

  • Hola Jhon muy buen artículo... me sale un pequeño problema al insertar el código y es qeu la descripcion corta del producto solo aparece cuando pongo el mouse encima del producto y no en cuanto recargo la página. A qué se puede deber?

  • Hola, la descripcion me queda sobre la imagen. USo oceanwp. ¿sabes como puedo solucionarlo?
    Muchas gracias.

  • Hola Jhon si quiero cambiar el color y tamaño del texto de esta descripcion que debo hacer? y es posible que aparesac esta edicion en Elementor?

    • Hola, simplemente asigna alguna clase o ID y luego cámbialo por CSS. No lo he probado con Elementor pero sería similar (siempre que elementor respete los hooks de WooCommerce)

Deja un comentario