Skip to content
Advertisement

blockOverlay class style override in WooCommerce

There is this class that gets added into the cart totals in the checkout process to signify updates being made as the user is inputting relevant information such as a shipping address. When that happens, the class blockOverlay appears with inline styles. I’m attempting to override those styles, or edit them somehow. Anyone knows where I can tweak the CSS for that element? I can’t override inline styles with my external wordpress stylesheet.

Advertisement

Answer

You can over-ride inline styles by using !important. Just add !important after specifying each property for the styles of blockOverlay element inside your stylesheet like this:

.blockOverlay {
     width: auto !important;
     display: block !important;
     //so on...
}

Here’s an example:

.blockOverlay {
  background: red !important;
  width: 300px !important;
  height: 50px !important;
}
<div class="blockOverlay" style="height: 100px; width: 500px; background: blue;"></div>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement