You write some CSS to restyle your WooCommerce shop, save it, refresh the page… and nothing changes. No error, no warning. The CSS just doesn’t work.

This happened to me again and again while building a custom WooCommerce store. Each time, the cause was different, but the way to find it was always the same. Here are the five reasons your WooCommerce CSS is being ignored, and how to check each one in a few minutes.

1. Your selector doesn’t match the real HTML

This is the most common cause, and it caught me for days. A lot of WooCommerce CSS you find online assumes the shop sits inside a wrapper like div.woocommerce. So you write something like:

div.woocommerce ul.products li.product { ... }

But themes build their pages differently. On my theme, there was no such wrapper div at all. The woocommerce class was on the body tag, and the product list sat directly inside the main content area. My selector was looking for an element that didn’t exist, so it matched nothing.

How to check: right-click a product on your shop page and choose Inspect. Look at the real tags and classes above it. Then open the Console tab and test your selector:

document.querySelectorAll('div.woocommerce ul.products li.product').length

If the answer is 0, your selector matches nothing. Rewrite it based on the HTML you actually see, for example body ul.products li.product.

2. Another rule is winning

Sometimes your CSS does match, but a different rule overrides it. Your theme, WooCommerce itself, or another plugin may target the same element with a stronger selector, or load later on the page.

How to check: inspect the element and look at the Styles panel. If your rule is there but crossed out, something else is winning. The rule above it shows you what.

How to fix it:

• Make your selector a little more specific, for example by adding html body in front of it.
• If you use a snippets plugin like WPCode, change the snippet’s priority so it loads after the CSS it needs to override.
• Use !important only as a last resort. If you add it everywhere, you’ll soon have the same problem between your own rules.

3. Your test is lying to you

A popular trick to check if CSS is working is to add a bright outline:

outline: 8px solid red;

I did this, saw no red outline, and assumed my CSS wasn’t loading. I was wrong. My header CSS had overflow-x: hidden on the page, which was clipping the outline so it never showed. The CSS was working the whole time.

Better test: use a background colour instead, like background: lime;. Backgrounds aren’t clipped the same way, so if the element doesn’t turn green, you know the rule really isn’t applying.

4. One small typo broke everything after it

CSS doesn’t stop with an error message when something is wrong. If you forget a closing brace }, the browser can swallow the rules that come after it. Everything above the typo works, and everything below it silently fails.

How to check: if only the second half of your CSS isn’t working, look for a missing brace or a stray character just before the first broken rule. Pasting your CSS into a code editor with syntax highlighting makes this easy to spot.

5. The same code exists twice

This one is easy to miss. When I updated a section of my site, I pasted the new CSS without deleting the old version. The file ended up containing the same styles three times. The older copies overrode my new colours and mobile rules, and it looked like my changes did nothing.

How to check: search your snippets or stylesheet for a class name you’re changing. If it appears in more than one place, delete the old versions. And when you replace a snippet, always select all and delete first, then paste.

A quick checklist

1. Does my selector match the real HTML? (Test it in the Console.)
2. Is another rule crossing mine out in the Styles panel?
3. Am I testing with a background colour, not an outline?
4. Is there a missing brace before the part that stopped working?
5. Does the same code exist more than once?
6. Have I cleared my cache plugin and browser cache?

Nine times out of ten, one of these will be your answer. Still stuck styling your WooCommerce store? Get in touch.