From d71f2c01dc3cc9c9e899b0ea23e5ac7571711c11 Mon Sep 17 00:00:00 2001 From: magdev Date: Tue, 30 Dec 2025 01:34:46 +0100 Subject: [PATCH] fixed markdown syntax --- CLAUDE.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index 097a5a4..5bfa56d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -546,11 +546,13 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard **CRITICAL LESSON from v1.2.4:** WooCommerce's core admin CSS uses high-specificity selectors that require `!important` to override. **Problem Symptoms:** + - CSS rules not applying despite correct selectors - Styles work in simple cases but fail with WooCommerce elements - Browser DevTools shows rule crossed out or overridden **Diagnostic Steps:** + 1. Inspect element in browser DevTools 2. Check "Computed" tab to see which styles are actually applied 3. Look for crossed-out rules in "Styles" tab (indicates override) @@ -559,6 +561,7 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard **Solution Patterns:** **For Table Styling:** + ```css /* ❌ This will likely be overridden */ .wc-tpp-tiers-table { @@ -582,6 +585,7 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard ``` **For Float-Based Layouts:** + ```css /* ❌ Float positioning is hard to control precisely */ .woocommerce-help-tip { @@ -606,6 +610,7 @@ label[for="_wc_tpp_restrict_to_packages"] { ``` **General Rules:** + 1. **Always test in actual WordPress admin** - browser preview may not show WooCommerce's CSS 2. **Target all related elements** - tables require styling on `table`, `thead`, `tbody`, `tr`, `th`, `td` 3. **Use `!important` sparingly but don't fear it** - sometimes it's the only way to override WooCommerce core @@ -613,6 +618,7 @@ label[for="_wc_tpp_restrict_to_packages"] { 5. **Check across browsers** - table rendering can vary between Chrome/Firefox/Safari **When Styles Don't Apply:** + - First verify selector is correct (DevTools should show rule, even if crossed out) - If selector is correct but crossed out, increase specificity or add `!important` - If selector doesn't appear at all, check file is enqueued and cache is cleared