如何将加载微调器添加到 WooCommerce 结帐页面答案

【问题标题】：How to add a loading spinner to WooCommerce Checkout page如何将加载微调器添加到 WooCommerce 结帐页面
【发布时间】：2017-07-10 07:45:25
【问题描述】：

我想将加载微调器 .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 是否隐藏了它。我试图通过以下方式删除阻止的 UI：

.blockUI.blockingOverlay {display: none;} 或应用 z-index 或 1001 对 .gif 进行分层，但也无济于事。

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

【问题讨论】：

标签： jquery css wordpress woocommerce

【解决方案1】：

在您的自定义 CSS 文件中试试这个：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试下面这个部分。

请复制 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' );

【讨论】：