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 topassets/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.
Modifications
↑ Back to topNote: 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.
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 topwoocommerce.css
. See the following tutorial for disabling WooCommerce style sheets.
Contributing
↑ Back to topGruntfile.js
inside the root of WooCommerce. You can read more about Grunt here.