Closed asmundsollihogda closed 6 years ago
Hi. I have limited experience with WooCommerce myself. But my gut feeling says @colin-marshall might have some insight and knowledge on this topic?
@asmundsollihogda WooCommerce css should be loading before app.css
by default. Just add your WooCommerce override styles in FoundationPress like you would normally add styles and that should be all you need to do.
@colin-marshall Hi! Did not really find a good way to do this (I'm a novice in WooCommerce) so decided to disable all WC stylesheets with a line in functions.php.
There's no need to do that. Use your browser's inspector tool to find the exact classes you need to to target to make changes on specific elements.
The problem is that my overriding styles only work when I add !important
@asmundsollihogda did you verify that the WooCommerce css file is being loaded before the app.css
?
@colin-marshall It's probably loading after app.css... and thats where the problem lays.
@asmundsollihogda view source to find out for sure.
@colin-marshall It loads after the footer:
</footer>
</div>
<script type='text/javascript' src='//localhost:3000/wp-includes/js/admin-bar.min.js?ver=4.8.2'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"Visa varukorg","cart_url":"http:\/\/localhost:3000\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='//localhost:3000/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70'></script>
<script type='text/javascript' src='//localhost:3000/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=3.1.2'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","fragment_name":"wc_fragments_d6846d83a1edeb7305df58cccc9f6939"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost:3000/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=3.1.2'></script>
@asmundsollihogda that's javascript, not CSS. Look in the <head>
section.
@asmundsollihogda I tested this and the WooCommerce CSS loads before app.css
without having to change anything. I was also able to override WooCommerce styles easily without the use of !important
. The inspector will show you the exact elements classes you need to target for the overrides. Those are the classes that show up with black text (as opposed to grey text) in the styles tab.
I'm going to close this. If you still have questions, feel free to reopen.
@colin-marshall I've been testing this some more now, and it seems that even if my app.css correctly loads after the woocommerce-stylesheets, their styles gets a higher priority. I've made a .button class directly in the app.scss file to illustrate what happens and attached two screenshots. Thank you for your assistance.
@asmundsollihogda as I stated in my last post you are using the wrong selectors to override. The inspector tells you exactly what selectors to use to override. Look from the top down at the selectors in black.
Most CSS rules for the button will be overridden with .woocommerce a.button { }
but text-decoration
and margin-top
have higher priority rules on them so you will need to use the selectors above those rules to override them.
@colin-marshall You are completely right. Thank you so much for helping me along. Have a great day!
Takk Ole Fredrik for a truly great FoundationPress!
What would be the best way prioritise FoundationPress styles over the default WooCommerce styles? I would like to base my design on as much original WC styles as possible, but add alterations.