Build Your Own Business Website header image

Integrating WooCommerce with Thesis 2 – Part 16 – How to Make Stylistic Changes to WooCommerce Elements

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

I know you’re going to ask the question, “Okay well, how do I change these kinds of colors like Add to Cart and this 43 color and then this roundish color here”. So we’re going to make some stylistic changes to WooCommerce Elements. Now, this round color which also has the stars, that’s the link color in Agility.

Changing Colors using Thesis and WooCommerce Settings

If you want a different color, you can just change the link colors in Agility and that will change it up. However, the price color comes from inside of WooCommerce in settings and then under General, that’s what these colors here.

So, you could in fact, choose a different color for each of these things for your primary button, this is the Purchase button, this is the Add to Cart button, that’s the Price, this is the regular text color and this is any subtext color. You can change all of those things here.

Control All CSS Styling

However, if you don’t want WooCommerce to have any control over this at all, you can uncheck “Enable WooCommerce CSS”. If you do that then hit save and refresh, now, you can see it’s essentially styles, 4.5 out of 5. Now it doesn’t look like stars, the price, the Add to Cart button, all that kind of stuff, that is all now not styled and the same thing is true over here, this stuff isn’t styled any longer.

What that does is it gives you the ability to style it at all yourself. You could be more selective about that and enable the WooCommerce CSS, save it and refresh it. If you want to speed your site up, you could even copy the WooCommerce CSS, paste it into your custom CSS, deactivate the WooCommerce CSS and you would have one less file that was being added when your site gets loaded.

Using Some WooCommerce Built-in Styles

Now, it may be the case that you don’t want to use something like this at all. It may be the case that you want an entirely different kind of button but you want to keep all the rest of the styles that come built in with WooCommerce.

In that case you would come over here and look at the style here. They’re using an HTML button and with the type “submit” and a class single_add_to_cart_button and if you look at their code over here, they’re styling this with .woocommerce-page.button.button.alt . So you could do the same thing here simply by including the Agility body class.

Using Agility’s Body Class to Style

Remember that all pages in Agility come with this Agility body class added to them and so you can easily use that to make your style more specific. For example, let’s just take .woocommerce-page.button.button.alt then we come over to the Thesis Skin Editor, go to CSS. We could just choose a links package really, add the package, add that and then in front of it, .agility.woocommerce-page because the .woocommerce-page is a class that is added to the body so it would be .agility.woocommerce.

Then let’s just see, we’re just going to call this add_to_cart, come over to our Options, we won’t change the link color, leave that alone but let’s just make the background color dark orange. Actually, we’re not going to do that, we’re going to use an Agility Widget Styles and also, this is going to sound funny but we’re going to add that package, we’ll make that the Add to Cart, we’re going to come back over and steal that, it was .agility.woocommerce stuff and then go over to our Options and links.

Styling the Background

We’ll take the background, again we’ll do the dark red and then on the corner radius, we’ll do 10, drop shadow, we’ll do 3, 3, 3, 888. Save that and then we’ll just add it down here to see what happens, I haven’t tried this before – it’s a little bit out there. Save the CSS, okay well, I got the rounded corner and I got the drop shadow.

Obviously, there’s a different selector to use in order to get the color but you get the gist of it. You can actually use Thesis packages to style these kinds of things and to customize the appearance of your site so that it doesn’t look exactly like everybody else’s.

1 Comment… add one
1 comment… add one
  • Aernout Zevenbergen May 18, 2013, 10:11 am

    Hi Rick,

    Any suggestion on how to change the css of the emails being sent from within woocommerce?
    I’m not sure where to start…

    Thanks,
    Aernout

Leave a Comment