Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
188 views
in Technique[技术] by (71.8m points)

php - Add a note under the State field on Woocommerce checkout form

I'm trying to add a note directly under the state field on the checkout form:

enter image description here

With something like this "If you need medication mailed outside of NC or SC, or you are not a client, please call".

I've tried various methods to accomplish this, but none seem to work. I've tried using 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;
  }

I've also tried adding this to the functions.php file:

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

But neither of these methods are working. This is the code for the state field I'm trying to target:

enter image description here

question from:https://stackoverflow.com/questions/65851109/add-a-note-under-the-state-field-on-woocommerce-checkout-form

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Your css rules didn't work because it's a select tag and you can't use css pseudo elements on select tags!!! If you want more info on this topic, you could read about it on the following pages:

Pseudo elements and SELECT tag

and

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

Now in order to get css rules to work the way you want it, you need to target a different html element with your css!

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

This should work but if it didn't, then I would use the following method as an 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;
}

The snippet above, will generate a new text field. A way to make it work the way you want, you could do the following instead:

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

and then add this to your style sheet of your active theme or active child theme!

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...