将 "Ship to a different Address" 复选框更改为字符串

Change the "Ship to a different Address" Checkbox to a String

我目前正在使用 woocommerce 我想知道是否可以将 checkbox 更改为一种字符串 (带有垃圾邮件、标签、..)的锚点。

我要修改的页面是 checkout 页面。在帐单详细信息 下方,客户可以单击一个复选框并放置一个不同的地址。选中其他字段时,会在复选框下方显示。

我想做的是删除复选框并用具有相同目的的字符串替换它。

有人知道我该怎么做吗?

代码:

<h2 id="ship-to-different-address">
  <label for="ship-to-different-address-checkbox" class="checkbox"><?php _e( 'Ship to a different address?', 'woocommerce' ); ?></label>
  <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
</h2>

我将提供一个仅使用 CSS 的解决方案,并对您的 HTML 元素进行轻微的重新排序。 运行 看看它是否有效的代码片段。

本质上,<label> 的样式类似于按钮,复选框隐藏在屏幕外,其 :checked 状态用于设置标签活动状态的样式。

/*hide the checkbox*/
.checkbox-button .input-checkbox:not(:checked),
.checkbox-button .input-checkbox:checked {
  position: absolute;
  left: -9999px;
}
/*style the label like a button */
.checkbox-button .input-checkbox + label {
  font-family: Ariel, sans-serif;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 6px 10px;
  background: #efefef;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
/* style the label/button active state*/
/* (only applied when the checkbox is 'checked' */
.checkbox-button .input-checkbox:checked + label {
  background: #656565;
  color: #ffffff;
  border: 1px solid #888888;
}
<h2 id="ship-to-different-address" class="checkbox-button">
    <input id="ship-to-different-address-checkbox" class="input-checkbox" type="checkbox" name="ship_to_different_address" value="1"/>
    <label for="ship-to-different-address-checkbox" class="checkbox">
      Ship to a different address?
    </label>
</h2>