CSS on Wordpress Product Description - ilustracion

CSS para descripciones de productos en WordPress: guia 2026

Q: ¿Qué selectores uso para las descripciones en WooCommerce?

Para la descripción corta, .woocommerce-product-details__short-description . Para la larga, .woocommerce-Tabs-panel--description . Si querés afectar una sola ficha, antepené la clase del body .postid-123 , donde 123 es el ID del producto. Lo explicamos a fondo en comparativa entre constructores de WordPress .

Q: ¿Cómo estilo la descripción corta distinto de la larga?

Usá selectores separados: una regla para .woocommerce-product-details__short-description y otra para .woocommerce-Tabs-panel--description . Como son contenedores diferentes, podés darles tipografías, colores y espaciados completamente distintos sin que se pisen.

Para aplicar CSS a descripciones de productos WordPress tenés que apuntar a dos selectores distintos: .woocommerce-product-details__short-description para la descripción corta y .woocommerce-Tabs-panel--description para la larga. Los pegás en Apariencia > Personalizar > CSS adicional, o los manejás visualmente desde Elementor si usás su widget de producto.

El detalle que casi nadie te aclara: short y full description no son lo mismo, viven en lugares diferentes de la ficha y se estilan con selectores diferentes. Si confundís uno con otro, vas a estar peleándote con un CSS que «no agarra» durante media tarde (me pasó, así que te lo cuento para que no lo sufras).

Personalizar el estilo de las descripciones de productos en WordPress es modificar con CSS la tipografía, los espacios, los colores y los bordes del texto descriptivo de una ficha de WooCommerce. Se hace apuntando a las clases que WooCommerce genera por defecto (la corta y la del tab de descripción) desde el Personalizador, un tema hijo, un plugin de CSS o el editor visual de Elementor.

En 30 segundos

Dos selectores, no uno: .woocommerce-product-details__short-description (corta) y .woocommerce-Tabs-panel--description (larga).
El método más simple es Apariencia > Personalizar > CSS adicional: los cambios se previsualizan en vivo y no tocás archivos.
Para un producto puntual usás la clase del body .postid-123 delante del selector.
Elementor te deja estilar la descripción sin escribir selectores, desde la pestaña Avanzado del widget.
El error más común es confundir la descripción corta con la larga y querer estilar la que no es.

Elementor es un page builder (constructor de páginas) para WordPress desarrollado por Elementor Ltd que permite diseñar páginas mediante una interfaz visual sin necesidad de código. Utiliza arrastrar y soltar para crear layouts personalizados.

¿Cuál es la diferencia entre la descripción corta y la descripción larga?

Ponele que cargás un producto en WooCommerce. El editor te muestra dos cajas de texto: una grande arriba (la descripción principal) y una más chica abajo que dice «Descripción corta del producto». No es decorativo: cada una sale en un lugar distinto de la tienda. Tema relacionado: si trabajás con Elementor en WordPress.

Descripción corta: aparece arriba, al lado de la imagen y el botón de «Añadir al carrito». Es el gancho rápido. Su clase es .woocommerce-product-details__short-description.
Descripción larga: aparece más abajo, dentro del tab «Descripción». Es donde va el detalle, las specs, el texto extenso. Vive en .woocommerce-Tabs-panel--description.

¿Por qué importa para SEO y UX? La corta es lo primero que ve el usuario sin scrollear, así que conviene que sea legible y respire. La larga es la que Google indexa con más peso. Estilar bien las dos no es un lujo estético: una ficha donde el texto se lee cómodo retiene mejor. Y sí, eso después se nota en las métricas.

¿Qué selectores CSS necesito para apuntar a las descripciones?

WooCommerce genera un HTML bastante predecible. Estos son los selectores que vas a usar el 90% de las veces:

.woocommerce-product-details__short-description: la descripción corta completa.
.woocommerce-Tabs-panel--description: el panel de la descripción larga (el tab).
body.postid-123: clase que WordPress agrega al <body> según el ID del producto. Sirve para apuntar a UNA ficha puntual.
body.single-product: presente en todas las páginas de producto individual. Útil para reglas globales.

