Can’t override wc-block-components css

Resolved tony.localword
(@tonylocalword)

1 year, 11 months ago
I have custom css that is not overriding the default settings on the “view cart” button on the “xx has been sucessfully added to your cart” banner on a product page. I’m linking images that show the button and the console for details. You can see my css shows up, but is overridden by the default.

I tried adding my css in the Custom CSS section of my theme and also in the style.css of my child theme, neither seem to work.

I saw a couple other posts with similar issues, but nothing exactly the same that helped me.
- This topic was modified 1 year, 11 months ago by tony.localword.

Viewing 8 replies - 1 through 8 (of 8 total)

anastas10s
(@anastas10s)

1 year, 11 months ago

Hi there @tonylocalword 👋

Thanks for reaching out to Woo Support!

Can’t override wc-block-components css

Could you provide us with the product’s URL, in order to investigate further?

We await your response to better assist you.

Thread Starter tony.localword
(@tonylocalword)

1 year, 11 months ago

Here is an example, but all of the products has the same problem:

https://dev.raggssupply.com/product/block-ice/

Thank you

marcmckeown
(@marcmckeown)

1 year, 11 months ago

I am having the same issue, the wc-blocks.css file which loads before the style.css in the child theme has !important tags that cannot be overridden.
Afzal (woo-hc)
(@afzalpansuvi)

1 year, 11 months ago
Hi @tonylocalword,

Thanks for getting back to us. I’ve reviewed the link you provided, and it seems like you’ve already done some troubleshooting. Let’s dive deeper into this and find a solution together!

The CSS selector you’ve used is:
```
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
    background-color: #fff!important;
    padding: 0.3em 1em!important;
    text-decoration: none;
}
```
This selector targets the wc-forward class within the wc-block-components-notice-banner__content element. To increase specificity, let’s add another rule with a higher specificity:
```
.woocommerce-notices-wrapper .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
    background-color: #fff!important;
    padding: 0.3em 1em!important;
    text-decoration: none;
}
```
By including .woocommerce-notices-wrapper, we ensure that our custom CSS takes precedence over the default WooCommerce styles. To apply this code to your website, you follow the detailed guide here. After adding the new rule, clear your browser cache and revisit your product page. Here’s what the result will look like:

You should see the changes reflected on your website immediately. If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Let us know if there’s anything else we can help you with.
Afzal (woo-hc)
(@afzalpansuvi)

1 year, 11 months ago

Hi @marcmckeown,

Thank you for contacting WooCommerce support. Since all websites are built differently and run in different environments. Therefore, as per our Support Policy, I will suggest you create a new topic so we can assist you separately. You can also try the workaround I provided to @tonylocalword.

I appreciate your understanding. 🙂

Thread Starter tony.localword
(@tonylocalword)

1 year, 11 months ago

Thank you, that worked.

Afzal (woo-hc)
(@afzalpansuvi)

1 year, 11 months ago

Hi @tonylocalword,

Thanks for getting back to us. We are glad to help! If you have a few minutes, we’d love if you could leave us a review: https://wordpress.org/support/plugin/woocommerce/reviews/

Just so you know – we will now close this ticket as solved. If you have any other questions or issues, please feel free to open a new ticket and we’ll be happy to assist you.

Thank you for choosing WooCommerce and have a great day!
enteroz
(@enteroz)

1 year, 11 months ago
Hi!

All good, default block styles were not added at first. Had to enable.

With new WC 8 updates by default you going to have <div class=”wc-block-components-notice-banner__content”>. For some reason previously used css classes .woocommerce-error, .woocommerce-info, .woocommerce-message are removed. But why there is no default style via woocommerce.css file?

It’s gonna remove styles from all previous websites if no custom class were used before. Seems like it should be still added there and in the feature if needed then can remove and replace the styles. I can overwrite template files, but in general it seems odd, because it will remove the styles and no defaults are used.
- This reply was modified 1 year, 11 months ago by enteroz.
- This reply was modified 1 year, 11 months ago by enteroz.