Wordpress hide any html element by css when user-role

Question

i like to hide the booking_form_request by css when the user role is subscriber. please can you repair my code:

if( current_user_can('subscriber')) { 
   booking_form_request {
 display: none!important; 

Answer 1

Have you tried adding the PHP code onto the page where your form is? For example like this

<?PHP if( !current_user_can('subscriber')) { ?>
<form> 
...
</form> <?PHP } >?

This should only display the form to users that are not subscribers

Answer 2

The code you provided is almost correct, but you need to use the proper CSS selector for the booking_form_request element and wrap your CSS code inside the curly braces of a CSS rule. Here's the corrected code:

if ( current_user_can('subscriber') ) { 
   echo '<style>
      .booking_form_request {
         display: none !important;
      }
   </style>';
}

In the code above, we first check if the current user has the 'subscriber' role using the current_user_can() function. If they have the 'subscriber' role, we output the CSS code using the echo statement.

The CSS code targets the booking_form_request element using the CSS class selector .booking_form_request. We set its display property to none to hide it from the page. We also use the !important keyword to ensure that our CSS rule overrides any other CSS rules that may be affecting the element.

Note that you should add this code to your WordPress theme's functions.php file or a custom plugin, rather than directly to your WordPress pages or posts.