Do not sell or share my personal information Skip to content

CSS/Sass naming conventions


Our guidelines are based on those used in Calypso, which itself follows the BEM methodology.

Refer to the Calypso CSS/Sass Coding Guidelines for full details.

Read more about BEM key concepts.

There are a few differences in WooCommerce which are outlined below.


As a WordPress plugin WooCommerce has to play nicely with WordPress core and other plugins/themes. To minimize conflict potential, all classes should be prefixed with .woocommerce-.

Class names

When naming classes, remember:

  • Block – Standalone entity that is meaningful on its own. Such as the name of a component.
  • Element – Parts of a block and have no standalone meaning. They are semantically tied to its block.
  • Modifier – Flags on blocks or elements. Use them to change appearance or behavior.


		/* Block */
.woocommerce-loop {}

/* Nested block */
.woocommerce-loop-product {}

/* Modifier */
.woocommerce-loop-product--sale {}

/* Element */
.woocommerce-loop-product__link {}

/* Element */
.woocommerce-loop-product__button-add-to-cart {}

/* Modifier */
.woocommerce-loop-product__button-add-to-cart--added {}


Note: .woocommerce-loop-product is not named as such because the block is nested within .woocommerce-loop. It’s to be specific so that we can have separate classes for single products, cart products, etc. Nested blocks do not need to inherit their parents full name.


Last updated: February 07, 2024