Insignias de descuento modernas en catálogo de productos

natalia_lab

Hola a todos, estoy intentando darle un toque más moderno a las insignias de descuento en las miniaturas de los productos, quiero que tengan un aspecto de píldora con un degradado y una sombra sutil. El problema es que los estilos por defecto de PrestaShop son muy persistentes, incluso con !important.

He intentado añadir esto en mi themes/classic/assets/css/custom.css pero no consigo que se aplique correctamente el fondo degradado y la forma de píldora. Parece que el background-color original del tema siempre prevalece.

.product-flag {
    background-color: #f00; /* Esto debería ser un degradado, pero no funciona */
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-weight: bold;
}

¿Alguna idea de cómo anular los estilos predeterminados para las insignias de descuento en PrestaShop 9.0.1 y aplicar un diseño de píldora con degradado?

alberto_lab

¡Qué tal, @natalia_lab! Entiendo perfectamente tu frustración, la especificidad CSS en PrestaShop, especialmente con el tema classic, puede ser un dolor de cabeza. A menudo, las reglas del tema son muy específicas o usan !important de forma agresiva.

Para el tema Classic, muchas de las insignias están definidas con selectores bastante potentes. Tendrías que inspeccionar bien el HTML en el navegador (F12) para ver la cadena exacta de selectores que se está aplicando al product-flag y luego crear una regla CSS aún más específica para anularla. A veces, con !important solo no basta si tu selector no es lo suficientemente específico. También asegúrate de que tu custom.css se esté cargando después de los estilos del tema.

Milo

Hola @natalia_lab y @alberto_lab,

@natalia_lab, el problema que describes es muy común. El tema Classic (y por extensión el Hummingbird, ya que comparten mucha estructura CSS) usa selectores bastante específicos para las insignias, y a veces la propiedad background-color se aplica directamente a un <span> o <div> interno, haciendo que el background que intentas aplicar al .product-flag se vea anulado o solapado.

La clave está en aumentar la especificidad del selector y asegurarte de que apuntas al elemento correcto dentro de la miniatura del producto. Además, al usar background en lugar de background-color y con un linear-gradient, es más probable que se aplique correctamente. Aquí te dejo un snippet que deberías añadir a tu themes/classic/assets/css/custom.css. Asegúrate de que este archivo se carga al final de todos los demás CSS del tema para que tenga prioridad.

/* Estilo para las insignias de descuento con degradado y forma de píldora */
.product-miniature .product-flag.discount {
    background: linear-gradient(to right, #6a11cb, #2575fc) !important; /* Degradado moderno */
    border-radius: 50px; /* Forma de píldora */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); /* Sombra sutil */
    color: #fff;
    font-weight: 600;
    padding: 5px 12px;
    text-transform: uppercase;
    font-size: 0.85em;

Explicación de los cambios:

.product-miniature .product-flag.discount: Este selector es mucho más específico que solo .product-flag, ya que apunta a una insignia (.product-flag) que tiene la clase .discount y que está dentro de una miniatura de producto (.product-miniature). Esto ayuda a superar la especificidad de las reglas del tema por defecto.
background: linear-gradient(...) !important;: Usamos la propiedad background (que incluye colores e imágenes de fondo) con linear-gradient para el efecto degradado. El !important aquí es a menudo necesario para asegurar que anula cualquier background-color anterior que pueda estar aplicado.
border-radius: 50px;: Esto crea la forma de píldora, un valor alto suele ser efectivo para cualquier tamaño.
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);: Añade una sombra sutil para darle más profundidad visual.
display: inline-flex; align-items: center; justify-content: center;: Estas propiedades aseguran que el texto dentro de la insignia se centre perfectamente, tanto horizontal como verticalmente, y que el padding se aplique de forma consistente.

Con estos cambios, deberías lograr el aspecto deseado.

natalia_lab

¡Muchísimas gracias, @Milo! ¡Funciona a la perfección! La clave estaba en ese selector más específico y las propiedades display: inline-flex para el centrado. Ahora las insignias tienen un aspecto genial y moderno. ¡Gracias por la ayuda tan detallada!