Please consider leaving a donation if you appreciate this information. Lightning network now available
Have you ever been so unfortunate as to experience endless spinners on your WooCommerce checkout page? If so, that can be quite frustrating. It is probably preventing people from checking out on your shop ?It is one of the more common problems that is reported but it is also one of the easiest to troubleshoot and solve yourself. The problem will often appear like the gif below, but do keep in mind that your checkout page may look different depending on what theme is used on your site.
The spinners are normal and expected but only for a very brief period. Usually less than one second. The idea is to prevent customers from completing checkout if they have taken some action that would recalculate the order total such as change the address which would require a re-calculation of shipping costs and/or taxes. The spinners should not persist. If you are experiencing problems of this nature here are a few tips on how you can troubleshoot them yourself.
- The most common cause is JavaScript errors. That might sound a bit scary but it’s really not. You can see these errors in your browser’s developer tools. If you’re on a mac you can bring up the Safari JavaScript console by pressing ⌥+⌘+C on your keyboard at the same time, for Chrome you can use the ⌥+⌘+J key combination and for Firefox that is ⌥+⌘+K. On Windows the key combination would be Ctrl + Shift + I to bring up the developer console on both Chrome and Firefox or press F12 if you are using the Edge browser or Internet Explorer. Once that is visible in your browser window, you can check the console tab for JavaScript errors. JavaScript errors may look something like this:
These types of JavaScript errors are almost always caused by either a plugin or theme conflict. The quickest way to isolate where they are coming from is to switch to a default WordPress theme such as Twenty Seventeen and deactivate all plugins except for WooCommerce. In nearly all cases, that will clear up the JavaScript errors. From there, you can then enable features of your website one-by-one and refresh the checkout page after each one to see which plugin (or theme) causes the JavaScript error to reappear then you know what the offending piece of software is and can contact the appropriate support channels for resolution. - The second most common cause of this is an expired nonce. A nonce is a security token that prevents unauthorized or malicious requests from completing. You can read more about nonces in WordPress here. This is also easy to diagnose, especially so since you now know about your browser’s developer tools. To diagnose if this is the cause, go to the “Network” tab of your developer console and inspect XHR requests. Once there, look for requests to “?wc-ajax=update_order_review” and/or “?wc-ajax=get_refreshed_fragments” one or both may have received an invalid response. You can verify that by clicking on the request and viewing its response tab. If there is a -1 in the response then this is a failed nonce check. This is nearly always caused by an incorrect caching configuration and you may need the help of your host to correct that. It could also be caused by a caching plugin so conflict troubleshooting would be a good first step towards resolution of this type of problem if there are an caching plugins on your website. Here is what that would look like in your developer console:
- Another somewhat common cause for this is a misconfiguration of the web server in combination with an index.html existing in the root directory of your WordPress installation. Diagnosing this is very similar to diagnosing for a failed nonce check. Again, go to the “Network” tab of your browser’s developer tools and inspect XHR requests. If the problem is an index.html file then you will see HTML in the response. An example of what that may look like would be this:
The easiest resolution to this would be to simply remove the offending index.html file but if you do indeed need that then contacting your hosting company is recommended as they would need to update the server configuration to prioritize index.php over index.html.
Please consider leaving a donation if you appreciate this information. Lightning network now available
Leave a Reply
You must be registered and logged in to post a comment.