From 2de6a927848ea148c8d4b37da677662c077f8cc2 Mon Sep 17 00:00:00 2001 From: magdev Date: Tue, 30 Dec 2025 00:14:16 +0100 Subject: [PATCH] Update CLAUDE.md with v1.2.4 learnings and CSS troubleshooting guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added comprehensive CSS specificity documentation from v1.2.4 bugfixes: - CSS Specificity Issues section documenting table border and help-tip positioning problems - Detailed troubleshooting guide for WooCommerce CSS overrides - Solution patterns for table styling and float-based layouts - General rules and diagnostic steps for CSS issues Updated: - Last Updated date to 2025-12-30 - Roadmap section to mark v1.2.4 bugs as completed - Moved future enhancements to v1.2.5+ section Key learnings documented: - WooCommerce core CSS requires !important flags for overrides - Float-based layouts should be replaced with flexbox for precise control - Table borders require comprehensive targeting of all structural elements - border-collapse: collapse is essential for borderless tables 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- CLAUDE.md | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 119 insertions(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index 3dc777a..414ee4b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,6 +1,6 @@ # WooCommerce Tier and Package Prices - AI Context Document -**Last Updated:** 2025-12-29 +**Last Updated:** 2025-12-30 **Current Version:** 1.2.4 **Author:** Marco Graetsch **Project Status:** Production-ready WordPress plugin @@ -305,6 +305,41 @@ Location: includes/class-wc-tpp-cart.php:233 - **Fix:** Changed method signature to accept `WC_Product $product` instead of `$cart_item` array - **Status:** FIXED in v1.1.20 +### CSS Specificity Issues (v1.2.3 → v1.2.4) + +**Problem:** Admin table borders still visible despite `border: none` declarations in v1.2.3 + +```txt +Issue: WooCommerce's core admin CSS has higher specificity border rules +Location: assets/css/admin.css +Symptom: Tables still showing borders in product edit screens +``` + +- **Root Cause:** WooCommerce's default admin CSS uses highly specific selectors that override simple `border: none` declarations +- **Failed Approach (v1.2.3):** Adding `border: none` to table elements without `!important` +- **Successful Fix (v1.2.4):** + - Added `!important` flags to ALL border removal rules + - Added `border-collapse: collapse !important` to force borderless styling + - Targeted all table structural elements: `table`, `th`, `td`, `thead`, `tbody`, `tr` +- **Lesson:** When overriding WooCommerce core CSS, `!important` is often necessary due to high specificity in core styles + +**Problem:** Help icon positioned at right edge instead of next to label text + +```txt +Issue: WooCommerce help-tip uses float: right positioning +Location: assets/css/admin.css (checkbox/label layout) +Symptom: Help icon appearing far from label text at container edge +``` + +- **Root Cause:** WooCommerce's default `.woocommerce-help-tip` styling uses `float: right` +- **Failed Approach (v1.2.3):** Simple margin adjustments without changing positioning model +- **Successful Fix (v1.2.4):** + - Removed float positioning: `float: none` + - Changed to `display: inline-block` with `vertical-align: middle` + - Wrapped label and help-tip in flexbox container: `display: inline-flex; align-items: center` + - Controlled precise spacing with margins (checkbox: 12px, help-tip: 6px) +- **Lesson:** Overriding float-based layouts often requires changing to flexbox for proper control + ## Release Process ### Version Bumping @@ -506,6 +541,83 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard **Location:** `templates/admin/*.twig` for admin UI changes +#### CSS Specificity and WooCommerce Overrides + +**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) +4. Check selector specificity - WooCommerce often uses complex selectors + +**Solution Patterns:** + +**For Table Styling:** +```css +/* ❌ This will likely be overridden */ +.wc-tpp-tiers-table { + border: none; +} + +/* ✅ Use !important for core WooCommerce overrides */ +.wc-tpp-tiers-table, +.wc-tpp-tiers-table th, +.wc-tpp-tiers-table td, +.wc-tpp-tiers-table thead, +.wc-tpp-tiers-table tbody, +.wc-tpp-tiers-table tr { + border: none !important; +} + +/* ✅ Also use border-collapse to prevent cell borders */ +.wc-tpp-tiers-table { + border-collapse: collapse !important; +} +``` + +**For Float-Based Layouts:** +```css +/* ❌ Float positioning is hard to control precisely */ +.woocommerce-help-tip { + float: right; + margin-left: 10px; +} + +/* ✅ Use flexbox for precise control */ +label[for="_wc_tpp_restrict_to_packages"] { + display: inline-flex; + align-items: center; + gap: 0; +} + +.woocommerce-help-tip { + float: none; + display: inline-block; + vertical-align: middle; + margin-left: 6px; + margin-right: 0; +} +``` + +**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 +4. **Prefer flexbox over floats** - gives better control over alignment and spacing +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 +- Use browser's "Inspect" right-click to see exact element structure + #### Git Workflow Issues **Problem:** Cannot rebase due to uncommitted changes @@ -647,6 +759,12 @@ Roadmap for the upcoming development. 2. ~~Bug 2 in v1.2.3: Increase the margin between checkbox and label and put the help icon right next to the label, not at the right border~~ ✅ **FIXED in v1.2.4** - Increased checkbox right margin from 8px to 12px. Repositioned help tip icon to display inline right next to the label text using flexbox layout with `display: inline-flex`, removing float positioning that caused it to appear at the right edge. +##### Planned Enhancements for v1.2.5+ + +1. Hide the table-headers in admin area until a tier or respectivly a package price is defined. + +2. Make it possible to define tier or package prices on variable products in the parent product as a default for that product and all variants of it unless a variant has its own tier or package prices. + ##### New Features 1. Create different, selectable templates for tierprices and packages to use in the frontend. Make the new templates selectable globally on the settings-page, not per product.