¿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.
Artículos Relacionados
(4 votos, promedio: 5,00 de 5)
Cargando...
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
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/
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
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.
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.
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/
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, 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/
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?
¿Cómo sería el código para que se muestre el STOCK disponible?
Muchas gracias por adelantado
Hola Alejandro, evaluaré hacer un artículo sobre esto que comentas.
Hola, la descripcion me queda sobre la imagen. USo oceanwp. ¿sabes como puedo solucionarlo?
Muchas gracias.
Hola, posiblemente sea un problema de CSS, envía la url de tu sitio.
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/
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/
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)
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
Hola, debería usarse el mismo Hook, evaluaré hacer un artículo para mostrar las etiquetas y categorías igualmente. Saludos.
Hola e leído tus tutoriales y son muy interesantes me preguntaba, si realizo el tutorial para agregar etiquetas y categorías?
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/
Hola Jhon y para mostrar colores o variaciones de producto?
Saludos
Hola. Implicaría más código en este caso tal vez te convenga un plugin.
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?
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/
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!
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
Saludos.
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!!!
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/
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
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.
Hola Jhon, excelente articulo. Cómo sería para mostrar la descripción de una variación de producto?
Hola, con las variaciones el código sería un poco más complejo, lo anotaré igual para evaluarlo.
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
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
Excelente, pero tengo un problema, los campos, sea el que sea, me los muestra siempre encima de la imagen, en primera posición.
Es posible que tengas que añadir código CSS adicional para verlo como deseas.