[How to] Fix Plugin CSS Issues Using CSS Overrides

For some plugins you may need CSS styling to be changed, but if you change the plugin files, either you won’t update it, or you will lose your changes. I will show you a simple trick to overcome this problem using seperate stylesheets.

Problem is generally caused by loading of plugins stylesheets is later then theme stylesheet:

...
 <!-- Theme Stylesheet -->
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/style.css" />
 <?php wp_head(); // <- This is where your plugin stylesheets and scripts are generated ?>
 ...

Simple Fix using seperate CSS files

You can easily overwrite plugin styles using a seperate stylesheet file, for example overwrites.css. Then in your header.php file, insert it using:

...
 <!-- Theme Stylesheet -->
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/style.css" />
 <?php wp_head(); // <- This is where your plugin stylesheets and scripts are generated ?>
 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/overwrites.css" />
 ...

This fix is aimed for basic users. For advanced users, I recommend using wp_dequeue_style function to remove plugin stylesheets. After you dequeue stylesheets, you need to include/write required CSS rules yourself.

I hope this trick helps you with your styling issues.

Search Queries: wordpress fix plugin css, wordpress css issues, wordpress theme css issue