Woocommerce styles overwriting Foundations

[dberz]

Ole - your work on this project is amazing and invaluable - thank you!

Question, I've used your theme with woocommerce on a few projects but the woocommerce styles seem to take precedence over the Foundation styles (ex. button styles).

Is there a way to load the woocommerce styles first so that the foundation styles overwrite them?

Here's an example of the woocommerce styles cascading above my foundation SASS: http://parsleyhealth.co/shop/

Thanks!

[olefredrik]

Hi. You could force wp_enqueue_style to load css/foundation.css at the very bottom of the head tag to override all CSS rules (that would be woocommerce in your case). Haven't tried this trick myself, but it might be worth a try.

http://stackoverflow.com/questions/4212436/how-to-force-wp-enqueue-style-to-display-css-at-the-very-bottom-of-the-head-tag

[dberz]

Thanks. Trying the approach you suggested (leveraging the "$deps" argument to load app.css after the woocommerce styles)" but I must be doing it incorrectly as app.css is still the first thing loaded below the <title>.

I added the "//enqueue styles" block below the default "//enqueue scripts" calls in enqueue-scripts.php

// enqueue scripts
wp_enqueue_script('modernizr');
wp_enqueue_script('jquery');
wp_enqueue_script('foundation');

// enqueue styles
wp_enqueue_style( 'app', get_template_directory_uri() . '/css/app.css', array('woocommerce-general', 'woocommerce-layout', 'woocommerce-smallscreen') );

That said, when I use the Chrome Inspector to manually move app.css below the woocommerce css' I still see the woocommerce button, h6 and other styles taking precedence.

Given this, I'm considering removing the woocommerce.css file (but keeping the woocommerce-layout-css) and overriding a few of the styles manually.

Any additional thoughts are greatly appreciated!

Thanks.

[olefredrik]

Can you check if this issue is still relevant with the latest version of FoundationPress?