The stylesheets responsible for the default Classic Commerce layout styles can be found inside the assets/css/ directory. 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 is the file that is referenced by the plugin and declares all Classic Commerce styles.
woocommerce.scss is not directly used by the plugin, but by the team developing Classic Commerce. This file uses SASS to script the CSS in the first file which makes working in it much 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. However, it is very likely that you’ll want to make your own adjustments.
Modifications
To avoid upgrade issues, we strongly 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 (ideally you would use a child theme for this). For example, add the following to your theme stylesheet to make Classic Commerce buttons red instead of the default color:
a.button, button.button, input.button, #review_form #submit {
background:red;
}
Classic Commerce 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.
You can also change css styles from within a code snippet, which can be placed in your themes functions.php file or into a custom plugin.
Disabling Classic Commerce Styles
If you plan to make major changes, then you may prefer your theme to not use the Classic Commerce stylesheet at all. You can tell Classic Commerce to ignore the default woocommerce.css by using the method described on this code snippet page: Disable default Classic Commerce style sheets