Archived topic
I'm not able to customize the cart via css.
8 replies · Started by Luiz Guilherme on August 8, 2020
After installing Generatepress premium I can't customize the cart using css.
None of my rules that had been created before work anymore.
For example: I used the code below to change the color of the area that contains the remove product button, now it doesn't work anymore:
.product-remove{
background-color:#e8e8e8!important;
}I used the code below to remove the thumbnail images from the cart, it doesn't work anymore:
.cart .product-thumbnail{
display:none!important;
}When I make changes using the "Inspect from browser" option I can see the changes, however, adding css in the wordpress customization area does not work.
These were just a few examples. All the other changes I made to the cart do not work.
What is happening?
How do I customize my cart via css?
Hi there,
Woocoomerce CSS selectors are very specific. So your CSS has to be specific eg.
.woocommerce table.shop_table td.product-remove {
background-color:#e8e8e8ed;
}
.woocommerce table.shop_table td.product-thumbnail,
.woocommerce table.shop_table th.product-thumbnail {
display: none;
}Hello, Thanks for the feedback.
I did exactly as you said, and it doesn't work.
Nothing is changed.
Where did you add the CSS? And can you add it back to the site so i can see the issue?
Hi David.
I was inserting the CSS in "Additional Css" by going to [Appearance]> [Customize].
Even using the prefix ".woocommerce table.shop_table"
It wasn't working.
So I created a child theme, and inserted the code into the CSS of this theme, this time in [Appearance]> [Theme editor]> [File "stile.css"] and it worked.
One observation is that it worked even without using the prefix
".woocommerce table.shop_table".
Is it no longer possible to modify the woocommerce css via "additional css"? only via child theme?
Seizing the opportunity.
What plugin do you use to provide this forum platform?
I am planning to start a discussion forum, and I really liked its interface.
Try adding the CSS to the very top of the code in Additional CSS.
The forum is built on https://bbpress.org
Hello David.
Sorry for the delay,
This Work:
Try adding the CSS to the very top of the code in Additional CSS.
The mistake was here!
There was a conditional css at the end of my code missing a key lock.
This Code was only executed when the screen was smaller than 345px, so when I inserted the code below it, I didn't see the changes, because the screen was wider than this measurement.
All I had to do was add one more key to the code below, and everything I inserted later worked.
@media only screen and (max-width: 345px) {
.button.single_add_to_cart_button.button.alt {
width: 100%;
}Thank you for your help.
Glad to hear you found the issue :)
