• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
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

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

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar el stock en la lista de productos de WooCommerceMostrar el stock en la lista de productos de WooCommerce
  • Agregar el campo de cantidad en la lista de productos de WooCommerceAgregar el campo de cantidad en la lista de productos de WooCommerce
  • Agregar Microdatos en campos de productos en WooCommerceAgregar Microdatos en campos de productos en WooCommerce
  • Campos personalizados en productos de WooCommerceCampos personalizados en productos de WooCommerce
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

    19 junio, 2020

    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

    • Jhon Marreros Guzmán

      19 junio, 2020

      Hola, en ese caso necesitarías usar otros Hooks, y código adicional, podrías evaluar usar un plugin, aunque veo que la funcionalidad para WooCommerce esta en la versión de pago del plugin: https://es.wordpress.org/plugins/codepress-admin-columns/

  2. Marcelo Juarez

    20 junio, 2020

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

  3. Delfina

    25 junio, 2020

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

    • Jhon Marreros Guzmán

      26 junio, 2020

      Hola, los desarrolladores de WooCommerce no recomiendan remover esos elementos de la url, revisa: https://docs.woocommerce.com/document/removing-product-product-category-or-shop-from-the-urls/ , evaluaré sin embargo hacer un artículo sobre este tema. Saludos.

  4. emiliano

    9 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      12 agosto, 2020

      Hola, revisa el siguiente artículo: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/ , sin embargo en tu caso puesto que no estas en la página de producto, tendrías que pasar adicionalmente el ID a la función get_field(), revisa: https://www.advancedcustomfields.com/resources/get_field/

  5. Alfonso

    17 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      19 agosto, 2020

      Hola, puedes revisar el siguiente artículo, https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/ , se usa un plugin para añadir el campo, luego si quieres mostrar este campo en la página de tienda, puesto que el ID es variable, ya que se mostrarán varios productos, tienes que usar el parámetro del id del producto como parte de la función get_field(), revisa: https://www.advancedcustomfields.com/resources/get_field/

  6. Javier

    11 septiembre, 2020

    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

    30 octubre, 2020

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

    • Jhon Marreros Guzmán

      4 noviembre, 2020

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

  8. Arturo Arellano

    11 noviembre, 2020

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

    • Jhon Marreros Guzmán

      12 noviembre, 2020

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

      • Luis

        18 abril, 2022

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

        • Jhon Marreros Guzmán

          19 abril, 2022

          Hola, envía la url de tu sitio para verificar.

  9. Rodrigo Rojas

    14 noviembre, 2020

    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/

    • Jhon Marreros Guzmán

      16 noviembre, 2020

      Hola
      En la url que envías veo que aparece debajo del precio, sin embargo puedes usar otros Hooks de WooCommerce para cambiar la posición, revisa el video de este articulo relacionado en donde se hace algo similar, sólo que con el stock: https://decodecms.com/mostrar-el-stock-en-la-lista-de-productos-de-woocommerce/

  10. Josep

    7 diciembre, 2020

    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

      9 diciembre, 2020

      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

    21 enero, 2021

    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

      21 enero, 2021

      Hola, debería usarse el mismo Hook, evaluaré hacer un artículo para mostrar las etiquetas y categorías igualmente. Saludos.

      • FRANCISCO GARCIA

        10 agosto, 2021

        Hola e leído tus tutoriales y son muy interesantes me preguntaba, si realizo el tutorial para agregar etiquetas y categorías?

        • Jhon Marreros Guzmán

          19 agosto, 2021

          Hola, si, recientemente he realizado un artículo para agregar etiquetas y categorías, revisa: https://decodecms.com/mostrar-categorias-y-etiquetas-en-lista-de-productos-woocommerce/

  12. Salvador Garcia Gonzalez

    24 febrero, 2021

    Hola Jhon y para mostrar colores o variaciones de producto?
    Saludos

    • Jhon Marreros Guzmán

      25 febrero, 2021

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

  13. Ignacio

    16 marzo, 2021

    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?

    • Jhon Marreros Guzmán

      16 marzo, 2021

      Hola, sería cuestión de usar CSS, revisa este artículo para ubicar el código necesario a cambiar: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

  14. Adriana

    14 abril, 2021

    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

      16 abril, 2021

      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

    12 mayo, 2021

    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!!!

    • Jhon Marreros Guzmán

      15 mayo, 2021

      Hola, tienes que cargar el formulario con algún campo oculto que tenga el SKU del producto, tal como lo planteas entiendo que estas usando algún formulario de tu constructor, a veces este tipo de formularios no tienen esa flexibilidad de tomar datos externos. Si quieres algo simple podrías usar un plugin, revisa por ejemplo: https://wordpress.org/plugins/back-in-stock-notifier-for-woocommerce/

  16. Jose Luis

    22 julio, 2021

    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

      22 julio, 2021

      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

    3 septiembre, 2021

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

    • Jhon Marreros Guzmán

      4 septiembre, 2021

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

  18. SALVADOR MORALES

    17 septiembre, 2021

    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

      21 septiembre, 2021

      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

    20 octubre, 2021

    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

      22 octubre, 2021

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

  20. jorge

    20 diciembre, 2021

    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.

    • Jhon Marreros Guzmán

      20 diciembre, 2021

      Hola, tienes que encontrar primero los tags que tiene el producto, lo puedes hacer con la función get_terms(), revisa este enlace de referencia: https://stackoverflow.com/questions/31904758/woocommerce-get-product-tags-in-array

  21. Eber

    1 febrero, 2022

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

    • Jhon Marreros Guzmán

      6 febrero, 2022

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

  22. Jorge Rodriguez

    10 marzo, 2022

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

    • Jhon Marreros Guzmán

      11 marzo, 2022

      Hola, entiendo te refieres a la página de producto, te sugiero revises el siguiente artículo: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/

  23. danny

    22 julio, 2022

    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

      27 julio, 2022

      Hola, tu sitio esta en mantenimiento y no puedo ver lo que comentas, sin embargo podrías evaluar usar otro hook, revisa: https://decodecms.com/guia-visual-de-hooks-para-storefront-y-woocommerce/ (los hooks de WooCommerce deberían permanecer). También es posible que tu theme haya cambiado el comportamiento de los Hooks.
      Saludos.

  24. danny

    28 septiembre, 2022

    Hola Jhon , uso OceamWP y el texto me lo coloca arriba , este es el sitio https://xn--tupaal-zwa.com/tienda/ o tupañal.com

    • Jhon Marreros Guzmán

      28 septiembre, 2022

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

  25. danny

    28 septiembre, 2022

    Hola, ya lo he hecho pero no lo mueve

  26. danny

    28 septiembre, 2022

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

  27. daygoro

    28 octubre, 2022

    Hola, antes que nada muchas gracias por la información que brindas.
    Al usar el Codigo para obtener el SKU del producto lo muestra en la parte superior de la imagen del producto, me gustaria que se muestre en la parte inferior, tal cual aparece en tu imagen de referencia, tal vez podrías ayudarme con este detalle por favor. Muchas gracias por tu tiempo.

    • Jhon Marreros Guzmán

      2 noviembre, 2022

      Hola, podrías probar cambiando la prioridad que por defecto esta en 10.

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Guardar datos de formulario de contacto sin plugins

Agregar el slug blog en las urls de las entradas de WordPress

Búsqueda en tabla personalizada en WordPress

Agregar Whatsapp flotante en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados