DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Plugins / Mostrar la descripción corta del producto en la página de tienda de WooCommerce

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

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

[ ] [ Actualizado: ]
[ Autor: ][ Plugins - Intermedio] [ ]

¿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 descripción de producto

 

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:

Mostrar SKU en lista de productos

 

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.

Suscríbete a DecodeCMS:  

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,60 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Marcelo Juarez

    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

  2. Marcelo Juarez

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

  3. Delfina

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

  4. emiliano

    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.

  5. Alfonso

    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.

  6. Javier

    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?

  7. Alejandro

    ¿Cómo sería el código para que se muestre el STOCK disponible?
    Muchas gracias por adelantado

    • Jhon Marreros Guzmán

      Hola Alejandro, evaluaré hacer un artículo sobre esto que comentas.

  8. Arturo Arellano

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

    • Jhon Marreros Guzmán

      Hola, posiblemente sea un problema de CSS, envía la url de tu sitio.

      • Luis

        Genial todo tu trabajo, muchas gracias, a mi pasa igual, como puedo solucionarlo? te lo agradecería mucho.

  9. Rodrigo Rojas

    Hola Jhon, antes que nada, felicitarte por tu blog. Es muy útil la información que compartes. Sin embargo, cuando ingreso este código, la descripción aparece por arriba de la imagen. ¿Cómo puedo arreglarlo? Gracias.

    https://demo.redsweb.pe/tienda/

  10. Josep

    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?

    • Jhon Marreros Guzmán

      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)

  11. Jesus Sanchez

    Hola Jhon es que en mi pagina de wordpress quiero mostrar lo que son las categorias en la descripción asi como se muestra en el video, me puedes ayudar con el codigo para poder colocar las categorias y las etiquetas de los productos muchas gracias

    • Jhon Marreros Guzmán

      Hola. Implicaría más código en este caso tal vez te convenga un plugin.

  13. Ignacio

    Hola Jhon. Necesito quitar la categoria que aparece dentro del box de cada producto, que no se muestre! intente con diferentes codigos y no lo logro, puedes ayudarme?

  14. Adriana

    Muy valiosa y clara tu explicación! Me funciona perfecto!!!
    Te consulto, sólo quiero que la descripción corta se vea en la página de toda la tienda y No en las de cada categoría de productos ¿Es ésto factible y qué código debería agregar?
    De antemano, muchísimas gracias!

    • Jhon Marreros Guzmán

      Hola, prueba con la función is_shop(), envuelve con una condicional todo el código que esta dentro de la función dcms_show_description_item_product() del código de este artículo

      function dcms_show_description_item_product(){
    if( is_shop() ) {
         // el código
    }
}

      Saludos.

  15. Adry

    Como siempre, Jhon, tus posts me son de muchísima utilidad! 🙂 Perfecto quedó!!! Gracias!!!
    Te consulto:
    Necesito colocar en algunos productos agotados un pequeño form que solicite el mail al navegante que desee ser avisado cuando dicho producto sea repuesto. Hasta ahí: perfecto!
    Para no pedirle que ingrese el nombre del artículo, sería molesto: hago el hook del woocommerce_after_shop_loop_item_title para recuperar el nombre o el sku de ese artículo, y luego ¿cómo hago para mandarme dicha variable (ej $sku) por el formulario de contacto?
    Utilizo Divi, por si te sirve de referencia, ya que es bastante dúctil para insertar código 😉

    Te agradezco de antemano!!!

  16. Jose Luis

    Hola funciona muy bien he probado para mostrar la id y funciona,pero no entiendo bien que tendria que poner
    para mostrarlo en la pagina de un solo producto.
    gracias

    • Jhon Marreros Guzmán

      Hola, tu tema por defecto si que debería mostrar la descripción corta, la descripción completa usualmente se muestra en un tab y la descripción corta al costado de la imagen del producto.

  17. Leonardo

    Hola Jhon, excelente articulo. Cómo sería para mostrar la descripción de una variación de producto?

    • Jhon Marreros Guzmán

      Hola, con las variaciones el código sería un poco más complejo, lo anotaré igual para evaluarlo.

  18. SALVADOR MORALES

    hola jhon, tengo un problema y esque la descripcion corta del producto no me la termina de visualizar completa sale al final los 3 puntitos, como se puede poner para que salga la descripcion completa del producto, o sea toda la descripcion que yo le he puesto al producto, gracias

    • Jhon Marreros Guzmán

      Hola, esta configurado a 100 caracteres en el código, puedes aumentar esta variable: $chars_quantity, la otra opción es comentar las dos líneas siguientes de //recorte caracteres

  19. francisco

    Excelente, pero tengo un problema, los campos, sea el que sea, me los muestra siempre encima de la imagen, en primera posición.

    • Jhon Marreros Guzmán

      Es posible que tengas que añadir código CSS adicional para verlo como deseas.

  20. jorge

    Muy buen video 🙂 Muchas gracias.
    Una pregunta. Que condición debo escribir en el código para que muestre una frase, solo en ciertos productos. Como por ejemplo: Solo los productos con la etiqueta “envio express” aparezca esa frase o descripción. Te lo agradecería mucho.

  21. Eber

    Hola jhon, y si quiero poner por ejemplo el sku antes del titulo como le haria?

    • Jhon Marreros Guzmán

      Hola Eber, ¿sólo sería visualmente? o quieres que el nombre del producto incluya el SKU al inicio?

  22. Jorge Rodriguez

    Hola como hago para colocar la description del producto en la parte final antes del Boton solicitar pedido?

  23. danny

    Hola amigo , uso el tema oceanwp y me sale la descripción corta arriba , como hago para que me salga justo debajo del titulo, ya he probado con prioridad 20 , 30 y no se mueve de alli. gracias por la ayuda
    https://www.lp10.es/tienda/

    • Jhon Marreros Guzmán

      Hola, es extraño, podrías probar cambiando la prioridad 10 del código a ver si te lo mueve.

  25. danny

    Hola, ya lo he hecho pero no lo mueve

  26. danny

    Tambien he cambiado los hooks pero sigue en esa misma posición

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*