Woocommerce: Loading Circle / Spinner position based on Scroll (Checkout Page)

Created on 2 Oct 2015  路  3Comments  路  Source: woocommerce/woocommerce

Situation

When a user goes to Checkout page & while is entering, modifying billing/shipping/shipping methods/payment information, the responses are updated via Ajax while showing a 'Loading Circle/Spinner'

For some users, (when they're at bottom half of the page) the circle is loading above-the-fold & they can only see it, if they scroll up.

Questions

A) Is there a way we can move this Loading Circle based on page's scroll position?

B) Or force it to render in center of the screen, irrespective of the container height - making it always visible to the user?

Most helpful comment

.woocommerce .blockUI.blockOverlay:before {
position:fixed!important
}

It works fine!

All 3 comments

Hi @tushonline,

I think your observations may be theme specific. Have you tried using a default theme? Try out Storefront for testing purposes and see if you run into the same issue: https://wordpress.org/themes/storefront/

Must be theme related because WC shows a spinner in each updating area (payment and shipping) centred. Also these areas are greyed out on load.

.woocommerce .blockUI.blockOverlay:before {
position:fixed!important
}

It works fine!

Was this page helpful?
0 / 5 - 0 ratings