Fix template quirks and bump version to 0.1.0

Audit and fix 14 Twig templates for escaping bugs, CSS conflicts,
and missing Bootstrap styling:
- Fix nl2br/esc_html filter order in order details
- Add WC gallery modifier classes for zoom/photoswipe JS init
- Fix HTML entity double-encoding in headings (up-sells, cross-sells, related)
- Remove wrong 'is defined' guards on function calls
- Remove duplicate deprecated hooks in dashboard
- Add |raw to brand description HTML filter chain
- Add role="alert" for accessibility, |esc_attr on notification types
- Style mini-cart remove button as Bootstrap btn
- Make shipping form-check class conditional
- Add shop_table CSS reset and gallery opacity fallback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/settings.json

@@ -0,0 +1,15 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git *)",
+      "Bash(docker exec woocommerce *)",
+      "Bash(docker compose *)",
+      "Bash(composer *)",
+      "Bash(npm *)",
+      "Bash(ls *)",
+      "Bash(mkdir *)",
+      "Bash(cat *)",
+      "Bash(php *)"
+    ]
+  }
+}

CLAUDE.md

@@ -215,6 +215,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi
 - **Twig autoescape + WordPress escape filters = double encoding** -- register all `esc_*` filters with `['is_safe' => ['html']]` option in the plugin's `Template.php`.
 - **`wp i18n make-pot` does NOT scan Twig templates** -- any string used exclusively in `.html.twig` files must be manually added to the `.pot` file.
 - **`#, fuzzy` silently skips translations at runtime** -- always remove fuzzy flags after verifying translations.
+- **`|nl2br|esc_html` is wrong filter order** -- `nl2br` outputs `<br>` tags, then `esc_html` escapes them to `&lt;br&gt;`. Correct: `|esc_html|nl2br`.
+- **`function() is defined` is semantically wrong** -- always evaluates truthy since the function is called regardless. Use `{% if function() %}` directly.
+- **HTML entities in translated strings get double-encoded** -- `&hellip;` in `__()` becomes `&amp;hellip;`. Use Unicode `…` directly or append `|raw` for trusted filter output.
+- **Filter chains producing HTML need `|raw`** -- e.g., `term_description()|wptexturize|wpautop|do_shortcode|raw`.
 
 ### Bootstrap 5 vs Plugin CSS Conflicts
 
@@ -222,6 +226,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi
 - **CSS dependency chain**: `woocommerce` -> child theme overrides. Ensures correct cascade.
 - jQuery `.show()`/`.hide()` cannot override Bootstrap `!important` (`d-none`). Toggle both class and inline style.
 - `overflow: visible !important` on `.wp-block-navigation__container` is essential for dropdowns inside block theme navigation.
+- **WooCommerce `shop_table` borders conflict with Bootstrap `.table`** -- reset with `.woocommerce table.shop_table { border: 0 }` and cell `border-left/right: 0`.
+- **WooCommerce gallery JS requires modifier classes** -- `--with-images`, `--without-images`, `--columns-N` on `.woocommerce-product-gallery` + `style="opacity: 0"` for fade-in. Without these, zoom and photoswipe won't initialize.
+- **WooCommerce float layout fights Bootstrap grid** -- `div.product div.images/summary` have `float:left/right; width:48%` in `woocommerce-layout.css`. Override with `float: none; width: 100%`.
+- **Bootstrap `g-*` gutters add negative top margin** -- `g-4` sets both `--bs-gutter-x` and `--bs-gutter-y`; the `.row` gets `margin-top: calc(-1 * var(--bs-gutter-y))` pulling it upward. Use `gx-*` for horizontal-only gutters when vertical gap isn't desired.
 
 ### Double Heading Prevention
 
@@ -268,7 +276,7 @@ wp-bootstrap (parent theme, Bootstrap 5 FSE + Twig rendering)
 ### Important Constraints
 
 - **WooCommerce plugin is read-only.** We have no control over its source code. All customizations happen in the child theme via template overrides and hooks.
-- **Docker environment is not yet set up.** Commands referencing `docker exec` (e.g., in the translation workflow) are not currently available. Local alternatives or manual steps must be used until the container is configured.
+- **Docker environment:** Container name is `woocommerce`. Use `docker exec woocommerce ...` for commands and `docker exec woocommerce apache2ctl graceful` to clear OPcache after PHP changes.
 
 ### Cross-Project Workflow
 
@@ -313,7 +321,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
 
 ## Version History
 
-Current version: **v0.0.1**
+Current version: **v0.1.0**
 
 ## Session History
 
