CODEWITHSUNDEEP
jquerycsswordpresswoocommerce
Gavin Reynoldson
Gavin Reynoldson

Reputation: 631

How to add a loading spinner to WooCommerce Checkout page

I want to add a loading spinner .gif to the WooCommerce checkout page. It needs to appear after the submit payment button has been pressed.

I am currently using this code: 

.checkout.woocommerce-checkout.processing {
background-image:url('https://wp-content/plugins/woocommerce/assets/images/Preloader_2.gif');
background-position: 50% 84%;
background-repeat: no-repeat;
}

I am placing the code in Woocommerce.min.css and the preloader .gif is in the the file path as specified above.

The .gif isnt showing at all on checkout. I'm wondering if the blockUI blockOverlay is hiding it. I have tried to remove the blocking UI with:

.blockUI.blockingOverlay {display: none;} or to apply a z-index of 1001 to layer the .gif but also to no avail.

I have attached a screenshot of the blockUI in Firebug.

enter image description here

Upvotes: 2

Views: 13656

Answers (3)

bratze49
bratze49

Reputation: 11

Try this in your custom CSS file:

.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
  height: 3em;
  width: 3em;
  position: absolute;
  /* This was on 90%, should be 50% */
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  display: block;
  content: "";
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
  background: url(".../path/wp-content/plugins/woocommerce/assets/images/select2-spinner.gif")
    center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
}

Upvotes: 1

VinothRaja
VinothRaja

Reputation: 1413

Try this below section.

Please copy the woo-commerce plugin folder (plugins/woocommerce/assets/js/frontend) checkout.js and paste in your active theme folder and add following code in your function.php

and after then you can add your custom action in theme checkout.js file.

function so_27023433_disable_checkout_script(){
    wp_dequeue_script( 'wc-checkout' );
    wp_enqueue_script('checkout',  get_template_directory_uri() . '/js/checkout.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'so_27023433_disable_checkout_script' );

Upvotes: 0

Looytawon
Looytawon

Reputation: 105

This is a good plugin to use, https://codecanyon.net/item/wooloader/22355988. You can able to upload and use your custom GIF/SVG loading spinner. Cheers.!

Upvotes: 0

Related Questions