Después de actualizar el tema Blocksy y el plugin WooCommerce en mi web fransalas.com, me di cuenta de que las estrellas de valoración de los productos ya no se veían correctamente. En lugar de las clásicas estrellitas, aparecía una fila de letras “SSSSS” que, aunque pueda parecer graciosa al principio, no daba una buena imagen en absoluto.
¿Por qué aparece “SSSSS” en lugar de estrellas en WooCommerce?
Este es un error bastante común y tiene una explicación lógica: WooCommerce utiliza una fuente personalizada llamada star para mostrar las estrellas. Pero en algunos casos, como tras una actualización o por conflictos con el tema o algún plugin de optimización, esa fuente deja de cargarse correctamente.
Lo que ves como “SSSSS” no es más que la letra que corresponde a la estrella en esa fuente especial. Si el navegador no puede cargarla, simplemente muestra la letra tal cual.
Cómo lo solucioné con una simple línea de CSS
Por suerte, la solución fue muy sencilla. Bastó con añadir este pequeño fragmento de CSS para forzar el uso correcto de la fuente star:
.star-rating{
font-family: star !important;
}
Lo añadí directamente en el panel de CSS adicional del personalizador de WordPress (Apariencia > Personalizar > CSS adicional), y al guardar los cambios, las estrellas volvieron a aparecer correctamente.
¿Y si esta solución no te funciona?
Si con este código no se soluciona el problema, es posible que la fuente star no se esté cargando en absoluto. Aquí te dejo algunas cosas que puedes revisar:
- Asegúrate de que WooCommerce está actualizado y funcionando correctamente.
- Comprueba si tu tema o un child theme ha sobrescrito las plantillas de WooCommerce.
- Revisa si tienes plugins que optimizan o bloquean la carga de fuentes (como algunos de rendimiento o privacidad).
- Abre las herramientas del navegador (F12 > pestaña Red > tipo: fuentes) y verifica si hay errores al cargar fuentes.
Conclusión
Errores como este no rompen una tienda, pero sí pueden generar desconfianza en los usuarios. Afortunadamente, en mi caso se solucionó con una sola línea de CSS. Si te pasa algo parecido, empieza probando con este snippet y asegúrate de que la fuente star se esté cargando correctamente.
¿Tienes alguna duda? Déjala en los comentarios.