Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Override WooCommerce styles #1106

Closed
asmundsollihogda opened this issue Oct 6, 2017 · 14 comments
Closed

Override WooCommerce styles #1106

asmundsollihogda opened this issue Oct 6, 2017 · 14 comments

Comments

@asmundsollihogda
Copy link

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
Copy link
Owner

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
Copy link
Collaborator

@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
Copy link
Author

asmundsollihogda commented Oct 6, 2017 •
edited
Loading

@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
Copy link
Collaborator

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
Copy link
Author

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

@colin-marshall
Copy link
Collaborator

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

@asmundsollihogda
Copy link
Author

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

@colin-marshall
Copy link
Collaborator

@asmundsollihogda view source to find out for sure.

@asmundsollihogda
Copy link
Author

@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
Copy link
Collaborator

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

@colin-marshall
Copy link
Collaborator

colin-marshall commented Oct 10, 2017 •
edited
Loading

@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
Copy link
Author

@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
Copy link
Collaborator

@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
Copy link
Author

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@olefredrik @colin-marshall @asmundsollihogda