Adding custom CSS to third party plugin in wordpress through javascript from functions.php

Question

I am trying to hide/show button through CSS for logged-in and not logged-in users. I can do it for the buttons in the theme through Javascript DOM properties. But here the buttons are of a third party plugin and I am trying to achieve it the same way as I would do for a theme button but I am not able to. Here is my code

add_action('wp_head', 'stylebutton', 1, 1);
function stylebutton() {
     if (!is_user_logged_in()) { 
     ?>
    <script type="text/javascript">
    window.addEventListener('load', function() {
    var div = document.getElementsByClassName("bw-widget__cta");
    div[0].style.display = "none";
    });
    </script>
<?php   
 }
}
?>

Answer 1

Using CSS to hide the element works like so:

add_action('wp_head', 'stylebutton');
function stylebutton() {
  if (!is_user_logged_in()) { 
  ?>
  <style type="text/css">
    .bw-widget__cta {
      display: none !important;
    }
  </style>
  <?php   
  }
}
?>

Be careful, though. Since I do not know how the third party plugin's CSS looks like, I added an !important to force-override it. If this doesn't work by any chance, you might have to use the developer tools of your browser to inspect the button element and see which CSS rule has precedence.