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 trial

WordPress Ecommerce with WordPress and WooCommerce Running an Ecommerce Site Long Term Bonus Video - How to Begin Customizing WooCommerce Template Files

Danny Dickson
Danny Dickson
19,293 Points
Posted by Danny Dickson
Danny Dickson
19,293 Points

What 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
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

The 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
Danny Dickson
19,293 Points
Danny Dickson
Danny Dickson
19,293 Points

Thanks 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
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Doing !importants and having it load after becomes a pain in the ass to manage later on.

Danny Dickson
Danny Dickson
19,293 Points
Danny Dickson
Danny Dickson
19,293 Points

Yeah, I hate having !important all over my style sheet. This workaround seems like a much better option.

Danny Dickson
Danny Dickson
19,293 Points
Danny Dickson
Danny Dickson
19,293 Points

For 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/