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

Question

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

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:

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

Answer 1

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