如何在WordPress中为特定元素或函数执行CSS和JS

Question

I have a WordPress WooCommerce website

I want to execute bootstrap CSS and js for the specific function in my WooCommerce checkout page. My Code is

if( current_user_can('administrator')) {
function display_customers_list() {
// query array
$args = array(
    'role' => 'outlet'
);
$customers = get_users($args);
if( empty($customers) )
return;

echo'<br>';
echo'<h3>Display Customer List</h3>';
echo '<form action="" method="POST">';
echo'<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_name[]" title="Select Customer">';
foreach( $customers as $customer ){
    echo '<option value="'.$customer->data->ID.'">'.$customer->data->display_name.'</option>';
}
echo '</select>';
echo '<input type="submit" value="Select Customer">';
echo '</form>'; 


echo'<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">';
echo'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" />';
echo'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>';
echo'<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>';
echo'<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>';

}   
add_filter( 'woocommerce_before_checkout_form', 'display_customers_list' );
}

The problem is the bootstrap CSS and js also affect the other form fields in my WooCommerce checkout page.

I want to only use in my select box of the function. How can I load this css and js only for my select box in the function and it did not affect my other WooCommerce checkout form fields.

Please help me in this regard.

Answer 1

You can’t use bootstrap css or js only for select box or other html element, unless you have specific css and js for that specific element. You can use functions like wp_enque_script() and wp_enque_style to display on that certain page with is_page() condition. But it will definitely affect whole page, not only specific element.

I’d load the styling you need, then inspect element with new style and copy all styling you see in inspector to new stylesheet, remove bootstrap files and enque new style. Then try adding jquery - basically same way.