WooCommerce y Divi: cómo anular !CSS importante

Soy un gran admirador de Elegant Themes, pero muchos estilos CSS (principalmente en Divi) contienen "! importante" para anular los estilos de WooCommerce cuando se usan los dos en un combo. Ahora, el gran problema es que no podemos anular !importante con otro !importante. Divi ganará. Pero no importa si Divi se ha desarrollado de una manera buena o no tan buena, hay algo que podemos hacer. (NOTA: usar !important es algo horrible en CSS. Úselo bajo su propio riesgo)

Ejemplo: el mensaje de añadir al carrito en Divi/WooCommerce

Como puede ver en la captura de pantalla, la barra de mensajes que aparece en Divi una vez que agrega un solo producto al carrito tiene un color de fondo específico, que es el que elige en la configuración de Divi/tema.

El CSS es:

.woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, <strong>.woocommerce-message</strong>, .woocommerce-error, .woocommerce-info {
background: #71b1d6 !important;
}
woocommerce-divi-css-important-override
WooCommerce + Divi = ¡Problemas de CSS!

¡Claro, es tan simple entonces! ¡Anulemos Divi! CSS importante...

En la hoja de estilo de su tema hijo o CSS personalizado, pensaría que lo siguiente es suficiente:

.woocommerce-message {
background: WHITE !important;
}

…pero no, no funciona. Desafortunadamente, !important no "supera" a !important porque el tema principal ganará en este caso.

¡Cambiemos los archivos principales o anulemos !importante...

La solución ideal a largo plazo es: Divi debería cambiar la forma en que aplican su CSS. Pero mientras tanto, anulemos su importancia con un pequeño truco de CSS.

// THIS WON'T WORK
 
.woocommerce-message {
background: WHITE !important;
}
 
// BUT THIS WILL WORK!
 
.woocommerce .woocommerce-message {
background: WHITE !important;
}

Como puede ver, puede anular un !important con otro !important, pero solo si agrega un elemento CSS más específico. En nuestro ejemplo, usamos ".woocommerce" delante de ".woocommerce-message".

¡Esto funcionará!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir