No overlay with spinner when placing order

Hi!

Thanks for the great theme. There’s a UI bug I noticed on checkout page.

When you click “Place Order” button WooCommerce JS should place overlay with spinner over the whole page to indicate payment is processing and preventing you from clicking the button again. This is done with jQuery BlockUI library that they use.

In Leto theme however this overlay does not appear - you can see it on your demo as well.

Can you please suggest what the reason may be so I can fix locally? Would be great if you could apply this fix in future releases as well.

Thanks!

Hi,

Leto theme disables the overlay when adding product to cart by design purpose. But I will try passing your request to our development team to check whether we can add it in the future or not.

Regards,
Kharis
aThemes Support

Hi! Thanks! It’s not about the add to cart overlay, but the one that appears when you click “place order” - with credit card gateway, for example, the processing takes about 5-10 seconds and nothing is prompting user anything’s happening.

Hi there,

We’ve found the problem and it’s mostly fixed. The update will be available a bit later, once the fix is done completely.

Vlad

Hi Vlad,

Wow, thanks a lot for the help. If you could provide the fix details once it’s done, it would be fantastic. I’ve heavily customized the theme, so will need to apply that manually. Thanks again!

This would be the code you need:

form.woocommerce-checkout {
  overflow: hidden;
}
form.woocommerce-checkout .blockUI.blockOverlay::before {
  height: 1em;
  width: 1em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -.5em;
  margin-top: -.5em;
  content: '';
  animation: spin 1s ease-in-out infinite;
  background: url(../../plugins/woocommerce/assets/images/icons/loader.svg) center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
  color: rgba(0,0,0,.75);
}

The first part fixes the overlay not showing and the second adds the spinner. So you can remove it if you don’t want the spinner.

Great, thank you! The overlay does work right away, not so much the spinner, but it’s ok, I’ll investigate it separately. Thanks for your help!

Show me a link to your site please so I can fix it in the theme too if there’s any issue. It was working fine locally.

thanks, no worries. I’ll deal with it later - there are way too many customizations there and I need to fix some other CSS now as well, so no problem.