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.
|
||||
|
||||
**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
|
||||
|
||||
Reference in New Issue
Block a user