WooCommerce Custom CSS Generator
Describe the change you want and get CSS scoped correctly, whether it's the classic shop template or the Cart and Checkout blocks.
Two different class systems
WooCommerce's classic shop, product and checkout templates use plain, stable class names that have barely changed in years: .woocommerce-loop-product__title, .price, .onsale, .single_add_to_cart_button. The newer Cart and Checkout blocks use a different, BEM-style system: .wc-block- for a class specific to one block, .wc-block-components- for a shared component (like .wc-block-components-formatted-money-amount for any price shown inside a block).
Picking the wrong one is the most common reason a WooCommerce CSS snippet does nothing: a rule written for .single_add_to_cart_button has no effect inside the block-based Checkout, and vice versa. The generator asks which area you mean so it uses the right system.
Scoping to one block
Prefix a component class with the block's own wrapper class to scope it: .wc-block-checkout .wc-block-components-formatted-money-amount styles prices only in Checkout, leaving Cart alone. WooCommerce's own developer docs note that block markup is "private" and can change between releases, so for colors, fonts and spacing that your theme's Styles panel can already control, that's the more future-proof route; use a class-based rule for anything it can't reach.
Adding the CSS
- 01
Store-wide
Appearance > Customize > Additional CSS. Works on both classic and block themes.
- 02
Block theme styling
For fonts, colors and spacing, check the theme's Styles panel first; it can be more resilient to WooCommerce Blocks updates than a class-based rule.
Questions people ask
How do I know if I'm using the block or classic checkout?
Open the Cart or Checkout page in the block editor: if it's built from blocks like Cart and Checkout (not a [woocommerce_checkout] shortcode), you're on the block version. Pick Not sure and the guidance covers both.
Why does my CSS work on Cart but not Checkout?
You likely need it scoped to .wc-block-checkout specifically, or the class you targeted is a .wc-block- variant that Checkout doesn't share with Cart.
Is targeting these block classes safe long-term?
WooCommerce itself says the block HTML structure is private and can change. It usually stays stable for a while, but a future WooCommerce Blocks update could rename a class; where possible, prefer your theme's built-in Styles options instead.
What's the sale badge class on classic product pages?
.onsale. On the shop grid it sits inside li.product; on the single product page it's near the product title and price.
I need a functional change, not styling.
Use the WooCommerce snippet generator for PHP logic changes instead.
Related tools
Want this builtinto your store?
I'm Emmanuel, a Shopify and WooCommerce developer. If this tool pointed at something you'd rather have fixed for you (a faster store, cleaner product data, a migration, a custom feature), send me a note.
Emmanuel Asika
Shopify & WooCommerce developer, Dublin
I build and fix online stores: new builds, migrations, speed, SEO and the custom bits apps can't do.
Last reviewed 30 September 2026.