如何將加載微調器添加到WooCommerce結帳頁面

Question

我想添加加載微調器.gif到WooCommerce結帳頁面。它需要在提交付款按鈕被按下後出現。

我目前使用此代碼：

.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; 
} 

我放置代碼Woocommerce.min.css和.gif是在該文件路徑作爲上述規定的預加載。

.gif在結帳時不顯示。我想知道blockUI blockOverlay是否隱藏它。我試圖刪除阻止用戶界面：

.blockUI.blockingOverlay {display: none;}或應用z-index的1001來覆蓋.gif但也無濟於事。

我附上了Firebug中的blockUI的屏幕截圖。

Answer 1

在自定義的CSS文件試試這個：

.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before { 
height: 3em; 
width: 3em; 
position: absolute; 
top: 90%; 
left: 50%; 
margin-left: -.5em; 
margin-top: -.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; 

}