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.

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>