jquery - 如何将加载微调器添加到 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;} 或应用 1001 的 z-index 对 .gif 进行分层，但也无济于事。

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

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