Last active
March 27, 2023 11:49
-
-
Save eversionsystems/9c1845cc3a18209d4a6eb8ed5d5221a5 to your computer and use it in GitHub Desktop.
WooCommerce Change AJAX Spinner Gif On Checkout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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; | |
} |
for me, works only when i put the "!Importantt"
Tks!
for me, works only when i put the "!Importantt"
Tks!
You need to ensure your custom CSS is loaded last, it will then take precedence and "!important" is not required. Glad it works though :)
This adds the spinner to every overlay (when adding item to cart, removing it, etc.). How could I show it only after the "place order" button is clicked?
@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.
how does one trigger the spinner
@bajoski34 it gets triggered when a payment button has been clicked.
@ahac you can just add -
.woocommerce-checkout.processing before the .blockui class
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was helpful. Thank you. I just want to say that in my case there was no need to do anything but center the default spinner vertically, so all I needed for CSS was "position:fixed".