@@ -342,3 +350,32 @@ Current version: **v0.0.1**
 - **`bg-primary-subtle` for icon containers**: These Bootstrap 5.3 contextual utilities automatically adapt to dark mode, unlike hardcoded colors.
 - **Welcome message restructured**: Separated greeting from logout link instead of using WooCommerce's default inline-linked `__()` string. This gives full control over card layout and avoids translated strings containing HTML structure assumptions.
 - **Templates NOT changed** (already well-done): `orders.html.twig`, `my-address.html.twig`, `form-login.html.twig`, `payment-methods.html.twig`, `form-add-payment-method.html.twig`, `downloads.html.twig`
+
+### 2026-02-28 — Single Product Bootstrap 5 Layout + Template Quirks Audit
+
+**Scope:** Created Bootstrap 5 two-column layout for single product pages. Then audited all ~90 Twig templates for WooCommerce CSS quirks, Twig escaping bugs, and missing Bootstrap styling.
+
+**Single product layout (3 files):**
+
+- `woocommerce/content-single-product.php` — Bridge file for `wc_get_template_part()` interception
+- `templates/content-single-product.html.twig` — Two-column `row gx-4 gx-lg-5` grid (images left, summary right)
+- `assets/css/wc-bootstrap.css` — Float/width reset, sale badge positioning, shop_table border reset, gallery opacity fallback
+
+**Template quirks audit (14 files fixed):**
+
+- `order/order-details.html.twig` — Fixed `|nl2br|esc_html` filter order (was escaping `<br>` tags)
+- `single-product/product-image.html.twig` — Added WC gallery modifier classes + opacity:0 for JS init
+- `brands/brand-description.html.twig` — Added `|raw` to HTML-producing filter chain
+- `single-product/up-sells.html.twig`, `cart/cross-sells.html.twig`, `single-product/related.html.twig` — Fixed `&hellip;` double-encoding in headings
+- `myaccount/dashboard.html.twig` — Removed duplicate deprecated hook fires
+- `product-searchform.html.twig` — Replaced `&hellip;` entity with Unicode `…`
+- `cart/cart-totals.html.twig`, `checkout/review-order.html.twig`, `checkout/form-login.html.twig`, `checkout/terms.html.twig` — Removed wrong `function() is defined` guards
+- `wc-base.html.twig` — Added `|esc_attr` on notification type in class attribute
+- `global/form-login.html.twig` — Added `is defined` guard on `hidden` variable
+- `single-product/add-to-cart/variation.html.twig` — Added `role="alert"` for accessibility
+- `cart/mini-cart.html.twig` — Changed remove link to Bootstrap `btn btn-sm btn-outline-danger`
+- `cart/cart-shipping.html.twig` — Made `form-check` class conditional on multiple shipping methods
+
+**Infrastructure:**
+
+- Created `.claude/settings.json` with allowed commands (git, docker, composer, npm, etc.)

assets/css/wc-bootstrap.css