Un ejemplo concreto. Si querés agrandar la letra de la descripción corta en toda la tienda:

.woocommerce-product-details__short-description {
 font-size: 1.05rem;
 line-height: 1.7;
}

Ojo con un punto que confunde a muchos: WooCommerce no agrega la categoría del producto al <body> de la ficha individual por defecto. La clase .product-cat-nombre la vas a encontrar en las páginas de archivo (el listado de la categoría), no siempre en la ficha. Más abajo te muestro cómo resolver el estilo por categoría sin depender de eso. Cubrimos ese tema en detalle en temas Elementor personalizados para tu tienda.

¿Cuáles son los mejores métodos para aplicar CSS a descripciones?

Hay cuatro caminos. No todos sirven para todos. Mirá la tabla y elegí según tu nivel y qué tan permanente querés que sea el cambio.

Método	Para quién	Ventaja	Contra
Personalizar > CSS adicional	Cualquiera	Vista previa en vivo, no toca archivos	Se pierde si cambiás de tema
Tema hijo (style.css)	Quien sabe FTP/editor	Permanente, versionable, sobrevive updates	Requiere tema hijo armado
Plugin de CSS personalizado	Sin conocimientos técnicos	Independiente del tema	Una dependencia más que cargar
Elementor (editor visual)	Quien arma con Elementor	No necesitás saber selectores	Atado a Elementor

css descripciones productos wordpress diagrama explicativo

Mi recomendación práctica: si es algo rápido y estás probando, andá al Personalizador. Si es producción y querés que dure, metelo en el tema hijo. El plugin de CSS lo dejaría para sitios donde no querés ni acercarte al código del tema.

¿Cómo aplicás CSS solo a descripciones de productos específicos?

Acá viene lo bueno. No siempre querés que todos los productos se vean igual.

Para un producto puntual, antepené la clase del ID. Si tu producto tiene ID 123:

body.postid-123 .woocommerce-product-details__short-description {
 background: #f5f7fa;
 padding: 1rem;
 border-radius: 8px;
}

¿Y por categoría? Como te decía, la ficha no trae la categoría en el body. La solución honesta es un snippet chico en el functions.php del tema hijo que agregue esa clase. Algo así:

add_filter('body_class', function($classes){
 if (is_product()) {
 foreach (get_the_terms(get_the_ID(),'product_cat') as $cat){
 $classes[] = 'pcat-' . $cat->slug;
 }
 }
 return $classes;
});

Después estilás con body.pcat-ofertas .woocommerce-Tabs-panel--description { ... }. Una advertencia: no abuses de reglas hiper específicas por cada producto. Si terminás con 200 selectores postid-X, tu hoja de estilos pesa de más y eso afecta el render. Agrupá por categoría siempre que puedas. Te puede servir nuestra cobertura de diferencias de SEO entre Elementor y Gutenberg.

¿Qué estilos mejoran de verdad la presentación?

No todo cambio suma. Estos son los que mueven la aguja en legibilidad:

Interlineado generoso: un line-height de 1.6 a 1.8 hace que un bloque de texto denso se lea sin cansar.
Tamaño cómodo: nada de letra de 13px en mobile. Apuntá a 16px o más en el cuerpo.
Contraste suficiente: texto gris clarito sobre fondo blanco es lindo en la maqueta y un dolor en la práctica. Cuidá el contraste real.
Espacios entre párrafos: un margin-bottom en los <p> separa ideas y da aire.

Pensá mobile primero. La mayoría de las visitas a tu tienda entran desde el celular, así que probá cada cambio en pantalla chica antes de cantar victoria.

Un apunte de performance, porque acá entra la infraestructura: el CSS pesado y mal cacheado arrastra el LCP de tus fichas. Si vas a tunear descripciones en serio, asegurate de que tu hosting cachee bien y sirva los estilos rápido. Un hosting WordPress como el de Donweb con caché a nivel servidor te ahorra que esos retoques visuales te cuesten milisegundos de carga.

