How to remove pop up on website (css changes not visible)?

Question

Since you have already made changes in various files, the code you are looking for can be found in the following file: /assets/0.2.8/css/style.css

Search around line 702 in FF devTools – may differ in other browser or in the original file:

.popup {
    letter-spacing: .1em;
    text-align: left;
    overflow: auto;
    z-index: 95
}

There, simply add display: none;. Alternatively, you can also add .popup {display: none;} to the very end of the mentioned file. Personally, I always try to avoid using !important first.

If no other rule is added for the popup at a later stage (e.g. through JavaScript), this should do the job. However, always keep in mind that updating may overwrite your modified files!

With that in mind, here is another solution. The prerequisite is the use of a child theme, otherwise you end up in the same update dilemma again. Place one of the following examples in your child theme’s functions.php or if for any reason you no longer update your theme, in your theme’s function.php. I’ve set the priority of the action hook to 99 for later execution, but you can use a different value (default: 10).

Use the CSS version to hide the element (again with or without !important):

add_action( 'wp_footer', function() {
   ?>
   <style>
       .popup {
           display: none !important;
       }
   </style>
   <?php
}, 99 );

Use the JavaScript/jQuery version to remove the element (be sure jQuery is loaded):

add_action( 'wp_footer', function() {
   ?>
   <script>
      jQuery( document ).ready( function( $ ) {
         $( '.popup' ).remove();
      } );
   </script>
   <?php
}, 99 );

It would be worth mentioning that, of course, all elements with the .popup class would always be affected – on all pages, posts and custom post types. So, if you want to limit this behavior to specific pages/posts, get the current page first before running the action hook.

As usual for WordPress, there are of course also various plugins with which you can place PHP, JS and CSS code in all possible places in WP, but that would go beyond the scope here.

Last but not least, you can also use the WordPress Customizer to add some custom CSS. In your case this would be .popup {display: none;} – with or without using !important.

Related Posts: