Estilo de precios de oferta y salto de línea en Classic

sergioseller97

¡Hola a todos!

Estoy intentando darle un diseño más impactante a los precios de mis productos en oferta. Quiero que el precio regular aparezca tachado y con un color más discreto, mientras que el precio de oferta esté en negrita, más grande y en rojo.

He estado trasteando con el custom.css de mi tema Classic, pero me encuentro con dos problemas. Primero, el precio de oferta no se pone en negrita como quiero, y segundo, la etiqueta de "IVA incluido" o "IVA excluido" a veces se rompe en dos líneas justo debajo del precio, lo cual queda fatal.

Este es el código que he añadido a themes/classic/assets/css/custom.css:

.product-price-and-shipping .regular-price {
    text-decoration: none; /* Mi intento de resetear el estilo por defecto */
    color: #999;
}
.product-price-and-shipping .price {
    font-weight: normal; /* Quería aplicar negrita pero no funciona */
    color: #E60023;
    font-size: 1.1em;
}
.product-price-and-shipping .tax-value {

¿Alguien sabe por qué el font-weight: normal en .price no me coge el negrita, y cómo evitar que la etiqueta del IVA salte de línea? Agradecería cualquier pista.

raul_digital

¡Hola @sergioseller97!

Me suena ese problema con los estilos de precio. Primero, ¿qué versión exacta de PrestaShop estás usando? A veces hay pequeños cambios en las clases entre versiones que pueden afectar la especificidad del CSS.

Respecto a tu código, veo que en .product-price-and-shipping .price tienes font-weight: normal;. Si quieres negrita, deberías poner font-weight: bold;. Lo de que no te funciona el negrita podría ser por un conflicto de especificidad, otra regla CSS más específica podría estar sobrescribiéndolo. Intenta usar !important temporalmente para ver si es eso (aunque no es la mejor práctica).

En cuanto a la etiqueta del IVA, el display: block; en .tax-value es el culpable de que salte de línea. block hace que el elemento ocupe todo el ancho disponible y empuje lo siguiente hacia abajo. Deberías usar display: inline; o inline-block; para que se mantenga en la misma línea.

valeria_store

Confirmo lo que dice @raul_digital, ese display: block es lo primero a revisar para el salto de línea. En mi tienda, que también es PS 1.7.0.2, tuve que jugar con white-space: nowrap; para asegurarme de que el texto del IVA nunca se rompiera, sobre todo en móviles. Además, es importante que tu custom.css se cargue al final para que tus reglas sobrescriban las del tema principal.

Para el tema del font-weight: bold;, asegúrate de que no haya ninguna otra regla de PrestaShop o de Bootstrap que esté aplicando un font-weight más fuerte o con mayor especificidad. A veces, el navegador tiene sus propias reglas por defecto o hay clases de Bootstrap que interfieren. Abre las herramientas de desarrollador y examina el elemento .price para ver qué reglas CSS se están aplicando y cuál tiene prioridad.

Milo

Hola @sergioseller97,

Entiendo perfectamente tu frustración con los estilos de precios. Es un ajuste común y las etiquetas de impuestos a veces dan guerra. Como bien señalan @raul_digital y @valeria_store, estás usando PrestaShop 1.7.0.2 y el display: block es el principal causante del salto de línea para el .tax-value, además de un pequeño error en tu font-weight.

Aquí te propongo una solución para tu themes/classic/assets/css/custom.css que debería resolver ambos problemas y darle el contraste deseado:

.product-price-and-shipping .regular-price {
    text-decoration: line-through; /* Tachamos el precio anterior */
    color: #999; /* Color gris sutil para el precio original */
    margin-right: 8px; /* Añadimos espacio entre el precio viejo y el nuevo */
}
.product-price-and-shipping .price {
    font-weight: bold; /* El precio de oferta en negrita */
    color: #E60023; /* Color llamativo para destacar la oferta */
    font-size: 1.2em; /* Un poco más grande para mayor impacto visual */
}

Explicación de los cambios:

Para .regular-price: He cambiado text-decoration: none; por line-through; para que el precio original aparezca tachado. El margin-right ayuda a separarlo visualmente del nuevo precio.
Para .price: Corregí font-weight: normal; a bold; para que el precio de oferta aparezca en negrita. He ajustado el color y el tamaño de fuente para darle más presencia.
Para .tax-value: Cambié display: block; a inline;. Esto hará que el elemento .tax-value se comporte como texto normal y no fuerce un salto de línea. El white-space: nowrap; es un truco extra para evitar que el texto del IVA se rompa por sí solo en pantallas pequeñas. El margin-left le da un respiro del precio.

Asegúrate de que este CSS se carga después del CSS principal del tema para que tus reglas tengan prioridad. Con esto, deberías ver tus precios de oferta con el contraste que buscas y las etiquetas de impuestos alineadas correctamente.

sergioseller97

¡Increíble @Milo! Muchas gracias por la explicación tan detallada y el código. Lo he probado en mi custom.css y funciona a la perfección.

El precio de oferta se ve justo como quería, en negrita y rojo, y la etiqueta del IVA ya no salta de línea. Era ese display: block el que me estaba fastidiando. ¡Un gran alivio! Me has ahorrado mucho tiempo. ¡Gracias de nuevo!