WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Search

CSS Structure

Please note that this tutorial is intended for theme developers, if you want to customize an existing theme, please use this tutorial.

Structure ↑ Back to Top

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 – 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.

Modifications ↑ Back to Top

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. 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 ↑ 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.

Back to the top