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>

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

@@ -24,22 +24,26 @@
       action="{{ product.get_permalink()|esc_url }}"
       method="post"
       enctype="multipart/form-data"
-      {{ variations_attr|default('')|raw }}>
+      data-product_id="{{ product.get_id() }}"
+      data-product_variations="{{ available_variations|json_encode|esc_attr }}">
 
     {{ do_action('woocommerce_before_variations_form') }}
 
-    {% if available_variations is defined %}
-        {# Variation attribute selectors #}
+    {% if available_variations is not same as(false) %}
+        {# Variation attribute selectors.
+           WC PHP uses sanitize_title() on attribute names for name/data-attribute_name
+           so they match the lowercase keys in the variation data JSON. #}
         <div class="variations mb-4">
             {% for attribute_name, options in attributes %}
+                {% set sanitized_name = attribute_name|sanitize_title %}
                 <div class="mb-3">
-                    <label class="form-label fw-semibold" for="{{ attribute_name|esc_attr }}">
+                    <label class="form-label fw-semibold" for="{{ sanitized_name|esc_attr }}">
                         {{ wc_attribute_label(attribute_name)|esc_html }}
                     </label>
-                    <select id="{{ attribute_name|esc_attr }}"
+                    <select id="{{ sanitized_name|esc_attr }}"
                             class="form-select"
-                            name="attribute_{{ attribute_name|esc_attr }}"
-                            data-attribute_name="attribute_{{ attribute_name|esc_attr }}">
+                            name="attribute_{{ sanitized_name|esc_attr }}"
+                            data-attribute_name="attribute_{{ sanitized_name|esc_attr }}">
                         <option value="">{{ __('Choose an option') }}</option>
                         {% if options is iterable %}
                             {% for option in options %}
@@ -54,25 +58,22 @@
             {% endfor %}
         </div>
 
+        {# Reset link — WC JS toggles visibility based on attribute selection #}
+        <a class="reset_variations btn btn-link btn-sm p-0 text-decoration-none" href="#" style="visibility: hidden;">
+            {{ __('Clear') }}
+        </a>
+        <div class="reset_variations_alert screen-reader-text" role="alert" aria-live="polite" aria-relevant="all"></div>
+
         {{ do_action('woocommerce_after_variations_table') }}
 
-        {# Reset link #}
-        <div class="reset_variations_wrapper mb-3" style="display: none;">
-            <a class="reset_variations btn btn-link btn-sm p-0 text-decoration-none" href="#">
-                {{ __('Clear') }}
-            </a>
-        </div>
-
-        {# Single variation display + add-to-cart button #}
+        {# Single variation display + add-to-cart button.
+           The woocommerce_single_variation hook outputs:
+             - priority 10: empty .single_variation div (JS populates via underscore template)
+             - priority 20: .variations_button div with quantity + add-to-cart button
+           No manual wrapper divs — the hooks handle the full DOM structure. #}
         <div class="single_variation_wrap">
             {{ do_action('woocommerce_before_single_variation') }}
-
-            <div class="woocommerce-variation single_variation"></div>
-
-            <div class="woocommerce-variation-add-to-cart variations_button">
-                {{ do_action('woocommerce_single_variation') }}
-            </div>
-
+            {{ do_action('woocommerce_single_variation') }}
             {{ do_action('woocommerce_after_single_variation') }}
         </div>
     {% else %}
@@ -86,3 +87,4 @@
 </form>
 
 {{ do_action('woocommerce_after_add_to_cart_form') }}
+