Unleash Your Hidden Ninja Skills with WooCommerce and CSS Hero

Posted May 27, 2015 by Ariel


Here are two things you’re likely to hear a lot of:

CSS is hard; WooCommerce plugin is easy.

Okay, so you’re not to going hear it exactly like that, but that’s the gist of what you’re bound to read about the two subjects.

Unfortunately, that information is faulty.

CSS really isn’t that hard when you have the right tools and knowledge to use it, and WooCommerce is not nearly as easy to use as everyone likes to say it is.

Now, don’t take that as a bashing statement. WooCommerce is a seriously awesome, kick-butt e-commerce plugin that is by far the easiest one to use and setup in comparison to others of a same likeness. And with the recent take over by Automattic, it’s sure to become even better and ever more popular.

With that being said, anyone who has had to wrangle WooCommerce will tell you that it takes a lot of patience and work to tame that dragon — including the visual customization part of things.

See, for as wonderful as WooCommerce is (and, yes, we love it as much as the next WordPress Junkie) it’s still rather difficult for the average WP user to customize the way their online store will look.


Because WooCommerce’s visual customization options are pretty limited and an average WordPress user likely doesn’t know enough about CSS in order to take the default look of WooComerce and turn it into something unique.

But, wait… Didn’t we just say that CSS isn’t hard?

Yes, we did say that. CSS isn’t hard when you have the right tools to make it easy.

CSS Hero and WooCommerce: Unleash Your Unknown CSS Ninja Skills to Customize WooCommerce

Does the way your e-commerce store really matter to your customers?


Even if they don’t have a vocal opinion about what they expect before they purchase from your store, subconsciously they do.

This infographic on KISSMetrics explains how changing the color of a Buy Button can influence a purchase. Another study shows that the font you choose to use on your site can affect how a customer perceives your brand, so even the small details matter.

And both of these seemingly small but powerful changes are made via CSS.

Using CSS Hero, you can quickly and easily make these types influential changes and more. And the best part?

No CSS knowledge is required.

If you can point and click, then you can unleash the CSS superpowers you didn’t even know you had.

Want to see just how easy it is to customize the elements in your WooCommerce site? Just watch this quick gif below.

how to customize woocommerce with CSS Hero

Want to know how long the original video of this gif was?

30 seconds — that’s it.

That’s how fast a simple CSS edit can be with when you use CSS Hero with WooCommerce.

But what if you wanted to do something more complex, like change the background color of your store to an image?

That’s easy too!

how to change the background of your woocommerce store with CSS Hero

Simply target the background of the store (element name is WCOM Product List), select the background option in the CSS Hero interface, choose a color or image for the background and save it.

That’s it!

This edit only took 30 seconds to make, as well.

To do this outside of CSS Hero can easily take you upwards of 20 minutes to find the image you want to use, find the right code to edit with a tool like FireBug, and then to hand code the new CSS in the back-end of WordPress.

Not to mention all the tweaking it would take to get it to look right…

So 1 minute of your time with CSS Hero will take your WooCommerce store from average to awesome.

Not only will you save yourself loads of time, but you will save hundreds or perhaps thousands of dollars since you won’t need to hire a web designer to make the changes for you. On the flip side, if you’re a web designer, you can make even more money with all the time you’ll save in your CSS edits.


Do you value your time?

Would you rather spend time on more important things like your life and family?

If you can answer yes to both, then CSS Hero is the tool you want to unleash your CSS skills and unlock more time in your day.

If you want to save time, make more of your online store, help influence purchases, and make more money all around, then invest in CSS Hero today.

Do you want to see more about how to use WooCommerce with CSS Hero? If so, what do what to see on the blog?


Subscribe to our Newsletter to get CSS Hero news and discount codes.

2 thoughts on “Unleash Your Hidden Ninja Skills with WooCommerce and CSS Hero

  1. Alan Artt says:

    Change the options button width in a product page with options enabled. By default it cuts off part of the text.

  2. We have used CSS Hero on our site to customise WooCommerce but we found that there are still a lot of fields that CSS Hero does not recognise:
    – add to cart button on single product page
    – checkout button
    – process payment
    – etc.

    We had to use Google’s Inspector quite a few times where CSS Hero did not pick up the element.

    It would be great, if you could include more element of WooCommerce by default in CSS Hero.

    The result is here: http://www.pairfum.com

Leave a Reply

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero