WooCommerce - How to prevent Storefront from loading woocommerce.css after the child theme's stylesheets

Question

I'm working on a WooCommerce store using WordPress 4.7, Storefront 2.1.6 and my own Storefront child theme. But Storefront seems to load a woocommerce.css after my child theme's css (compiled scss) so it overwrites some of my styles. Using '! important' on all these styles seems to be a dirty and unacceptable solution to me. Is there a way to prevent Storefront from loading the woocommerce.css or to load my own styles as the last stylesteet file?

Thx

Answer 1

I was having the same issue where I would have needed to use !important on everything.

So I looked at the source code and could see that my stylesheet was loaded before woocommerce's stylesheet.

(I'm using my own child theme and I'm on WP 5.5.1 and WooCommerce 4.5.2)

I found that WooCommerce loads the stylesheet with a hook with priority 10.

add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ), 10 );

So I changed my stylesheet hook in my functions.php, to priority 11. So it loads later.

add_action( 'wp_enqueue_scripts', 'fitcoach_scripts', 11);

Answer 2

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

https://docs.woocommerce.com/document/disable-the-default-stylesheet/