¿Cómo usa Elementor el CSS en las descripciones?

Si armás las fichas con Elementor, hay un atajo: el widget WooCommerce Short Description. Lo arrastrás a la plantilla de producto y lo estilás desde los controles visuales (tipografía, color, espaciado) sin tocar un selector, según la documentación oficial de Elementor.

El paso a paso mental: seleccionás el widget, vas a la pestaña Estilo para lo visual, y si necesitás algo que el panel no cubre, saltás a Avanzado > CSS personalizado y escribís tu regla apuntando a selector (la palabra que Elementor reemplaza por el contenedor del widget). Lo bueno: control sin saber la estructura HTML. Lo no tan bueno: quedás atado a Elementor, y si algún día lo sacás, esos estilos se van con él.

Errores comunes al aplicar CSS a descripciones

Confundir corta con larga: el clásico. Escribís la regla para .woocommerce-product-details__short-description y no pasa nada porque el texto que querías cambiar estaba en el tab de la descripción larga. Inspeccioná el elemento con las DevTools del navegador antes de escribir el selector.
Querer cambiar contenido con CSS: CSS estila, no edita texto. Si necesitás agregar o sacar palabras, eso va en el editor del producto, no en una hoja de estilos.
Selectores demasiado genéricos: poner p { font-size: 18px } te toca TODO el sitio, no solo la descripción. Acotá siempre con la clase del contenedor.
Tirar !important a todo: zafa una vez para ganarle a un estilo terco del tema, pero si lo usás en cada regla después no podés sobrescribir nada. Usalo de última, no de entrada.
No testear en mobile: queda divino en el monitor de 27 pulgadas y se rompe en el celular. Probá en pantalla chica sí o sí.

Preguntas Frecuentes

¿Cómo aplicás CSS a la descripción de un producto en WordPress?

Andá a Apariencia > Personalizar > CSS adicional y escribí una regla apuntando a .woocommerce-product-details__short-description (corta) o .woocommerce-Tabs-panel--description (larga). Los cambios se previsualizan en vivo y no necesitás tocar ningún archivo del tema.

¿Qué selectores uso para las descripciones en WooCommerce?

Para la descripción corta, .woocommerce-product-details__short-description. Para la larga, .woocommerce-Tabs-panel--description. Si querés afectar una sola ficha, antepené la clase del body .postid-123, donde 123 es el ID del producto. Lo explicamos a fondo en comparativa entre constructores de WordPress.

¿Puedo usar Elementor para estilar las descripciones?

Sí. El widget WooCommerce Short Description de Elementor te deja estilar tipografía, color y espaciado desde controles visuales, sin escribir selectores. Para reglas más finas, usás el campo CSS personalizado en la pestaña Avanzado del widget.

¿Cómo estilo la descripción corta distinto de la larga?

Usá selectores separados: una regla para .woocommerce-product-details__short-description y otra para .woocommerce-Tabs-panel--description. Como son contenedores diferentes, podés darles tipografías, colores y espaciados completamente distintos sin que se pisen.

¿Cómo hago estilos diferentes por categoría de producto?

Como la ficha individual no trae la categoría en el body por defecto, agregás un snippet en el functions.php del tema hijo que sume una clase tipo pcat-slug con el filtro body_class. Después estilás con body.pcat-ofertas .woocommerce-Tabs-panel--description.

Conclusión

Estilar las descripciones de productos en WordPress no tiene misterio una vez que entendés que hay dos textos distintos, con dos selectores distintos. La corta engancha, la larga convierte e indexa. Identificá cuál querés tocar con las DevTools, escribí la regla en el Personalizador para probar y pasala al tema hijo cuando estés conforme.

Si usás Elementor, aprovechá su widget para los retoques visuales y dejá el CSS manual para lo que el panel no cubra. Y antes de cerrar: probá todo en mobile y vigilá que el CSS extra no te frene la carga. Una ficha rápida y legible vende más que una ficha «linda» que tarda en aparecer.