Edit CSS of a plugin

Question

I'd like to edit a CSS file that is located at wp-content/plugins/woocommerce-gateway-stripe/assets/css/stripe-styles.css, I tried to overwrite it by placing the edited css in my child theme at wp-content/themes/flatsome-child/woocommerce-gateway-stripe/assets/css/stripe-styles.css, does not work. Second thing I tried is to deregister and dequeque the CSS, in the original plugin it's registered and quequed like this

wp_register_style( 'stripe_styles', plugins_url( 'assets/css/stripe-styles.css', WC_STRIPE_MAIN_FILE ), array(), WC_STRIPE_VERSION );
wp_enqueue_style( 'stripe_styles' );

I've added this to my functions.php

function dequeue_my_css() {
  wp_dequeue_style('wp-content/plugins/woocommerce-gateway-stripe/assets/css/stripe-styles.css');
  wp_deregister_style('wp-content/plugins/woocommerce-gateway-stripe/assets/css/stripe-styles.css');
}
add_action('wp_enqueue_scripts','dequeue_my_css');

But the CSS is still there. Any ideas what it's wrong?

Answer 1

If you want to dequeue an enqueued style you need to use the wp_dequeue_style() function with the handle of the style you want to remove. The handle is the first argument of wp_register_style() and wp_enqueue_style(). In your case that's stripe_styles.

So if you want to deregister and dequeue it:

wp_dequeue_style( 'stripe_styles' );
wp_deregister_style( 'stripe_styles' );

You need to make sure this code is run after the original styles were enqueued or nothing will happen. So you need to check the priority of the wp_enqueue_scripts hook that was used to register the original styles.

In the plugin the wp_enqueue_style() function will have been used inside a function that was hooked into wp_enqueue_scripts, so look for the add_action() that hooks that function and check the 3rd argument. If it doesn't exist then the priority is 10, if it does exist the priority is whatever number is there. Make sure your add_action() has a higher priority.