Support » Plugin: WooCommerce » OMG! – Checkout page with spinning disk, RESOLVED

  • financialcalculators


    I’ve been reading a lot about the spinning wheel that some developers are dealing with on their checkout page. I too had the issue and I’ve stumbled upon another solution, at least for these environments:

    Windows 7 (localhost) / Windows Server 2012
    default versions of IIS
    WordPress 4.7.2
    WooCommerce 2.6.14
    WooCommerce Stripe Gateway 3.0.7

    The images of the credit cards in the payment box are SVG images. If you see them, that means that the .SVG MIME type is supported in IIS. Go to the IIS Server Manager and in the MIME types editor, find .SVG, select it, and click on Remove (don’t worry, you can add it back).

    Reload the checkout page with a hard refresh (in many browsers) that’s a Ctrl-F5. And presto, no more spinning wheel!

    But no more credit card graphics either. 🙁

    So, in:


    find this at about line 163:

    $ext = version_compare( WC()->version, '2.6', '>=' ) ? '.svg' : '.png';

    comment it out and add this line

    $ext = '.png';

    Save, and do the hard refresh again. Presto, now you’ll have credit card images!

    I had tried to add the ‘SVG’ mime type to WordPress via a custom function in functions.php, but this did not work:

    // allow upload/download of EXE files
    add_filter('upload_mimes', 'custom_download_mimes');
    function custom_download_mimes ( $existing_mimes=array() ) {
    // Add file extension 'extension' with mime type 'mime/type'
    //$existing_mimes['extension'] = 'mime/type';
    // add as many as you like e.g. 
    $existing_mimes['exe'] = 'application/octet-stream'; 
    $existing_mimes['svg']  = 'image/svg+xml';
    $existing_mimes['svgz'] = 'image/svg+xml';
    // remove items here if desired ...
    // and return the new full result
    return $existing_mimes;

    I believe the function to be correctly written as the EXE extension works just fine.

    ref: Adding SVG to WordPress

    One final note, after changing the Stripes plugin to serve PNG files, I added the .SVG extension back to the MIME types in IIS. But the spinning disk came back. This means there is another SVG file on the checkout page. I did not yet bother to track this down, so I removed the SVG extension from IIS again.

    This solution is only good if you have access to IIS Manager OR you patch WooCommerce to not serve any SVG files.

Viewing 1 replies (of 1 total)
  • Thread Starter financialcalculators


    Unfortunately, this does not appear to be the solution. The SVG file that WooCommerce was trying to load is :


    In other words, the spinning disk itself. I’m leaving my "fix" in place as it does resolve the problem of the spinning disk and the order processes just fine.

    The spinning wheel is being loaded via jQuery. Below is the call stack. I’m wondering if there isn’t perhaps a bug somewhere that doesn’t unload the svg file? It is beyond my skill to debug this any further.

    Sa	@	jquery.js?ver=1.12.4:3
    css	@	jquery.js?ver=1.12.4:3
    W	@	jquery.js?ver=1.12.4:3
    cb	@	jquery.js?ver=1.12.4:3
    show	@	jquery.js?ver=1.12.4:4
    n.fn.(anonymous function)	@	jquery.js?ver=1.12.4:4
    ob	@	jquery.js?ver=1.12.4:4
    qb	@	jquery.js?ver=1.12.4:4
    g	@	jquery.js?ver=1.12.4:4
    dequeue	@	jquery.js?ver=1.12.4:3
    (anonymous)	@	jquery.js?ver=1.12.4:3
    each	@	jquery.js?ver=1.12.4:2
    each	@	jquery.js?ver=1.12.4:2
    queue	@	jquery.js?ver=1.12.4:3
    animate	@	jquery.js?ver=1.12.4:4
    n.fn.(anonymous function)	@	jquery.js?ver=1.12.4:4
    b	@	jquery.blockUI.min.js?ver=2.70:14
    (anonymous)	@	jquery.blockUI.min.js?ver=2.70:14
    each	@	jquery.js?ver=1.12.4:2
    each	@	jquery.js?ver=1.12.4:2
    a.fn.block	@	jquery.blockUI.min.js?ver=2.70:14
    update_checkout_action	@	checkout.min.js?ver=2.6.14:1
Viewing 1 replies (of 1 total)
  • The topic ‘OMG! – Checkout page with spinning disk, RESOLVED’ is closed to new replies.