Archived topic
Styling the remove button in Woocommerce cart
5 replies · Started by mkjj on April 6, 2022
This topic has been discussed before. With GP premium activated I still need !important in my child CSS to style the button, which I usually try to avoid. Actually, in 1300 lines of CSS this is the only rule where I have to use it. I'm sure, you have a very good reason for it. Is there still no better solution?
Thank you!
Mike
Hi there,
some of it cannot be avoided as Woocommerce declared certain properties as !important in their CSS. For example the product-remove link:
.woocommerce a.remove {
display: block;
font-size: 1.5em;
height: 1em;
width: 1em;
text-align: center;
line-height: 1;
border-radius: 100%;
color: red!important;
text-decoration: none;
font-weight: 700;
border: 0;
}So in GP we did this:
.woocommerce a.remove {
color: inherit!important;
....
}Which means for the default color state you should only need this:
.woocommerce table.shop_table td.product-remove {
color: #f00;
}Hover state would require !important however.
But overall its not an issue if you add !important to your CSS, as i would expect no one else will be adding more CSS on top of your CSS. Its just annoying when plugins or themes add use it in their code.
Hi David,
you're right, Woocommerce uses !important for the color, which is completely unnecessary, as far as I can see. However, GP uses border: 1px solid!important; , while Woocommerce uses border: 0; . At least this !important could be avoided, couldn't it?
Sorry for being so petty about this and wasting your time. I just try to keep my CSS as clean as I can. :-)
The border !important was added due to a weird bug on some legacy browsers where without it, the border would be clipped. We'll check if thats still an issue before removing it.
Excellent, thank you!
You're welcome
