WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Search

CSS Structure

Structure

Inside the assets/css/ directory, you will find the stylesheets responsible for the default WooCommerce layout styles.

The files to look for are woocommerce.scss and woocommerce.css.

  • woocommerce.css is the minified stylesheet. This file is referenced by the plugin and declares all WooCommerce styles.
  • woocommerce.scss is not used by the plugin. Even more powerful than LESS, we use SASS in this file to author the plugin CSS.

The CSS is written to make the default layout compatible with as many themes as possible by using % widths for all layout styles. It is, however, likely that you’ll want to make your own adjustments.

Modifications

To avoid upgrade issues, we advise not editing these files but rather use them as a point of reference.

If you just want to make changes, we recommend adding some overriding styles to your theme stylesheet. For example, add the following to your theme stylesheet to make WooCommerce buttons black instead of the default color:

a.button, 
button.button, 
input.button, 
#review_form #submit {
  background:black; 
}

WooCommerce also outputs the theme name (plus other useful information, such as which type of page is being viewed) as a class on the body tag, which can be useful for overriding styles.

Disabling WooCommerce styles

If you plan to make major changes, then you may prefer your theme not reference the WooCommerce stylesheet at all. You can tell WooCommerce to not use the default woocommerce.css. But a better solution is to add the following code to your theme’s functions.php file:

With this definition in place, your theme will no longer use the WooCommerce stylesheet and give you a blank canvas upon which you can build your own desired layout/style.

Contributing

If you are contributing to WooCommerce core and need to edit the style, please edit the SASS files and then compile them by using Grunt. To know more about what Grunt tasks we use, check out the file Gruntfile.js inside the root of WooCommerce. You can read more about Grunt here.

Back to the top