Precios B2B: cómo destacar el precio neto en productos

nuriadeco

¿Qué tal? Tengo un pequeño quebradero de cabeza con la visualización de precios en mi tienda B2B. Necesito que el precio neto sea mucho más prominente que el precio con impuestos incluidos. Mis clientes B2B se fijan en el neto y el precio total con IVA solo les distrae.

He intentado ajustar el custom.css del tema Classic, pero la herencia de estilos hace que sea difícil conseguir un contraste claro. Parece que ambos precios terminan con un tamaño de fuente muy similar.

Esto es lo que he probado hasta ahora en themes/classic/assets/css/custom.css:

.product-prices .current-price {
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
}
.product-prices .price-tax-included {
    font-size: 1.1em;
    color: #6c757d;
    margin-top: 5px;
}

El problema es que el .price-tax-included no se atenúa lo suficiente y no consigo que el precio neto salte a la vista como quiero. ¿Alguna idea de cómo atacar esto de forma más efectiva con CSS? Gracias de antemano.

hugodev

Hola @nuriadeco, entiendo perfectamente lo que dices, es un clásico en tiendas B2B. A veces, el tema Classic tiene una especificidad CSS bastante alta y es complicado anular estilos sin usar !important (que no es lo ideal).

¿Podrías confirmar qué versión exacta de PrestaShop estás utilizando? A veces los selectores cambian ligeramente entre versiones, aunque para 1.7 no debería haber grandes diferencias. Y si no estás usando un tema hijo, es posible que tus cambios se pierdan con cada actualización del tema, cuidado con eso.

samuel_lab

@hugodev tiene razón, la versión es importante. Yo he tenido problemas similares y a veces hay que ir un poco más allá con los selectores. En tu código, el .current-price es correcto para el precio neto. Para el precio con IVA, a veces PrestaShop lo envuelve en un elemento con la clase .tax-value o similar dentro del .price-tax-included.

Intenta inspeccionar el elemento con las herramientas de desarrollador del navegador. Mira la estructura HTML exacta y verás qué selectores están aplicando el estilo original. Así puedes crear un selector más específico para tu precio bruto y atenuarlo realmente.

Milo

Hola @nuriadeco, gracias por la consulta. Es un requerimiento muy común en entornos B2B y se puede conseguir un buen resultado ajustando el CSS.

Para PrestaShop 1.7.7.5 con el tema Classic, la estructura suele ser bastante consistente. El problema que describes es de especificidad y de cómo los elementos <span> internos pueden tener estilos que 'compiten' con los de sus padres. Te propongo una solución CSS más robusta para tu custom.css que debería darte la diferenciación visual que buscas:

.product-prices .current-price {
    font-size: 2.2em; /* Mucho más grande */
    font-weight: 700; /* Más negrita */
    color: #333;
    line-height: 1.2;
    display: block; /* Asegura que ocupe su propia línea */
    margin-bottom: 5px;
}
.product-prices .price-tax-included {
    font-size: 1em; /* Tamaño normal, no tan pequeño para que sea legible */

Explicación de los cambios:

.current-price: Aumentamos significativamente font-size a 2.2em y font-weight a 700 para que el precio neto realmente destaque. Añadimos display: block y margin-bottom para separarlo visualmente.
.price-tax-included: Reducimos su font-size a 1em (tamaño base) y cambiamos el color a #999 para que sea más sutil. También display: block para que se posicione bien bajo el neto.
.tax-value: Este selector es clave si el texto de 'IVA incluido' tiene su propio <span>. Al aplicarle un font-size de 0.8em y un color de #bbb, lo hacemos aún más discreto.

Recuerda limpiar la caché de PrestaShop después de aplicar los cambios para que se vean reflejados.

nuriadeco

¡Increíble, @Milo! Acabo de aplicar tu código en custom.css y, por fin, se ve exactamente como quería. El precio neto salta a la vista y el precio con impuestos queda discretamente debajo, pero legible.

He vaciado la caché del navegador y de PrestaShop y los cambios son perfectos. ¡Muchas gracias por tu ayuda, de verdad!