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

Question

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

像这样：

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

我已经尝试了各种方法来实现这一点，但似乎都没有奏效。我试过使用 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);

但这些方法都不起作用。这是我试图定位的状态字段的代码：

Answer 1

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

伪元素和 SELECT 标签

和

<select> 和 :after 在 WebKit 中的 CSS 问题

现在，为了让 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;
}

上面的代码片段将生成一个新的文本字段。一种使其按您想要的方式工作的方法，您可以执行以下操作：

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