Search

CSS Structure

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.less and woocommerce.css. woocommerce.css is the minified stylesheet. This file is referenced by the plugin and declares all WooCommerce styles. woocommerce.less is not used by the plugin. It contains the raw CSS and can be compiled using LESS, a CSS preprocessor. We use 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 more than likely that you will want to make your own adjustments.

Modifications ↑ Back to Top

To avoid upgrade issues it is advised that you do not edit these files. Rather you should use them as a point of reference.

If you just want to make a few changes we’d recommend simply adding some over-riding styles to your theme stylesheet. For example add the following to your theme stylesheet to make WooCommerce buttons black instead of the default colour;

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

WooCommerce also outputs the theme name (as well as 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 might prefer your theme not to reference the WooCommerce stylesheet at all. You can tell WooCommerce not to use woocommerce.css in the General tab of the WooCommerce settings screen within WordPress. But a better solution is to simply add the following line of code to your themes functions.php file:

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

LESS resources ↑ Back to Top

Back to the top