[Resolved] Woocommerce checkout spinner

[Robert]

Hi there,

I posted about this once before and there was another topic related to it but I’m having trouble with Woocommerce on the check out page. If you try to check out there is no actual indicator that it’s processing however if you scroll up you see a little spinner (although the .gif seems to be missing). Do you know of any solution to have the page scroll up or something to indicate check out is processing?

I’ve created a staging site where you can add the product to which I linked to your cart and initiate a check out using a test credit card (it shows on the check out page) if you want to try to go through the whole process.

Thanks.

[Tom]

Hi there,

You seem to have this CSS in your child theme:

.checkout.woocommerce-checkout.processing {
    background-image: url(YOURURL.com/wp-content/plugins/woocommerce/assets/images/select2-spinner.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

Does removing it fix the broken spinner?

[Robert]

Whoops, that was added because by default the spinner doesn’t even show up. I guess I forgot to add a link to an actual GIF, thanks for pointing that out.

The tricky part now is how to scroll up or do something that indicates someone is actually checking out! I’ve emailed Woo about this and they claim it’s the theme etc etc. I’m just trying to get the user experience better. If you have any suggestions that would be great.

[Tom]

Do you have BlockUI set up? If so, I think it may be causing the issue. Can you check without it?

[Robert]

Not sure what that is, where might I find that in the installation?

[Tom]

It might be bundled within one of your plugins. Can you try deactivating the other plugins just to check?

[Robert]

Woocommerce itself uses blockui. wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70

[Robert]

I deactivated all plugins and changed the theme and the only real difference is that when checking out the form gets a white overlay and you see the spinner but only if you scroll up to the top. At this point is isn’t really a GP issue but wondering if there is any help you could give since you’re the man when it comes to this stuff lol.

I just think it’s terrible UX on Woocommerce’s part that the page doesn’t scroll up to where the spinner is to indicate that something is processing or some pop up says “processing”. I guess some plugin is overriding something that is making the form not go to white and “disabled” while it’s processing so I have to look into that further.

I’ve seen a bunch of people complaining about the poor checkout UI on Woo so I’m not the only one.

[Tom]

Might be worth opening an issue on their GitHub page.

Perhaps something like this will work?: https://www.webdesign101.net/show-loading-spinner-whilst-woocommerce-order-processing/

[Robert]

Thanks

[Tom]

No problem 🙂

[Author]

Posts