Override plugin CSS with custom plugin

Question

I am looking to override a CSS of a plugin with my custom plugin, and avoid using the !important.

At the moment my plugin css is loaded with this code:

function eatsmart_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style', $plugin_url . 'style.css' );

}
add_action( 'wp_enqueue_scripts', 'eatsmart_load_plugin_css' );

For example, I am using a basic CSS and it only overrides with !important

.woocommerce ul.products.columns-5 li.product, .woocommerce-page ul.products.columns-5 li.product {
    width: 20% !important; }

So wondering is there a way to make a priority to this CSS so I follow better practices?

Thanks for the help in advance.

The reason I am doing this with my own plugin because it helps a workflow to code with my code editor through FTP, and I am aware there are plugins that can do it but I want to have fewer installations and learn something new along the way.

Answer 1

You can use wp_dequeue_style to remove the enqueued style and after that, you can add your custom CSS

add_action( 'wp_enqueue_scripts', 'remove_plugin_css_and_add_my_custom_css', 11 );
function remove_plugin_css_and_add_my_custom_css() {
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'your-handle', 'your-css-path' );
}