fixed markdown syntax

This commit is contained in:
2025-12-30 01:34:46 +01:00
parent 82c8008fed
commit d71f2c01dc

View File

@@ -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. **CRITICAL LESSON from v1.2.4:** WooCommerce's core admin CSS uses high-specificity selectors that require `!important` to override.
**Problem Symptoms:** **Problem Symptoms:**
- CSS rules not applying despite correct selectors - CSS rules not applying despite correct selectors
- Styles work in simple cases but fail with WooCommerce elements - Styles work in simple cases but fail with WooCommerce elements
- Browser DevTools shows rule crossed out or overridden - Browser DevTools shows rule crossed out or overridden
**Diagnostic Steps:** **Diagnostic Steps:**
1. Inspect element in browser DevTools 1. Inspect element in browser DevTools
2. Check "Computed" tab to see which styles are actually applied 2. Check "Computed" tab to see which styles are actually applied
3. Look for crossed-out rules in "Styles" tab (indicates override) 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:** **Solution Patterns:**
**For Table Styling:** **For Table Styling:**
```css ```css
/* ❌ This will likely be overridden */ /* ❌ This will likely be overridden */
.wc-tpp-tiers-table { .wc-tpp-tiers-table {
@@ -582,6 +585,7 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard
``` ```
**For Float-Based Layouts:** **For Float-Based Layouts:**
```css ```css
/* ❌ Float positioning is hard to control precisely */ /* ❌ Float positioning is hard to control precisely */
.woocommerce-help-tip { .woocommerce-help-tip {
@@ -606,6 +610,7 @@ label[for="_wc_tpp_restrict_to_packages"] {
``` ```
**General Rules:** **General Rules:**
1. **Always test in actual WordPress admin** - browser preview may not show WooCommerce's CSS 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` 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 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 5. **Check across browsers** - table rendering can vary between Chrome/Firefox/Safari
**When Styles Don't Apply:** **When Styles Don't Apply:**
- First verify selector is correct (DevTools should show rule, even if crossed out) - 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 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 - If selector doesn't appear at all, check file is enqueued and cache is cleared