@@ -517,3 +517,30 @@ header.sticky-top.is-stuck {
 .product-quantity {
     white-space: nowrap;
 }
+
+/* ==========================================================================
+   Shop Table
+   Reset WooCommerce's border styles on .shop_table to let Bootstrap's
+   .table class handle borders via --bs-table-* custom properties.
+   ========================================================================== */
+
+.woocommerce table.shop_table {
+    border: 0;
+    border-collapse: collapse;
+}
+
+.woocommerce table.shop_table td,
+.woocommerce table.shop_table th {
+    border-left: 0;
+    border-right: 0;
+}
+
+/* ==========================================================================
+   Product Gallery
+   WooCommerce JS sets opacity: 1 after initialization. Ensure the gallery
+   is visible even if WC JS doesn't run (e.g., gallery features disabled).
+   ========================================================================== */
+
+.woocommerce-product-gallery--without-images {
+    opacity: 1 !important;
+}

functions.php

@@ -23,7 +23,7 @@ if ( ! defined( 'ABSPATH' ) ) {
  * 2. This PHP constant — used internally by the theme
  * Both MUST be updated on every release.
  */
-define( 'WC_BOOTSTRAP_VERSION', '0.0.1' );
+define( 'WC_BOOTSTRAP_VERSION', '0.1.0' );
 define( 'WC_BOOTSTRAP_PATH', get_stylesheet_directory() . '/' );
 define( 'WC_BOOTSTRAP_URL', get_stylesheet_directory_uri() . '/' );
 

style.css

@@ -7,7 +7,7 @@ Description: A Bootstrap 5 child theme for WP Bootstrap that overrides all WooCo
 Requires at least: 6.7
 Tested up to: 6.7
 Requires PHP: 8.3
-Version: 0.0.1
+Version: 0.1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template: wp-bootstrap

templates/brands/brand-description.html.twig

@@ -24,6 +24,6 @@
     {% endif %}
 
     <div class="text">
-        {{ term_description()|wptexturize|wpautop|do_shortcode }}
+        {{ term_description()|wptexturize|wpautop|do_shortcode|raw }}
     </div>
 </div>

templates/cart/cart-shipping.html.twig

@@ -24,7 +24,7 @@
     {% if available_methods is defined and available_methods|length > 0 %}
         <ul id="shipping_method_{{ index|default(0) }}" class="list-unstyled mb-2">
             {% for method_id, method in available_methods %}
-                <li class="form-check">
+                <li{% if available_methods|length > 1 %} class="form-check"{% endif %}>
                     {% if available_methods|length > 1 %}
                         <input type="radio"
                                name="shipping_method[{{ index|default(0) }}]"
@@ -40,7 +40,7 @@
                                class="shipping_method"
                                data-index="{{ index|default(0) }}" />
                     {% endif %}
-                    <label class="form-check-label" for="shipping_method_{{ index|default(0) }}_{{ method_id|esc_attr }}">
+                    <label class="{{ available_methods|length > 1 ? 'form-check-label' : '' }}" for="shipping_method_{{ index|default(0) }}_{{ method_id|esc_attr }}">
                         {{ method.get_label()|raw }}
                     </label>
                     {{ do_action('woocommerce_after_shipping_rate', method, index|default(0)) }}

templates/cart/cart-totals.html.twig

@@ -44,7 +44,7 @@
             {# Shipping #}
             {{ do_action('woocommerce_cart_totals_before_shipping') }}
 
-            {% if wc_shipping_enabled() is defined and wc_shipping_enabled() %}
+            {% if wc_shipping_enabled() %}
                 <li class="list-group-item cart-shipping">
                     {{ do_action('woocommerce_cart_totals_shipping') }}
                 </li>

templates/cart/cross-sells.html.twig

@@ -18,7 +18,7 @@
     <section class="cross-sells mt-5">
         {% set heading = heading|default(__('You may be interested in&hellip;')) %}
         {% if heading %}
-            <h2 class="h4 mb-4">{{ heading }}</h2>
+            <h2 class="h4 mb-4">{{ heading|raw }}</h2>
         {% endif %}
 
         {{ woocommerce_product_loop_start() }}

templates/cart/mini-cart.html.twig

@@ -26,7 +26,7 @@
                 <li class="woocommerce-mini-cart-item d-flex gap-3 py-2 border-bottom {{ item.css_class|default('') }}">
                     {# Remove link #}
                     <a href="{{ item.remove_url|esc_url }}"
-                       class="remove remove_from_cart_button text-danger"
+                       class="btn btn-sm btn-outline-danger remove remove_from_cart_button"
                        aria-label="{{ __('Remove this item') }}"
                        data-product_id="{{ item.product_id }}"
                        data-cart_item_key="{{ item.key }}">

templates/checkout/form-login.html.twig

@@ -9,7 +9,7 @@
  # @since 0.1.0
  #}
 
-{% if is_user_logged_in() is defined and not is_user_logged_in() %}
+{% if not is_user_logged_in() %}
     <div class="woocommerce-form-login-toggle mb-4">
         <div class="alert alert-info d-flex align-items-center" role="status">
             <i class="bi bi-person me-2" aria-hidden="true"></i>

templates/checkout/review-order.html.twig

@@ -62,7 +62,7 @@
 
                 {{ do_action('woocommerce_review_order_before_shipping') }}
 
-                {% if wc_shipping_enabled() is defined and wc_shipping_enabled() %}
+                {% if wc_shipping_enabled() %}
                     {{ do_action('woocommerce_review_order_shipping') }}
                 {% endif %}
 

templates/checkout/terms.html.twig

@@ -9,7 +9,7 @@
 
 {{ do_action('woocommerce_checkout_before_terms_and_conditions') }}
 
-{% if wc_terms_and_conditions_checkbox_enabled() is defined and wc_terms_and_conditions_checkbox_enabled() %}
+{% if wc_terms_and_conditions_checkbox_enabled() %}
     <div class="woocommerce-terms-and-conditions-wrapper mb-3">
         {{ do_action('woocommerce_checkout_terms_and_conditions') }}
 

templates/global/form-login.html.twig

@@ -16,7 +16,7 @@
  #}
 
 {% if not is_user_logged_in() %}
-    <form class="woocommerce-form woocommerce-form-login login{% if hidden %} d-none{% endif %}" method="post">
+    <form class="woocommerce-form woocommerce-form-login login{% if hidden is defined and hidden %} d-none{% endif %}" method="post">
 
         {{ do_action('woocommerce_login_form_start') }}
 

templates/myaccount/dashboard.html.twig

@@ -63,5 +63,3 @@
 </div>
 
 {{ do_action('woocommerce_account_dashboard') }}
-{{ do_action('woocommerce_before_my_account') }}
-{{ do_action('woocommerce_after_my_account') }}

templates/order/order-details.html.twig

@@ -71,7 +71,7 @@
                     {% if order.get_customer_note() %}
                         <tr>
                             <th>{{ __('Note:') }}</th>
-                            <td class="text-end">{{ order.get_customer_note()|nl2br|esc_html }}</td>
+                            <td class="text-end">{{ order.get_customer_note()|esc_html|nl2br }}</td>
                         </tr>
                     {% endif %}
                 </tfoot>

templates/product-searchform.html.twig

@@ -20,7 +20,7 @@
         <input type="search"
                id="{{ field_id }}"
                class="form-control"
-               placeholder="{{ __('Search products&hellip;') }}"
+               placeholder="{{ __('Search products…') }}"
                value="{{ get_search_query() }}"
                name="s" />
         <button type="submit" class="btn btn-outline-primary" aria-label="{{ __('Search') }}">

templates/single-product/add-to-cart/variation.html.twig

@@ -26,7 +26,7 @@
 {% endverbatim %}
 
 <script type="text/template" id="tmpl-unavailable-variation-template">
-    <p class="alert alert-warning mb-0">
+    <p class="alert alert-warning mb-0" role="alert">
         {{ __('Sorry, this product is unavailable. Please choose a different combination.') }}
     </p>
 </script>

templates/single-product/product-image.html.twig

@@ -16,9 +16,16 @@
  # @since 0.1.0
  #}
 
-{% set gallery_classes = 'woocommerce-product-gallery' %}
+{% set cols = columns|default(4) %}
+{% set has_images = post_thumbnail_id is defined and post_thumbnail_id %}
+{% set gallery_classes = 'woocommerce-product-gallery woocommerce-product-gallery--columns-' ~ cols %}
+{% if has_images %}
+    {% set gallery_classes = gallery_classes ~ ' woocommerce-product-gallery--with-images' %}
+{% else %}
+    {% set gallery_classes = gallery_classes ~ ' woocommerce-product-gallery--without-images' %}
+{% endif %}
 
-<div class="{{ gallery_classes }}" data-columns="{{ columns|default(4) }}">
+<div class="{{ gallery_classes }}" data-columns="{{ cols }}" style="opacity: 0; transition: opacity .25s ease-in-out;">
     <div class="woocommerce-product-gallery__wrapper">
         {# Main product image #}
         {% if main_image_html is defined and main_image_html %}

templates/single-product/related.html.twig

@@ -18,7 +18,7 @@
     <section class="related products mt-5">
         {% set heading = heading|default(__('Related products')) %}
         {% if heading %}
-            <h2 class="h4 mb-4">{{ heading|esc_html }}</h2>
+            <h2 class="h4 mb-4">{{ heading|raw }}</h2>
         {% endif %}
 
         {{ woocommerce_product_loop_start() }}

templates/single-product/up-sells.html.twig

@@ -18,7 +18,7 @@
     <section class="up-sells upsells products mt-5">
         {% set heading = heading|default(__('You may also like&hellip;')) %}
         {% if heading %}
-            <h2 class="h4 mb-4">{{ heading }}</h2>
+            <h2 class="h4 mb-4">{{ heading|raw }}</h2>
         {% endif %}
 
         {{ woocommerce_product_loop_start() }}

templates/wc-base.html.twig

@@ -24,7 +24,7 @@
     {% block notifications %}
         {% if notifications is defined and notifications|length > 0 %}
             {% for notification in notifications %}
-                <div class="alert alert-{{ notification.type|default('info') }} alert-dismissible fade show" role="alert">
+                <div class="alert alert-{{ notification.type|default('info')|esc_attr }} alert-dismissible fade show" role="alert">
                     {{ notification.message|wp_kses_post }}
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('Close') }}"></button>
                 </div>
@@ -34,7 +34,7 @@
         {% if flash_messages is defined %}
             {% for type, messages in flash_messages %}
                 {% for message in messages %}
-                    <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
+                    <div class="alert alert-{{ type|esc_attr }} alert-dismissible fade show" role="alert">
                         {{ message|wp_kses_post }}
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ __('Close') }}"></button>
                     </div>