How to solve this CSS issue?

[Bader]

I'm using Woocommerce on my website and copied its CSS into the Child Theme's CSS file.
As it seems the Woo CSS overrides the Theme's CSS for buttons.

This is how the buttons of the Child Theme looked like before I pasted the Woo CSS:

https://www.dropbox.com/s/bo267umanbuutt0/screen-capture-291.png

And this how they look like after pasting the Woo CSS into the Theme's one:

https://www.dropbox.com/s/fg3c9q8f53ufm46/screen-capture-292.png

≈≈≈

Is there a way to separate the effects of each CSS (so that Woo affects only its parts) while keeping both CSS codes in one file?

Thanks in advance for your time and effort 🙂

---

“Whether you think you can, or you think you can’t–you’re right.”
?• Henry Ford

http://www.arganfarm.com/

[Tom]

I think you can fix this with some help from Carrie Dils:

WooCommerce & Genesis: An !Important Style Tip For You

Genesis Style Trump plugin

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Bader]

Thank you for the fast reply and the hint Tom.

Unfortunately neither the code for the functions.php nor the plugin did the trick ;(

Now I also realized that not only Woo's CSS messes up the Theme's (Original Agency Pro Home button) but the the Theme's CSS also messes up the Woo buttons & text color in the Cart view! lol

---

“Whether you think you can, or you think you can’t–you’re right.”
?• Henry Ford

[Tom]

OK. What if you were to go back to basics and remove the Woo CSS from the theme style.css? I'm not sure what benefit comes from combining the two and it can lead to complications. In a quick test setup with Agency Pro, Woocommerce plugin and the Genesis Connect for WooCommerce plugin, the problem from your DropBox screencaps does not arise.

For those situations where you need to restyle a Woo element the 'Trump' plugin should work well - you should only need to add to the theme style.css those specific Woo elements (and "!important" should not be required).

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Bader]

If I still remember right, I think I read somewhere that bundling the CSS into one file would affect site speed. Don't ask me how or why though (am a noob) 🙂
Site speed is also the same reason why I try to avoid adding more plugins, especially if there's a way around it.

I just removed the Woo css from the Theme style.css and re-pasted a fresh one + I added define('WOOCOMMERCE_USE_CSS', false); to the theme's funcotions.php and till now everything seems to work fine.

Thank you for taking the time to address my issue Tom.

Have a great time!

---

“Whether you think you can, or you think you can’t–you’re right.”
?• Henry Ford

[Tom]

Glad to see that you're back on track.

Having an extra request to the server for that one style sheet probably won't affect your site performance appreciably, but when the requests begin to stack up it can become an issue. The same applies for plugins but if that functionality (i.e. code) is required, it needs to be ~somewhere~ and a plugin is not necessarily a problem. In fact it can be a better alternative if it is well written and maintained. Austin Gunter has a good take on this here:
Plugins and Fast WordPress Sites – It’s not the Number of Plugins, It’s the Quality

Good that you are at least aware of these so that you can tweak performance as required.

Good luck with your new site!

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Bader]

Thank you Tom.

Indeed, it's the stacking up of the requests I'm trying to avoid.
Great article (and awesome hint about the P3 plugin in the comments!) by the way.

Cheers!

---

“Whether you think you can, or you think you can’t–you’re right.”
?• Henry Ford

[Author]

Posts