Customize your WooCommerce Store with CSS Hero

Customize your WooCommerce store

WordPress is highly popular thanks to its reputation as a highly flexible content management system. There are numerous themes that will help you choose a suitable design for your website. If you have knowledge in CSS, you can easily make modifications to the visual elements on your site. Now, here is a tool that will help you make CSS changes on your site without actively writing any code. This would be extremely convenient for beginners to WordPress. Moreover, it is compatible with WooCommerce, and helps you make visual changes without affecting any of the eCommerce specific features. In this review of CSS Hero, we will try to see the features of this plugin in more detail, and how it will help you customize your WooCommerce store.

We are looking at three main aspects of the plugin in this review – its compatibility with WooCommerce, the range of available features, and the ease of use.

What is CSS Hero?

CSS Hero is a plugin that enables you to make CSS customizations on your WordPress site without writing code. You can use the visual interface of the plugin to make changes to your site’s frontend. That means, you will be able to simply point and change visual elements from your site’s frontend itself. It will help you customize your WooCommerce store responsively, and you can control how your site is displayed on different devices. Moreover, you can make changes specific to devices, and can preview them before making the changes live. It also offers undo and redo options to let you be more assured with the edits. All this can be managed without any modifications on your theme file.

How CSS Hero works with WooCommerce?

Now, one of the primary reasons of this review is to understand how CSS Hero plugin works with WooCommerce. It is seamlessly compatible with WooCommerce, and you can easily make visual adjustments to your WooCommerce pages using this plugin. The main advantage is that it is equally comfortable for experts in CSS as well as for beginners to customize your WooCommerce store. The visual editing tool with live preview can be really helpful to try out edits on your store.

Customize your WooCommerce Store

If you have some of the default themes installed on your WordPress site, you can easily make adjustments to make it look the way you want it to be. If you have a specialized WooCommerce theme, you can still make customizations to make your site look unique. Here are some of the basic edits you can make to customize your WooCommerce store with this plugin.

How to get started with CSS Hero?

You can purchase the license and install the plugin just like any other WordPress plugin. Once installed, it will take you through some steps for license activation. Once the license is activated, you can start working with the plugin.

There are four different licenses available. The Starter license for single site is available at $29 per year. For 5 sites, you can use the Personal license at $59 per year. The Pro license lets you use the plugin on up to 999 sites, at a price of $199 per year. There is also a one-time pricing option at $559 where you can use the plugin on up to 999 sites as well as get lifetime support.

Purchase CSS Hero WooCommerce Customizer plugin.

Go to the page you want to customize and click the ‘Customize with CSS Hero’ option on top.

Customize your WooCommerce Store

Now you will see the live editor on the left side of your screen. You can choose a visual element from the right and make changes on the editor, and see it getting applied real time.

Customize your WooCommerce Store

If you want to save screenshots of your changes to compare, you can use the Save Checkpoints option on top right.

Customize your WooCommerce Store

Or, you can save a particular edit as a snippet to be able to use in other scenarios. For this, you can click the green icon on the code editor.

Customize your WooCommerce Store

Editing options

CSS Hero editor gives you three options – Properties, Snippets and Animations. When you choose an element on your site, you can make changes to several of its properties using the first option. These include Background, Typography, Borders, etc. You can also access pre-made snippets from the Snippets section. You can also apply animations to visual elements, which the user will see when they scroll the page and reach that particular element.

Customize your WooCommerce Store

Now let’s quickly see how you can edit different WooCommerce pages.

Shop page

You can make several changes on the shop page according to your design ideas. For example, below is a screenshot of WooCommerce shop page with the default Twenty Nineteen theme.

Customize your WooCommerce Store

Now, let’s make a few changes using the plugin.

We selected Product image and added borders with styling (applied color, radius, shadow, etc.). Also changed the style of the Add to cart button using one of the pre-made snippets for buttons. In addition, the color of the Sale button is also changed. The result can be seen in the below screenshot:

Customize your WooCommerce Store

Product Detail Page

Here is a sample screenshot of the product detail page before editing.

Customize your WooCommerce Store

Here is the page after a few edits:

Customize your WooCommerce Store

Cart page

You can also edit the Cart page according to your tastes.

Customize your WooCommerce Store

Here is the updated cart page after some simple edits:

Customize your WooCommerce Store

The advantage of using CSS Hero is that you can make creative CSS edits on your store, without worrying about breaking the site. This will definitely encourage even beginners to experiment with site design and try creative improvisations on their site. With the help of CSS Hero, you can make your WooCommerce store more attractive and at the same time ensure a better conversion rate as well.

More importantly, CSS Hero does not make any changes to your original theme file. It creates another stylesheet with the all the edits that you make on your site’s visual elements. Also, CSS Hero allows you to preview the changes specific to different devices. So you will be completely sure about the responsiveness of your site at all times


CSS Hero comes with a range of features that will help you a lot in customizing your site. These include:

Abundant collection of fonts

You can personalize your site’s typography making use of the abundant collection of beautiful fonts. An endless list of Google Fonts in available, which you can use according to your varied preferences. It also supports TypeKit fonts.

Creative color combinations

CSS Hero helps you make great color combinations on your website. You will be able to save the last used colors to help you with further edits.

Make complex CSS changes

If you are not comfortable with CSS, adjusting margins and padding can be quite a task for you. CSS Hero will be quite handy for you as you can easily change the position of elements in relation to each other using a slider. You can also build gradients, shadows, animations and other complex CSS changes effortlessly using this plugin.

Large pool of images

CSS Hero offers an integration with UnSplash, which will provide you an unlimited pool of images that are free to use.

Edit CSS Code

You will be able to see the CSS code for each change you make in a live code editor. This will be greatly useful for CSS experts who may want to quickly debug their work. Moreover, the plugin also offers a range of premade snippets, which you can use according to your requirements. These snippets are also editable, and you can use them to create different style combinations.

Undo and Redo

While designing a website, you may often want to go back to the previous step. CSS Hero offers convenient undo and redo options, which will be quite useful when you are experimenting. The plugin offers a redo option too to help you make edits more quickly and effectively.

Easily export your designs

You will be able to easily export your customizations through CSS, JSON or LESS. This allows you to save personalizations as well as helps you save backup files.

Save multiple changes

You may want to try out different styles before making one of them live. CSS Hero lets you save different versions so that you can choose the best one and go live when you need to.

No changes to your theme files

CSS Hero will not make changes to your theme files. It creates a separate stylesheet that will override your theme’s stylesheet. This will enable you to update the theme without troubles when necessary. Also, there won’t be any impact on your site performance as well.

Checkout CSS Hero Now!

How user friendly is CSS Hero?

CSS Hero is quite a helpful tool for WordPress beginners who are not comfortable to write their own CSS codes. At the same time it offers itself as a great tool for experts too as they can experiment with CSS codes in real time with the live preview. It is quite easy to make edits on your page. You can apply changes only to one specific visual element, or apply it across all the elements that are part of that same CSS group.

The options to save screenshots of changes will help you choose from multiple options when there are several choices. Similarly, you can use pre-made code snippets or create your own snippets for later use. We feel CSS Hero will help you quite a lot to customize your WooCommerce store that offers the best customer experience at all times.

Further reading