You've already forked wc-tier-and-package-prices
fixed markdown syntax
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user