如何将加载微调器添加到WooCommerce Checkout页面

Question

我想在WooCommerce结帐页面添加一个加载微调器.gif。它必须在按下提交付款按钮后出现。

我目前正在使用此代码：

.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是否隐藏了它。我试图用以下方法删除阻止UI：

.blockUI.blockingOverlay {display: none;}或者应用z-index 1001来覆盖.gif但也无济于事。

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

Answer 1

这是一个不错的插件，https://codecanyon.net/item/wooloader/22355988。 您可以上传和使用自定义GIF / SVG加载微调器。 干杯！！

Answer 2

请在以下部分尝试此操作。

请复制woo-commerce插件文件夹（plugins / woocommerce / assets / js / frontend）checkout.js并粘贴到活动主题文件夹中，然后在function.php中添加以下代码

然后，您可以在主题checkout.js文件中添加自定义操作。

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' );

Answer 3

在自定义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;

}