Skip to content

Instantly share code, notes, and snippets.

@eversionsystems
Last active July 24, 2024 23:52
Show Gist options
  • Save eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5 to your computer and use it in GitHub Desktop.
Save eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5 to your computer and use it in GitHub Desktop.
WooCommerce Change AJAX Spinner Gif On Checkout
/*
* Custom AJAX spinner on WooCommerce checkout
* The class used to load the overlay is .blockUI .blockOverlay
* The class used to load the spinner is .woocommerce .loader:before
*
*/
.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
height: 3em;
width: 3em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
display: block;
content: "";
-webkit-animation: none;
-moz-animation: none;
animation: none;
background: url('http://test-site.com/wp-content/themes/boss-child/images/spinning-logo.gif') center center;
background-size: cover;
line-height: 1;
text-align: center;
font-size: 2em;
}
@eversionsystems
Copy link
Author

@ahac it's not possible due to the way WooCommerce uses the same CSS overlay. You'd need to write some JS in order to achieve what you wanted.

@bajoski34
Copy link

how does one trigger the spinner

@StefsterNYC
Copy link

@bajoski34 it gets triggered when a payment button has been clicked.

@jsmusiker
Copy link

@ahac you can just add -

.woocommerce-checkout.processing before the .blockui class

@emmust47
Copy link

I cannon add pseudo element. This is my code:

.woocommerce-checkout .blockUI.blockOverlay::before {
    background-image:url('https://media3.giphy.com/avatars/Packly/C4AvqGR2zXrN.gif') !important;
    background-position: center 50% !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
}

Does anyone have solution for this?

@eversionsystems
Copy link
Author

@emmust47 think you just need to add

content: "";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment