Tagged: 

Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #630154

    Hello, I was wondering if it were possible to adding a preloader/spinner during the checkout process while payment is being submitted?

    Currently, when an individual clicks the Place Order button, the page fades to a transparent white while payment is being submitted. Due to outside limitations of individuals such as internet connectivity, this page may sit for a while and my visitors are prone to hit the back or refresh button which causes double payment in some cases.

    Is there a way to replace the transparent white with a preloader/spinner of some sort to help indicate that the payment is still processing?

    Thanks in advance for your help!

    #630285

    Hey nguyen51!

    Everything is possible, but that would need a lot of work to be done.

    You can contact one of our Customization Contractors, who will help you out with the process.

    Let us know if we could do anything else, regarding our theme

    Regards,
    Basilis

    #630299

    Ok… is there just a CSS class that this white overlay is calling from? Perhaps I can just change it to another color or use a background image?

    #630335

    Hi,

    We need to be able to inspect the elements to provide you class name would you mind posting us a link or a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    #782018

    I would second the initial request. Once the woocommerce checkout has clicked. The page just overlays a fading grey window. Which sits there until the payment is processed. This may take 2-5 seconds and there is no real user information like “Please wait. We are processing your payment…” – therefore a short message or a waiting spinner instead of just “fading to grey” would really be helpful. Otherwise the user might “click” somewhere after 3-4 seconds without any information.

    Would that be possible somewhere in the CSS or in the php?

    Thanks & Regards,
    Lars

    #782022

    Hi,
    I found this css with Google, perhaps it will work for you :)

    .processing .blockOverlay {
        background-image:url('IMAGE_URL') !important;
        background-position: center 30% !important;
        background-repeat: no-repeat !important;
    }

    Here’s the image that goes with it:

    Best regards,
    Mike

    #783148

    looks good. thank you!

    #783432

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #898672

    i’m having the same problem, and this code seems not to work for me, the is a way to show as overlay with a spinner after click on “place order”?

    #899052

    Hi Guilherme Pereira,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #899112

    Hi @Victoria, https://www.isopasse.com.br when you click “place order” has that delay 3-6s but the page still the same, with no message like nothing has happen, i whant to put some warning for the customer wait till the thank you page, or a simple spinner with overlay

    #901102

    Hi,

    Please use the following css code to create a preloader. Replace the background value with a gif image.

    
    .checkout.woocommerce-checkout .woocommerce-NoticeGroup {
      z-index: 1000;
    }
    
    .checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup {
      background: rgba(0,0,0,.8);
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup ul {
      display: none;
    }
    

    Best regards,
    Ismael

    #901605

    Ismael, I am mystified as to how to “Replace the background value with a gif image” in the code that you supplied. Would you mind posting an example of what the final code would look like?
    Thanks in advance!

    #901610

    Hi @ismael, i’ve put the code bellow but nothing happens

    /* spinning on checkout */
    .checkout.woocommerce-checkout .woocommerce-NoticeGroup {
      z-index: 1000 !important;
    }
    .checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup {
      background-image:url('https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif') !important;
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
    }
    .checkout.woocommerce-checkout.processing .woocommerce-NoticeGroup ul {
      display: none !important;
    }
    /* spinning on checkout */
    #901851

    Hi,

    The same css code is working on the browser inspector. Please post the login details in the private field so that we can test it. Make sure that the Appearance > Editor panel is enabled.

    Best regards,
    Ismael

    #902089

    Hi @ismael, i’m using a child theme, there is the login and password.

    #902568

    Hi,

    We need this account to be an admin. Please set the user role accordingly.

    Best regards,
    Ismael

    #907296

    Hello Ismael, this is something I’ve been searching for a solution to also as the blank delay time at processing after “place order” is clicked is very confusing for customers as there is no notice (my store page doesn’t even fade down when processing) so it appears “nothing is happening”. I’ve put the image into my library and changed the line in the code above and doesn’t appear to have an affect either. Did you get the example above working and if so what changed were done please? I would like to implement on my site as well. Thank you

    #907657

    Hi,

    The css code should be working as is. If not, please try this instead.

    .blockUI.blockOverlay {
        background-image:url('https://d3hwc4hobpbxnl.cloudfront.net/wp-content/uploads/2017/10/31101105/preloader.gif') !important;
    }

    Adjust the background image url.

    Best regards,
    Ismael

    #907698

    Hello and thank you Ismael. I’m sorry but I want to clarify my understanding quickly. Are you saying to remove the entire large css from further above and replace with just this shorter CSS (with updated background image)? This will provide the checkout spinner while wait time?

    Also, can I put this into the child theme css or better to go into Appearance > customize > Additional CSS ?

    Thank you for explanation.

    #907716

    Hi,

    Yes, you have to remove the previous block of css codes and use the new one. It doesn’t matter where you put it but try the child theme’s style.css file or the theme’s Quick CSS field because the customizer is a little slow.

    Best regards,
    Ismael

    #999656

    This works with WP 4.98, Enfold 4.4.1 (with Child Theme), and WC 3.4.4.

    1) Choose a preloader from https://icons8.com/preloaders/ or https://www.idrive.com/images/ide_loading_new.gif
    2) Download the preloader to your local computer
    3) Upload it to WordPress
    4) Copy the url to your preloader as it now appears in your WordPress install
    5) Replace URL_TO_YOUR_PRELOADER in the following code with the url to your preloader

    /* Checkout page processing spinner */
    .woocommerce-checkout.processing .blockUI.blockOverlay {
    	background-image:url('URL_TO_YOUR_PRELOADER') !important;
    	background-position: center 50% !important;
    	background-repeat: no-repeat !important;
    	position: fixed !important;
    }

    6) Copy the above code as you modified it into your WP Admin Enfold Quick CSS area all the way at the bottom of WP Admin Top Menu > Theme Options > General Styling
    7) Click “Save all changes”
    8) Give it a whirl!

    Tip: Turn on WooCommerce > Settings > Payments > Check Payments for quick processing (although this may be considerably faster than credit card payments, so the preloader may not be onscreen very long). Don’t forget to turn off Check Payments when you’re done.
    Tip: If you don’t see the preloader, try clearing your browser cache, then try again.
    Tip: You may also need to temporarily disable Theme Options > Performance > CSS file merging and compression & Javascript file merging and compression

    9) Once you have verified it’s working, remove the css from the Quick CSS (don’t forget to “save all changes,” and add it to your wp-content/themes/Enfold(-child)/style.css file.
    10) Verify it’s still working.
    11) Enjoy your preloader. :)

    #999688

    Hi,
    Thanks for posting this step by step guide – I’m sure it will help other users too :)

    Best regards,
    Dude

    #1007650

    @PerfectWord

    Thank you!

    Your code worked perfect in regards to styling and etc!

    I just made one simple change to make the snippet target a less specific line, as the one provided did not work.

    I used only .blockUI.blockOverlay instead of .woocommerce-checkout.processing .blockUI.blockOverlay

    Actually, I didn’t see that there was a space in the code, I am sure removing the space or even adding a comma such as .woocommerce-checkout.processing, .blockUI.blockOverlay would’ve worked.

    But anyways, just as well, simply using .blockUI.blockOverlay works perfect, THANK YOU!

    #1007698

    Hey @MrPoBoi — thanks!

    .woocommerce-checkout.processing is there to limit the spinner to the checkout page, rather than having it show up also in the cart. Also it should be separated from .blockUI.blockOverlay with a space, not a comma, just as I have it posted above.

    It’s possible my code wasn’t “working” for you because you just need to clear your cache or turn off enfold css compression (temporarily). We experienced that issue during troubleshooting. Of course, it could have been another reason as well.

    Glad to get you on the right track!

    #1007734

    Hi,

    Awesome! Thanks for update. :)

    Best regards,
    Ismael

    #1033151

    @perfectword

    You are probably way more than correct… I just have so many hacks and edits and changes going on that I needed it to target the entire cart like you are saying, probably because of how I have everything for a one stop checkout.

    I really appreciate you taking the time and providing the first bits of code to get us started and then even coming back and checking up.

    Thanks again, and also thank you to the moderators for this great theme…

    even though I am still waiting on a few “bugs” to get fixed and responded to in regards to this latest release, this is still the best theme out by far!

    #1033250

    @perfectword that worked great! Thank you!

    #1033323

    Hi,

    @canadianllama
    That’s great news, thanks again @perfectword

    Best regards,
    Mike

Viewing 29 posts - 1 through 29 (of 29 total)
  • You must be logged in to reply to this topic.