title: WooCommerce change loading spinner icon
body: <p>IM trying to change the WooCommerce loading spinner icon. It's defined in the woocommerce.css:</p>
  
  <pre><code>.woocommerce .blockUI.blockOverlay::before {
      height: 1em;
      width: 1em;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -.5em;
      margin-top: -.5em;
      content: '';
      -webkit-animation: spin 1s ease-in-out infinite;
      animation: spin 1s ease-in-out infinite;
      background: url(../images/icons/loader.svg) center center;
      background-size: cover;
      line-height: 1;
      text-align: center;
      font-size: 2em;
      color: rgba(0,0,0,.75);
  }
  </code></pre>
  
  <p>I've tried changing the loader.svg with a custom css:</p>
  
  <pre><code>.woocommerce .blockUI.blockOverlay::before {
       background: url(http://www.localhost.de/wp-content/uploads/custom-loader.svg) center center !important;
  }
  </code></pre>
  
  <p>But the icon will not change. So I've googled a bit and found this here:</p>
  
  <pre><code>add_filter( 'woocommerce_ajax_loader_url', 'custom_loader_icon', 10, 1 );
  function custom_loader_icon() {
      return __( get_home_path() . 'wp-content/uploads/custom-loader.svg', 'woocommerce' );
  }
  </code></pre>
  
  <p>But the loading spinner icon is still the same. What can I do to change it? I don't know what I should try now...</p>