[Support request] Woocommerce checkout spinner

[Robert]

Hi there,

Is there a way to give “focus” to the spinner that indicates processing on a Woocommerce check out page? When you place an order currently the spinner is at the top and the page doesn’t scroll up or indicate that anything is going on. I can see someone then trying to click the check out button twice. Any ideas on how to fix this?

I realize this may not be GP specific however I’ve seen threads on other forums that themes can have a direct impact on this since they may alter Woocommerce pages.

Thanks.

[Leo]

Hi there,

Have you checked with WooCommerce first as Tom suggested in the other post?

We don’t think it’s a theme issue but if they say it is, then please ask them to clarify what the issue is and we will for sure take a look 🙂

[Rob]

Curious if there was a resolution to this. I have the same issue. Apparently, there is supposed to be 2 components to the WooCommerce Place Order process – there should be a gray overlay over the screen, and a spinner should show. In my case, the spinner shows, but it’s high on the page as the OP described, and the gray overlay does not appear at all. Not sure if this is a GP incompatibility somehow or not, it’s hard to diagnose since I am not familiar at all with Woo css or plugin structure.

Thanks

[Leo]

This should be a good WooCommerce issue.

Unfortunately no one has reported back to us so we don’t know if WooCommerce provided a solution or not.

Best to check with them 🙂

[Rob]

After a fair amount of digging into WooCommerce and experimenting, I found a solution. I have no idea whether the issue is with WooCommerce itself, the jQuery kit they’re using (BlockUI.js), or possibility an incompatibility with GP and/or Beaver Builder, but the following CSS in my child theme’s style.css fixes the issue. The fix also changes the overlay from the WooCommerce default of white (difficult to see) to a dark overlay:

.blockUI.blockOverlay {
background-color: rgba(0,0,0,0.75) !important;
position: fixed !important;
}

[Robert]

Sorry for not reporting back, I don’t think I ever saw the reply. Woocommerce flat out says “it’s the theme” and provides no other information. Yes it could be a combo of things like beaver builder, or elementor and the theme but at some point someone has to step up and take accountability and help to resolve the situation instead of everyone pointing the blame at everyone else. This is a pretty easy thing to test, because you should be able to just add woocommerce, a product and initiate a test checkout to see what the spinner does.

I’ll try Rob’s solution to see if this fixes it, thanks!

[Leo]

You can test it out here: http://demo.generatepress.com/shop/

It’s a WooCommerce spinner so if they think it’s a theme thing, please ask them to provide some specifics.

[Robert]

There’s no button to proceed to checking out to actually test this. You can add something to the cart and go to the checkout page but from there you can’t process the order for testing.

[Leo]

I’m sure Tom tested it before he replied in another post 🙂

I can see the spinner when I remove the added product as well and it seemed normal to me.

Can you please ask WooCommerce why they think it’s a theme issue?

[Patrik]

I have the same issue. When editing cart, animation is ok, but when you click “Checkout” spinner stays at the top of the page.-

Did you manage to solve ths?

[Leo]

Hi there,

It’s a WooCommerce issue unfortunately.

Check out this thread: https://generatepress.com/forums/topic/woocommerce-checkout-spinner-2/

[Robert]

I can agree that this is a Woo issue and they don’t seem to care about doing anything about it. I don’t think they consider it an actual “issue”. I changed to the 2017 theme, disabled all plugins except for Woo and did my check out again. The only difference is that the entire form went semi white and looked “disabled” which gave a better indicator that something was happening. I have to track down if something in the CSS for Generate Press is stopping that from happening or one of my other plugins.

I think those of us who use Woo would owe Tom a great debt if he could (in his spare time) maybe figure out a workaround.

It’s just crappy UI on Woo’s part that it doesn’t scroll or say something like “processing” to indicate something is happening.

[Rob]

Robert, a few posts up I provided a solution that works great for me. Maybe you’ve already tried it and it didn’t work?

[Deniz Akay]

Works perfectly, thx!

[Sam]

thanks this solution also worked for me.

Can’t believe woo can’t be bothered to address such a small issue!

[Author]

Posts