search

olefredrik / FoundationPress

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
https://foundationpress.olefredrik.com
MIT License
2.71k stars 872 forks source link

Override WooCommerce styles #1106

Closed asmundsollihogda closed 6 years ago

asmundsollihogda commented 6 years ago

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.

olefredrik commented 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?

colin-marshall commented 6 years ago

@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.

asmundsollihogda commented 6 years ago

@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.

colin-marshall commented 6 years ago

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.

asmundsollihogda commented 6 years ago

The problem is that my overriding styles only work when I add !important

colin-marshall commented 6 years ago

@asmundsollihogda did you verify that the WooCommerce css file is being loaded before the app.css?

asmundsollihogda commented 6 years ago

@colin-marshall It's probably loading after app.css... and thats where the problem lays.

colin-marshall commented 6 years ago

@asmundsollihogda view source to find out for sure.

asmundsollihogda commented 6 years ago

@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>
colin-marshall commented 6 years ago

@asmundsollihogda that's javascript, not CSS. Look in the <head> section.

colin-marshall commented 6 years ago

@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.

asmundsollihogda commented 6 years ago

@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.

screen shot 2017-10-11 at 18 04 45 screen shot 2017-10-11 at 18 04 26
colin-marshall commented 6 years ago

@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.

asmundsollihogda commented 6 years ago

@colin-marshall You are completely right. Thank you so much for helping me along. Have a great day!