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;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…