I’m not able to customize the cart via css.

[Luiz Guilherme]

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?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luiz Guilherme]

Hello, Thanks for the feedback.

I did exactly as you said, and it doesn’t work.

Nothing is changed.

[David]

Where did you add the CSS? And can you add it back to the site so i can see the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luiz Guilherme]

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?

[Luiz Guilherme]

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.

[David]

Try adding the CSS to the very top of the code in Additional CSS.

The forum is built on https://bbpress.org

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luiz Guilherme]

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.

[David]

Glad to hear you found the issue 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts