在 WooCommerce 结帐页面中设置付款方式的样式（需要自定义 Javascript）

Question

我需要一些关于自定义 Javascript 的帮助。

我正在尝试在 WooCommerce 结帐页面中设置付款方式选择的样式：

我希望能够分别设置付款方式的未选中、选中和悬停状态。

我能够使用 CSS 设置付款方式的常规和悬停状态。

但是，无法单独设置付款方式的选中状态的样式，因为选中和未选中的 CSS 类之间没有区别。根据 WooCommerce 插件支持，这需要自定义 Javascript 来帮助识别选中状态。

自定义 Javascript 应该是什么样的？

Answer 1

没有你的 html，你可以很容易地用 css 做到这一点：

这是一个例子：

input:checked + label {
  font-weight: bold;
}
input[type="radio"] {
  display: none;
}

input[type="radio"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: gray;
}

input[type="radio"]:checked + *::before {
  background: radial-gradient(teal 0%, teal 40%, transparent 50%, transparent);
  border-color: teal;
}
input[type="radio"]:checked + * {
  color: teal;
}

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

对于您的示例，您必须设置 important 以覆盖 woocomerce 设置 信用卡的 CSS 示例：

#payment_method_stripe:checked + label {
    font-weight: bolder !important;
    font-size: larger !important;
    color: yellow !important;
}

您使用 paypal id payment_method_paypal 做同样的事情