Enable specific CSS Code for Visitors and specific Roles

Question

how i can enable an specific css code for visitors and an specific user role

for example this code:

input[type=radio] {
    border: 1px solid !important;
}

Answer 1

You can add custom css on your html header using wp_head hook action & checking your current User Role

add_action('wp_head', 'add_css_of_current_specific_user_role');
function add_css_of_current_specific_user_role()
{ 
    /*Check Current User is Login*/
    if ( is_user_logged_in() ) 
    {  
       $user = wp_get_current_user();
       /*Check Current User Role*/
       if (in_array('visitor', $user->roles)) { ?>

            <style>
              // Some CSS
            </style>

    <?php } 

    }
}

Answer 2

If you want to have specific CSS for visitors (aka not logged users) then you can take @HK89's code and tweak it a bit

add_action('wp_head', 'add_css_of_current_specific_user_role');
function add_css_of_current_specific_user_role()
{ 
    /*Check if it's a visitor*/
    if ( !is_user_logged_in() ) 
    {  ?>
        <style>
            // Some CSS
        </style>
    <?php } 

    }
}

Answer 3

i tried this code in the functions.php for showing to the guests this css

how is that possible

add_action('init', 'check_if_user_is_loggedin_function');
function check_if_user_is_loggedin_function()
{
    if ( is_user_logged_in() ) 
    {
} 
    else {
    echo '<style>
            .woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item.button-variable-item-offen {
            display: none;
            }
            .woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item.color-variable-item-offen {
            display: none;
            }
        </style>';
}
}