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 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.