WooCommerce Spinner Issue

[mmelton12]

As you can see from the attached image, my spinner on checkout is only being applied to the checkout form area, however I want the overlay to cover the entire page. Any help would be appreciated!

With no additional css, I found the same thing occurring, however, the css I’m using for this is a combination from this thread:

Checkout Page Loading Spinner

Hi @65kmanspt, Please delete the previous CSS and try with this custom CSS instead: .checkout.woocommerce-checkout.processing { position: relative !important; } .checkout.woocommerce-checkout.processing::before { background-image:url('https://www.amishgourds.com/wp-content/uploads/2019/05/Spinner-1s-200px.gif'); background-position: center center; background-repeat: no-repeat; z-index: 99999; position: absolute; content: ''; width: 100%; height: 100%; di…

and this additional woocommerce spinner code:

https://gist.github.com/eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5

The combination css is this:

.checkout.woocommerce-checkout.processing::before {
background-position: center center;
background-repeat: no-repeat;
z-index: 99999;
position: absolute;
content: ‘’;
width: 100vw!important;
height: 100vh!important;
display: block;
background-color: rgba(0, 0, 0, 0.50);
}

.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
height: 4em;
width: 4em;
position: absolute;
top: 25%;
left: 45%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: “”;
-webkit-animation: none;
-moz-animation: none;
animation: none;
background: url(‘https://litcessory.local/spinner.svg’) center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
z-index: 999991;
}

[friech]

Hi Matt,

Thank you for writing in, regretfully that is considered customization and we don’t provide customization support here in the forum, the CSS code provided by my colleague from another thread serves only as a guide.

You might want to subscribe to our paid support called ONE (https://theme.co/one).

Thank you for understanding,

[mmelton12]

Understood.

So, if I remove all css customization and revert to standard spinner in pro theme, how can I ensure the overlay covers the entire width of the screen as opposed to the inside woocommerce checkout form alone? You can see the faint line resulting from the white background alpha overlay in below image (first image). Second image shows a similar issue, when using just the code your team provided in the previously mentioned theme.co thread.

I’ve tried pausing in console tools debugger, but can’t seem to isolate the issue.
Thanks so much for your help. Looking forward to fixing this.

[ruenel]

Hello @mmelton12,

Please be advised that the standard theme spinner and WooCommerce Ajax notification do not have an overlay. It will just display the icon at the middle of the page.

If you have added a custom WooCommerce spinner, it is best that you seek further assistance from 3rd party developer because what you are trying to do needs a custom developer and it is beyond the scope of our support already.

We thank you for your kind understanding.