WooCommerce is a freemium WordPress plugin that allows you to turn your blog into a proper e-commerce site.
One of the main key points of this approach is that running the blog and the shop on the same platform allows easy content optimization of both blog posts and product pages with the well-known SEO power of WordPress.
Why CSS Hero can be the ideal solution for customizing Woocommerce-powered websites
Unless you have bought a WooCommerce-ready theme that exactly fits your styling needs, you will probably want to personalize a bit the visual aspect of the ecommerce elements of your site to match your graphical needs.
Products, Add to cart button, Checkout buttons….add your personal touch, blend the elements better with the general styling of the website, or make ’em stand out!
The WooCommerce plugin (Free version) allows for a quite limited set of personalization options.
Style and Script Settings in WooCommerce back-end
As still in many WordPress plugins and themes, in order to edit the colours of the main elements, you will have to find and change the appropriate option, save the options, and go back to the site to see your results. Changes are not applied in real time. Finding the right color is a pick-and-test job, not the quickest if you don’t have a clear idea, but better than nothing.
How does the CSS Hero Woocommerce plugin work
CSS Hero is a live CSS editor that intercepts WooCommerce elements, allowing direct graphic customization with live feedback. That means editing and previewing in real time the desired graphical changes to your site.
This feature is especially useful to find correct color choices, but we may want to do something more: achieve a both beautiful and unique visual result that can catch the eye of your customers. Having a plain, copycat website does not help catching the attention of your customers and leading their path towards a sale.
Why you should try CSS Hero with WooCommerce?
Being able to easily tweak the elements of your ecommerce site is really a joy. Making your site look more unique, finely styling the elements of your online shop to achieve your desired look and enhance your conversions.
A full-fledged CSS visual editor at your fingertips – totally built into WordPress. No need to install any software on your computer.
CSS Hero will help unleashing your creativity, it’s easy interface will quickly make you feel at home, remembering you the visual approach of image editing software like PhotoShop or Gimp.
Great news is that technically, no modification is done to your original Theme – CSS Hero just adds a separate, dynamically generated CSS stylesheet, in a totally transparent way. So it’s basically plugin-upgrade friendly, and theme-upgrade friendly.
“You shall not edit any theme stylesheet anymore!”
Dear WordPress fan, this is not an invasive tool for your WordPress, but just a tool that adds a 100% separate CSS to handle all the graphics customization that you want in a clean, “respectful” way.
Harmonize the design of your Woocommerce shop in a snap with CSS Hero!
Installing CSS Hero you will finally be able to easy customize the design of your virtual shop, let’s see some quick examples and some videos to show how this is done.
Typical usage Examples
- Changing product name label colour
- Changing the colour of the buy buttons
- Changing the backgrounds
EXAMPLE 1 – Add rotation on Product Image Loop
In this one minute video-tutorial we show you how to add some cool animation to your products listings.
EXAMPLE 2 – Rounded product boxes and adding a 3d effect
In this 30 seconds video-tutorial we show you how to make square product boxes rounded and add a 3d effect using the Box-Shadow property
EXAMPLE 3 – Change the Colors of the Stars Rating System in WooCommerce
(25sec)
EXAMPLE 4 – Working on Font Styling. Font size, color, Text Align and more…
In this video we would like to show you how easy is to change text color, font size, adding any kind of styling or effect to your ecommerce
The need to support devices: mobile and tablet support
From a recent US survey, 4 out of 5 smartphone and tablet device owners use their device to make purchases on the web.
Therefore, it is important to check and verify that your Ecommerce website behaves 100% correctly on these devices, in order to maximize your conversions.
CSS Hero, with its responsive mode (tablet and smartphone), will allow you to preview the behaviour and make the necessary changes on your website.
Responsive Web Design for WooCommerce with CSS Hero
In this one minute video we show you how to make the product title look in three different ways, for the three supported breakpoints
If you use (or plan to use) this Plugin...CSS Hero can help you deeply and quickly customize the WooCommerce Plugin, solving some common issues like:
- How to customize fonts in the WooCommerce WordPress Plugin, to make font biggers or change typeface for titles and header texts
- How to change CSS background image on the WooCommerce WordPress Plugin and build background fades
- How to change colors and styles on WooCommerce WordPress Plugin