Introducción
Este tutorial detalla cómo ocultar el SKU y otros metadatos de producto en WooCommerce usando únicamente CSS. Incluye los selectores más comunes, variantes por tema, ejemplos prácticos para ocultar globalmente o por páginas específicas, dónde colocar el CSS y consideraciones sobre accesibilidad y SEO. Los ejemplos de código están listos para pegar en su sitio.
¿Por qué usar CSS para ocultar SKU/metadatos?
- Rápido y reversible: se aplica sin tocar PHP y puede revertirse fácilmente.
- No elimina datos: solo los oculta visualmente los datos siguen existiendo en el HTML y en los datos estructurados (schema).
- Útil para personalizar vistas: ocultar en la ficha del producto, en el listado o solo en categorías específicas.
Antes de empezar: inspeccionar el HTML
Abra las herramientas de desarrollo del navegador (F12) y localice el elemento que contiene el SKU o la metadata. Busque clases comunes como .sku, .product_meta, o clases específicas de su tema. Anote la estructura para aplicar selectores precisos.
Ubicaciones donde añadir el CSS
- Apariencia → Personalizar → CSS adicional (recomendado para la mayoría de usuarios).
- Archivo style.css de un child theme (si usa tema hijo).
- Plugin de CSS personalizado (por ejemplo Simple Custom CSS o WP Add Custom CSS).
- Archivo CSS del tema (no recomendado salvo que sea un child theme).
Selectores comunes y ejemplos prácticos
A continuación ejemplos reutilizables. Pegue los bloques en su CSS adicional o archivo del child theme según prefiera.
1) Ocultar el SKU en todas partes (global)
.sku,
.product_meta .sku {
display: none !important
}
2) Ocultar el SKU sólo en la página de producto (single product)
.single-product .product_meta .sku,
.single-product .sku {
display: none !important
}
3) Ocultar el SKU sólo en la tienda / archivos (shop categorías)
.post-type-archive-product .sku,
.archive .sku,
.woocommerce ul.products li.product .sku {
display: none !important
}
4) Ocultar metadatos comunes (categorías, etiquetas) en la ficha del producto
.product_meta .posted_in,
.product_meta .tagged_as {
display: none !important
}
5) Ocultar peso y dimensiones (clases de WooCommerce recientes)
.woocommerce-product-attributes-item--weight,
.woocommerce-product-attributes-item--dimensions {
display: none !important
}
6) Ocultar filas concretas de atributos (cuando WooCommerce usa la tabla de atributos)
WooCommerce imprime filas con clases como .woocommerce-product-attributes-item y subclases. Si su tema añade clases específicas use esas clases si no, inspeccione el DOM para localizar la fila del atributo.
.woocommerce-product-attributes-item--peso,
.woocommerce-product-attributes-item--talla {
display: none !important
}
7) Ocultar SKU solo para un producto concreto (por ID)
Cada producto tiene la clase postid-123 (donde 123 es el ID). Así puede dirigirse a un producto en concreto.
.postid-123 .product_meta .sku {
display: none !important
}
8) Ocultar SKU solo para una categoría específica
Use la clase del body generada por WordPress para la categoría: product_cat-slug.
.product_cat-mi-categoria .sku,
body.product_cat-mi-categoria .product_meta .sku {
display: none !important
}
9) Ocultar metadatos para dispositivos móviles o tamaños concretos
@media (max-width: 768px) {
.product_meta {
display: none !important
}
}
10) Ocultar SKU sólo si está vacío
Si WooCommerce imprime un contenedor vacío, :empty puede funcionar. Atención: si contiene espacios o nbsp no se considerará vacío.
.product_meta .sku:empty {
display: none !important
}
Casos especiales según temas populares
- Storefront: suele usar .sku y .product_meta los ejemplos anteriores funcionan sin cambios.
- Astra: puede incluir estructuras propias, inspeccione .product_meta o .ast-woocommerce-wrap.
- Flatsome, Avada, Divi u otros page builders: pueden mover o estilizar la salida inspeccione y adapte los selectores (uso de !important es frecuente para sobreescribir estilos del tema).
Prácticas recomendadas y consideraciones
- Preferir selectores específicos: en lugar de ocultar .product_meta global, apunte a la clase concreta para evitar ocultar elementos no deseados.
- Usar !important con prudencia: en muchos temas será necesario para forzar la ocultación, pero no abuse para mantener la mantenibilidad.
- Accesibilidad: ocultar visualmente con display:none impide que lectores de pantalla accedan a esa información. Si necesita mantener la información accesible pero no visible, use técnicas ARIA o CSS que la escondan visualmente pero no del DOM (esto último depende de su objetivo).
- SEO y datos estructurados: ocultar por CSS no elimina la metadata de los microdatos/schema. Si quiere removerla completamente (para que no aparezca en el HTML ni en los datos estructurados), deberá usar filtros PHP o hooks de WooCommerce (ejemplos al final).
- Pruebe siempre: compruebe ficha de producto, listado, versiones cacheadas y dispositivos móviles tras aplicar los estilos.
Si necesita eliminar el SKU del HTML (no sólo ocultarlo)
Si desea eliminar el SKU de la salida HTML (por ejemplo para que no aparezca en los datos estructurados), debe usar un filtro PHP. A continuación un ejemplo que devuelve vacío para el SKU en el front-end (añádalo en el archivo functions.php de un child theme o en un plugin de snippets):
add_filter(woocommerce_product_get_sku, mi_quitar_sku_frontend, 10, 2)
function mi_quitar_sku_frontend(sku, product) {
if ( is_admin() ) {
return sku // mantener en admin
}
return // elimina el SKU en el frontend
}
Este código elimina el SKU del HTML, con lo que también desaparece de los datos estructurados y del DOM.
Cómo depurar si el CSS no funciona
- Verifique la clase exacta con la inspección del navegador.
- Aumente la especificidad del selector (por ejemplo: body.single-product .product .product_meta .sku).
- Use !important si el tema aplica estilos en línea o muy específicos.
- Compruebe si un plugin está inyectando el SKU por JavaScript después de la carga en ese caso el CSS funcionará pero la manipulación dinámica puede requerir un tratamiento distinto.
Resumen rápido
- Para ocultar visualmente use CSS en Apariencia → Personalizar → CSS adicional.
- Los selectores más habituales son .sku y .product_meta .sku ajuste por tema o por página (.single-product, .product_cat-…).
- Si quiere eliminar completamente el SKU del HTML y de los datos estructurados, use el filtro PHP mostrado.
- Pruebe en dispositivos y con usuarios no admin recuerde implicaciones de accesibilidad y SEO.
Ejemplos finales — conjunto de reglas útiles (pegar tal cual)
/ Ocultar SKU en single y listados, ocultar categorías y etiquetas en la ficha, y esconder peso/dimensiones /
.single-product .product_meta .sku,
.woocommerce ul.products li.product .sku,
.product_meta .posted_in,
.product_meta .tagged_as,
.woocommerce-product-attributes-item--weight,
.woocommerce-product-attributes-item--dimensions {
display: none !important
}
/ Ocultar SKU sólo para la categoría sin-sku /
.product_cat-sin-sku .sku {
display: none !important
}
/ Ocultar metadata únicamente en móviles /
@media (max-width: 768px) {
.product_meta {
display: none !important
}
}
Aplicando y ajustando estas reglas podrá controlar exactamente dónde y cuándo se muestran SKU y metadatos en su tienda WooCommerce.
Leave a Reply