Fix 10 known bugs: catalog, single product, and account pages (v0.1.5)

Catalog: page title via woocommerce_page_title(), breadcrumbs, category
template rename (underscore), 3-column grid, single chevron on sort.

Single product: variable form data attributes + disabled CSS class fix
(WC JS only toggles CSS classes, not HTML disabled attribute), dark mode
select specificity (0,5,1) to beat WC's (0,4,3) background shorthand,
gallery main image in thumbnail strip with empty URL guard, related/
upsells setup_postdata for correct global $product, grouped product
loop logic rewrite.

Account: downloads via wc_get_customer_available_downloads().

New: product-gallery.js, sanitize_title filter, wc_setup_product_data()
and wp_reset_postdata() Twig functions, product-thumbnails.html.twig
suppressor. Removed obsolete PLAN.md and SETUP.md.

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

assets/css/wc-bootstrap.css

@@ -228,18 +228,12 @@
     line-height: 2.5;
 }
 
-.woocommerce-ordering select {
-    display: inline-block;
-    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    background-color: var(--bs-body-bg);
-    border: var(--bs-border-width) solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius);
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    appearance: auto;
+/* Ordering select — Bootstrap's .form-select handles all styling.
+   Remove duplicate rules that conflict with Bootstrap's dropdown arrow.
+   WooCommerce's woocommerce-layout.css sets background-image on selects;
+   ensure Bootstrap's chevron wins via appearance: none. */
+.woocommerce-ordering .form-select {
+    appearance: none;
 }
 
 /* ==========================================================================
@@ -477,6 +471,19 @@
     color: #fff;
 }
 
+/* Variable product attribute selectors — woocommerce.css sets:
+     .woocommerce div.product form.cart .variations select { background: url(...) no-repeat }
+   at specificity (0,4,3). We must match or exceed that.
+   Override both background-color (white fallback) and background-image (black SVG chevron)
+   so Bootstrap's dark-mode form-select styling takes effect. */
+[data-bs-theme="dark"] .woocommerce div.product form.cart .variations select,
+[data-bs-theme="dark"] .woocommerce div.product .variations .form-select {
+    background-color: var(--bs-body-bg);
+    background-image: var(--bs-form-select-bg-img);
+    color: var(--bs-body-color);
+    border-color: var(--bs-border-color);
+}
+
 /* Checkout form focus color for dark mode */
 [data-bs-theme="dark"] .woocommerce-checkout .form-row input.input-text:focus,
 [data-bs-theme="dark"] .woocommerce-checkout .form-row textarea:focus,

assets/js/product-gallery.js

@@ -0,0 +1,56 @@
+/**
+ * Product Gallery Thumbnail Click Handler
+ *
+ * Swaps the main product image when a gallery thumbnail is clicked.
+ * The first thumbnail is the main product image (always included in the strip).
+ * Also handles gallery fade-in (WooCommerce sets opacity: 0 by default).
+ *
+ * @package WcBootstrap
+ * @since 0.1.5
+ */
+(function () {
+    'use strict';
+
+    function initGallery() {
+        var gallery = document.querySelector('.woocommerce-product-gallery');
+        if (!gallery) return;
+
+        // Fade in the gallery (WooCommerce expects JS to set opacity: 1).
+        gallery.style.opacity = '1';
+
+        var mainImageContainer = gallery.querySelector('.woocommerce-product-gallery__image');
+        if (!mainImageContainer) return;
+
+        var mainImage = mainImageContainer.querySelector('img');
+        if (!mainImage) return;
+
+        var thumbs = gallery.querySelectorAll('.wc-gallery-thumb');
+        if (!thumbs.length) return;
+
+        thumbs.forEach(function (thumb) {
+            thumb.style.cursor = 'pointer';
+            thumb.addEventListener('click', function () {
+                var fullSrc = this.getAttribute('data-full-src');
+                if (!fullSrc) return;
+
+                mainImage.setAttribute('src', fullSrc);
+
+                // Update active state.
+                thumbs.forEach(function (t) {
+                    t.style.opacity = '0.6';
+                    t.classList.remove('border-primary', 'active');
+                    t.classList.add('border');
+                });
+                this.style.opacity = '1';
+                this.classList.add('border-primary', 'active');
+                this.classList.remove('border');
+            });
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initGallery);
+    } else {
+        initGallery();
+    }
+})();