CSS Structure

Note that this tutorial is intended for theme developers. If you want to customize an existing theme, see Customizing Theme: Best Practices.

Structure

↑ Back to top

Inside the assets/css/ directory, you will find the stylesheets responsible for the default WooCommerce layout styles. Files to look for are woocommerce.scss and woocommerce.css.

woocommerce.css is the minified stylesheet – it’s the CSS without any of the spaces, indents, etc. This makes the file very fast to load. This file is referenced by the plugin and declares all WooCommerce styles.
woocommerce.scss is not directly used by the plugin, but by the team developing WooCommerce. We use SASS in this file to script the CSS in the first file easier and faster.

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.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance.

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

↑ Back to top

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. See the following tutorial for disabling WooCommerce style sheets.

Contributing

↑ Back to top

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.