-
Posts
-
Hi,
Currently when a user goes to checkout on my site and submits their credit card info using WooCommerce, the screen will have a semi-transparent white overlay for about 8 sec. and will then bring them to the download page confirming that the order has been processed. There is also a temporary white overlay on the Stripe credit card section of the checkout page that disappears after about 5 sec This has been confusing to people because there is no immediate indication that they can enter credit card info or that the order is processing and they think it didn’t go through.
How can we create a pre-loader to overlay the white overlay so customers know what’s going on?
Hey Mike,
IS that related to our theme?
Have you tried with an other theme and it is not happening?Best regards,
BasilisYes I’m pretty sure it can be fixed in the theme – I haven’t tried another theme because so much of the site is tied in with Enfold that I can’t really recreate the problem. I’ve come across other support requests about the same thing and actually was able to style it so that there’s a pre-loader but the spinner doesn’t look good or fit with the theme. Wasn’t sure if you had a pre-loader specifically for Enfold that I could activate with CSS.
Some other support request examples:
https://kriesi.at/support/topic/checkout-processing-weird-white-overlay/
Hi,
Can you please post your current css/preloader code? Also please make a screenshot which helps us to check why the preloader doesn’t look good or fit with the theme.
Best regards,
Dude.blockUI.blockOverlay {
background-image: url(‘https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif’) !important;
background-repeat:no-repeat !important;
background-position: center center !important;
}Can you tell me how to attach screenshots to these posts – I cannot figure it out.
Hi,
You can use a service like: https://imgur.com/upload and just post the link/url.
Best regards,
DudeHi,
Tbh the screenshots didn’t help me – the preloader position and styling seems to be ok. However I found this post on stackoverflow which may solve your problem: https://stackoverflow.com/questions/42354572/how-to-add-a-loading-spinner-to-woocommerce-checkout-pageYou can try this code:
.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before { height: 3em; width: 3em; position: absolute; top: 90%; left: 50%; margin-left: -.5em; margin-top: -.5em; display: block; content: ""; -webkit-animation: none; -moz-animation: none; animation: none; background: url('https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif') center center; background-size: cover; line-height: 1; text-align: center; font-size: 2em; }Best regards,
DudeYup – pretty tough to get a screenshot of an animated gif and have it well represented. Here’s a link to the gif that should be clearer: https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif
The code works, what I’m trying to figure out is how to link to the pre-loaders that Enfold must already be using (for example the spinner overlaid on a product when you purchase it). Very simple, I just don’t know where they exist.
Hi,
It’s not easily possible to use the same preloader because – from a technical point of view – it’s not an animated image (gif, etc.) but plain css code (code can be found in enfold\css\avia-snippet-site-preloader.css). It’s not possible to load this code like a gif as background image but it would require some time intensive code adjustments (several extra div elements + styling).I’d suggest to use the framework loader gif (url: http://yourwebsite.com/wp-content/themes/enfold/framework/images/icons/loading.gif) or you can download another fancy loader image from websites like: https://www.behance.net/gallery/13765711/GIF-Preloaders-(Free-Download)_1
Best regards,
Dude
- The topic ‘Preloader on WooCommerce Checkout’ is closed to new replies.