Woocommerce 结帐表单如何在“状态”字段下添加注释答案

【问题标题】：Woocommerce checkout form how to add a note under the State fieldWoocommerce 结帐表单如何在“状态”字段下添加注释
【发布时间】：2021-01-22 18:51:56
【问题描述】：

我正在尝试在结帐表单的状态字段下直接添加注释：

这样的：

“如果您需要在北卡罗来纳州或南卡罗来纳州以外邮寄药物，或者您不是客户，请致电”。

我尝试了各种方法来实现这一点，但似乎都没有奏效。我尝试过使用 CSS：

 #billing_state:after {
    content: "If you need medication mailed outside of NC or SC, or you are not a client, please call";
    font-size: 14px;
    color: red;
  }

我也尝试将其添加到 functions.php 文件中：

 add_filter('woocommerce_form_field_text', function ($field, $key, $args, $value) {
     if ($key === 'billing_state') {
         $field .= 'If you need medication mailed outside of NC or SC, or you are not a client, please 
         call';
     }

     return $field;
 }, 10, 4);

但是这些方法都不起作用。这是我要定位的 state 字段的代码：

【问题讨论】：

标签： php wordpress woocommerce woocommerce-theming woocommerce-checkout-fields

【解决方案1】：

您的 css 规则不起作用，因为它是一个 select 标签，您不能在 select 标签上使用 css pseudo elements！！！如果您想了解有关此主题的更多信息，可以在以下页面上阅读：

Pseudo elements and SELECT tag

和

problem with <select> and :after with CSS in WebKit

现在，为了让 css 规则按照您想要的方式工作，您需要使用 css 定位不同的 html 元素！

.woocommerce p#billing_state_field::after{
  content: "If you need medication mailed outside of NC or SC, or you are not a client, please call" !important;
  font-size: 14px;
  color: red;
  padding: 5px;
}

这应该可以，但如果没有，那么我将使用以下方法作为alternative way：

add_filter('woocommerce_checkout_fields', 'custom_checkout_notice', 20);

function custom_checkout_notice($fields){
  $fields['billing']['custom_notice'] = array(
    'label' => 'If you need medication mailed outside of NC or SC, or you are not a client, please call',
    'priority' => 65 # you could change this number to move the notice up and down the list!
  );
  return $fields;
}

上面的sn-p，会生成一个新的文本域。一种使其按您想要的方式工作的方法，您可以改为执行以下操作：

add_filter('woocommerce_checkout_fields', 'custom_checkout_notice', 20);

function custom_checkout_notice($fields){
  $fields['billing']['custom_notice'] = array(
    'type' => 'text',
    'label' => '',
    'placeholder' => 'If you need medication mailed outside of NC or SC, or you are not a client, please call',
    'priority' => 65 # you could change this number to move the notice up and down the list!
  );
  return $fields;
}

然后将其添加到您的活动主题或活动子主题的样式表中！

input#custom_notice{
  border: none !important;
  outline: none !important;
}

【讨论】：