Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialDanny Dickson
19,293 PointsWhat is the best practice for editing WooCommerce CSS? Specifically the "add to cart" buttons.
So in the video, Zach shows us how to affect the layout of the different product and category styles by editing the php templates. How would we go about editing the WooCommerce specific global css files? Would we put them into a new file in the woocommerce folder in our child theme, the root of our child theme, or into our main style.css? I've found that I am able to edit the css classes by inspecting the element and pasting that code into my style.css file, but am having to add !important on everything. I know this can't be the best way to accomplish this.
1 Answer
Sue Dough
35,800 PointsThe reason you have to add !important is because Woo-Commerce CSS file is loading after your stylesheet. It seems some people have made work around functions for example http://wordpress.stackexchange.com/questions/135171/woocommerce-include-custom-stylesheet-after-woocommerce-styling .
Danny Dickson
19,293 PointsDanny Dickson
19,293 PointsThanks for the quick response. Seems easy enough. I was always able to achieve what I wanted, but this makes it so the CSS doesn't feel as hacked. I appreciate the help and clarification.
Sue Dough
35,800 PointsSue Dough
35,800 PointsDoing !importants and having it load after becomes a pain in the ass to manage later on.
Danny Dickson
19,293 PointsDanny Dickson
19,293 PointsYeah, I hate having !important all over my style sheet. This workaround seems like a much better option.
Danny Dickson
19,293 PointsDanny Dickson
19,293 PointsFor those using Genesis as your framework with WordPress, I found this as well. Same concept as ghost code's comment above, but specific to Genesis: http://www.carriedils.com/woocommerce-genesis-important-style/