Add Bootstrap 5 single product page layout

Add two-column responsive grid (image gallery + product summary) for
single product pages, following the same bridge pattern used for
product archives.

Key changes:
- Create content-single-product.php bridge and Twig layout template
- Add single product renderer at template_redirect priority 11
- Disable WooCommerce block compatibility layer that strips classic
  hooks when parent theme has theme.json
- Move PHP templates to woocommerce/ subfolder for cleaner structure
- Fix Twig templates to self-compute context data not passed by
  wc_get_template() (tabs, short-description, meta, rating)
- Fix Underscore.js triple-brace syntax conflict in variation template
  by wrapping in {% verbatim %}

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

functions.php

@@ -272,11 +272,11 @@ function wc_bootstrap_remove_default_sidebar(): void {
 add_action( 'init', 'wc_bootstrap_remove_default_sidebar' );
 
 /**
- * Prevent the parent theme from rendering product archives.
+ * Prevent the parent theme from rendering WooCommerce pages.
  *
  * The parent theme's TemplateController hooks template_redirect at priority 10
- * and renders pages/archive.html.twig for all archives (then exits). For product
+ * and renders its own templates for all requests (then exits). For WooCommerce
- * archives, we need to render our own WooCommerce-specific Bootstrap layout instead.
+ * pages we need to render our own Bootstrap layouts instead.
  * Returning false tells the parent theme to skip rendering for this request.
  *
  * @param bool $should_render Whether the parent theme should render.
@@ -284,16 +284,38 @@ add_action( 'init', 'wc_bootstrap_remove_default_sidebar' );
  *
  * @since 0.1.0
  */
-function wc_bootstrap_skip_parent_archive( bool $should_render ): bool {
+function wc_bootstrap_skip_parent_template( bool $should_render ): bool {
     if ( is_post_type_archive( 'product' ) || is_page( wc_get_page_id( 'shop' ) ) ) {
         return false;
     }
     if ( function_exists( 'is_product_taxonomy' ) && is_product_taxonomy() ) {
         return false;
     }
+    if ( function_exists( 'is_product' ) && is_product() ) {
+        return false;
+    }
     return $should_render;
 }
-add_filter( 'wp_bootstrap_should_render_template', 'wc_bootstrap_skip_parent_archive' );
+add_filter( 'wp_bootstrap_should_render_template', 'wc_bootstrap_skip_parent_template' );
+
+/**
+ * Disable WooCommerce's block template compatibility layer.
+ *
+ * The parent theme has theme.json which makes wp_is_block_theme() return true.
+ * WooCommerce detects this and removes classic template hooks (title, price,
+ * add-to-cart, etc.) from single product and archive pages, expecting blocks
+ * to handle rendering instead. Since we render via classic hooks + Twig, we
+ * need the hooks to stay registered.
+ *
+ * @param bool $disabled Whether the compatibility layer is disabled.
+ * @return bool
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_disable_block_compatibility( bool $disabled ): bool {
+    return true;
+}
+add_filter( 'woocommerce_disable_compatibility_layer', 'wc_bootstrap_disable_block_compatibility' );
 
 /**
  * Render product archive pages with Bootstrap 5 layout.
@@ -323,7 +345,7 @@ function wc_bootstrap_render_product_archive(): void {
 
     // Capture WooCommerce archive content via output buffering.
     ob_start();
-    include get_stylesheet_directory() . '/archive-product.php';
+    include get_stylesheet_directory() . '/woocommerce/archive-product.php';
     $content = ob_get_clean();
 
     // Build parent theme context and inject archive content into page shell.
@@ -344,3 +366,50 @@ function wc_bootstrap_render_product_archive(): void {
     exit;
 }
 add_action( 'template_redirect', 'wc_bootstrap_render_product_archive', 11 );
+
+/**
+ * Render single product pages with Bootstrap 5 layout.
+ *
+ * Since the parent theme's TemplateController is blocked for single products
+ * (via wp_bootstrap_should_render_template filter), we render the page ourselves
+ * at priority 11 using the parent theme's TwigService and page shell.
+ *
+ * The single-product.php file fires WooCommerce hooks and is captured via output
+ * buffering, then injected into the parent theme's page template — the same
+ * pattern as wc_bootstrap_render_product_archive().
+ *
+ * @since 0.1.0
+ */
+function wc_bootstrap_render_single_product(): void {
+    if ( ! function_exists( 'is_product' ) || ! is_product() ) {
+        return;
+    }
+
+    if ( ! class_exists( '\WPBootstrap\Twig\TwigService' )
+        || ! class_exists( '\WPBootstrap\Template\ContextBuilder' ) ) {
+        return;
+    }
+
+    // Capture WooCommerce single product content via output buffering.
+    ob_start();
+    include get_stylesheet_directory() . '/woocommerce/single-product.php';
+    $content = ob_get_clean();
+
+    // Build parent theme context and inject product content into page shell.
+    $context_builder = new \WPBootstrap\Template\ContextBuilder();
+    $theme_context   = $context_builder->build();
+    $twig            = \WPBootstrap\Twig\TwigService::getInstance();
+
+    $theme_context['post'] = array_merge(
+        $theme_context['post'] ?? [],
+        [
+            'content'   => $content,
+            'title'     => '',
+            'thumbnail' => '',
+        ]
+    );
+
+    echo $twig->render( 'pages/page.html.twig', $theme_context );
+    exit;
+}
+add_action( 'template_redirect', 'wc_bootstrap_render_single_product', 11 );

templates/content-single-product.html.twig

@@ -0,0 +1,56 @@
+{#
+ # Single Product Content (Bootstrap 5 Override)
+ #
+ # Renders the single product page with a Bootstrap 5 two-column grid:
+ #   Left column (col-lg-6):  Product images (sale flash + gallery)
+ #   Right column (col-lg-6): Product summary (title, rating, price, excerpt,
+ #                             add-to-cart, meta, sharing)
+ #   Full-width rows below:   Tabs, upsells, related products
+ #
+ # All individual components are rendered via WooCommerce action hooks,
+ # which trigger the Bootstrap 5 sub-templates through TemplateOverride.
+ #
+ # Rendered via the content-single-product.php bridge file (not TemplateOverride)
+ # because wc_get_template_part() does not fire the template_part hooks.
+ #
+ # Hook output structure:
+ #   woocommerce_before_single_product_summary → sale flash (10), product images (20)
+ #   woocommerce_single_product_summary        → title (5), rating (10), price (10),
+ #                                               excerpt (20), add-to-cart (30),
+ #                                               meta (40), sharing (50)
+ #   woocommerce_after_single_product_summary  → tabs (10), upsells (15), related (20)
+ #
+ # Context (from bridge file):
+ #   product       - WC_Product object
+ #   product_id    - Product post ID
+ #   product_class - Space-separated CSS class string from wc_get_product_class()
+ #
+ # WooCommerce PHP equivalent: content-single-product.php
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div id="product-{{ product_id }}" class="{{ product_class }}">
+
+    {# Two-column layout: images left, summary right #}
+    <div class="row g-4 g-lg-5 mb-5">
+        {# Left column: Sale flash + Product images #}
+        <div class="col-lg-6">
+            {{ do_action('woocommerce_before_single_product_summary') }}
+        </div>
+
+        {# Right column: Product summary #}
+        <div class="col-lg-6">
+            <div class="summary entry-summary">
+                {{ do_action('woocommerce_single_product_summary') }}
+            </div>
+        </div>
+    </div>
+
+    {# Full-width sections: Tabs, Upsells, Related Products #}
+    {{ do_action('woocommerce_after_single_product_summary') }}
+
+</div>
+
+{{ do_action('woocommerce_after_single_product') }}

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

@@ -11,6 +11,7 @@
  # @since 0.1.0
  #}
 
+{% verbatim %}
 <script type="text/template" id="tmpl-variation-template">
     <div class="woocommerce-variation-description mb-2">
         {{{ data.variation.variation_description }}}
@@ -22,6 +23,7 @@
         {{{ data.variation.availability_html }}}
     </div>
 </script>
+{% endverbatim %}
 
 <script type="text/template" id="tmpl-unavailable-variation-template">
     <p class="alert alert-warning mb-0">

templates/single-product/meta.html.twig

@@ -4,12 +4,7 @@
  # Renders SKU, categories, and tags as a definition list.
  #
  # Expected context:
- #   product - WC_Product object with:
+ #   product - WC_Product object (from TemplateOverride)
- #     .get_sku()          - SKU string
- #     .get_id()           - Product ID
- #   sku                   - SKU string (fallback)
- #   categories_html       - Pre-rendered category links HTML
- #   tags_html             - Pre-rendered tag links HTML
  #
  # WooCommerce PHP equivalent: single-product/meta.php
  #
@@ -17,6 +12,14 @@
  # @since 0.1.0
  #}
 
+{# Compute categories/tags HTML when not passed as context. #}
+{% if categories_html is not defined %}
+    {% set categories_html = fn('wc_get_product_category_list', product.get_id(), ', ') %}
+{% endif %}
+{% if tags_html is not defined %}
+    {% set tags_html = fn('wc_get_product_tag_list', product.get_id(), ', ') %}
+{% endif %}
+
 <div class="product_meta border-top pt-3 mt-3">
     {{ do_action('woocommerce_product_meta_start') }}
 
@@ -26,13 +29,13 @@
             <dd class="col-sm-9">{{ product.get_sku()|esc_html }}</dd>
         {% endif %}
 
-        {% if categories_html is defined and categories_html %}
+        {% if categories_html %}
-            <dt class="col-sm-3 text-body-secondary">{{ __('Categories:') }}</dt>
+            <dt class="col-sm-3 text-body-secondary">{{ fn('_n', 'Category:', 'Categories:', product.get_category_ids()|length, 'woocommerce') }}</dt>
             <dd class="col-sm-9">{{ categories_html|raw }}</dd>
         {% endif %}
 
-        {% if tags_html is defined and tags_html %}
+        {% if tags_html %}
-            <dt class="col-sm-3 text-body-secondary">{{ __('Tags:') }}</dt>
+            <dt class="col-sm-3 text-body-secondary">{{ fn('_n', 'Tag:', 'Tags:', product.get_tag_ids()|length, 'woocommerce') }}</dt>
             <dd class="col-sm-9">{{ tags_html|raw }}</dd>
         {% endif %}
     </dl>

templates/single-product/rating.html.twig

@@ -4,10 +4,7 @@
  # Renders the star rating with review count link on the single product page.
  #
  # Expected context:
- #   product       - WC_Product object
+ #   product - WC_Product object (from TemplateOverride)
- #   rating_count  - Number of ratings
- #   review_count  - Number of reviews
- #   average       - Average rating (0-5)
  #
  # WooCommerce PHP equivalent: single-product/rating.php
  #
@@ -15,7 +12,17 @@
  # @since 0.1.0
  #}
 
-{% if rating_count is defined and rating_count > 0 %}
+{# Guard: bail if ratings are disabled. #}
+{% if fn('wc_review_ratings_enabled') %}
+
+{# Compute rating data from product object when not passed as context. #}
+{% if rating_count is not defined %}
+    {% set rating_count = product.get_rating_count() %}
+    {% set review_count = product.get_review_count() %}
+    {% set average = product.get_average_rating() %}
+{% endif %}
+
+{% if rating_count > 0 %}
     <div class="woocommerce-product-rating d-flex align-items-center gap-2 mb-3">
         <div class="wc-star-rating d-flex align-items-center gap-1"
              role="img"
@@ -31,10 +38,12 @@
             {% endfor %}
         </div>
 
-        {% if review_count is defined and review_count > 0 %}
+        {% if review_count > 0 %}
             <a href="#reviews" class="woocommerce-review-link text-body-secondary text-decoration-none small" rel="nofollow">
-                {{ _n('%s customer review', '%s customer reviews', review_count)|format(review_count) }}
+                {{ fn('_n', '%s customer review', '%s customer reviews', review_count, 'woocommerce')|format(review_count) }}
             </a>
         {% endif %}
     </div>
 {% endif %}
+
+{% endif %}{# wc_review_ratings_enabled #}

templates/single-product/short-description.html.twig

@@ -2,7 +2,8 @@
  # Product Short Description (Bootstrap 5 Override)
  #
  # Expected context:
- #   short_description - Product short description HTML
+ #   product           - WC_Product object (from TemplateOverride)
+ #   short_description - Product short description HTML (optional)
  #
  # WooCommerce PHP equivalent: single-product/short-description.php
  #
@@ -10,7 +11,12 @@
  # @since 0.1.0
  #}
 
-{% if short_description is defined and short_description %}
+{# Compute short description when not passed as context. #}
+{% if short_description is not defined %}
+    {% set short_description = apply_filters('woocommerce_short_description', product.get_short_description()) %}
+{% endif %}
+
+{% if short_description %}
     <div class="woocommerce-product-details__short-description lead text-body-secondary mb-3">
         {{ short_description|raw }}
     </div>

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

@@ -16,7 +16,12 @@
  # @since 0.1.0
  #}
 
-{% if product_tabs is defined and product_tabs|length > 0 %}
+{# Compute tabs from filter when not passed as context (wc_get_template passes no args). #}
+{% if product_tabs is not defined %}
+    {% set product_tabs = apply_filters('woocommerce_product_tabs', {}) %}
+{% endif %}
+
+{% if product_tabs|length > 0 %}
     <div class="woocommerce-tabs wc-tabs-wrapper mt-5">
         {# Tab navigation #}
         <ul class="nav nav-tabs" id="productTabs" role="tablist">

woocommerce/content-single-product.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Single Product Content — PHP Bridge to Twig
+ *
+ * Bridge file that renders the Bootstrap 5 single product template
+ * (content-single-product.html.twig) via the parent theme's TwigService
+ * instead of WooCommerce's default flat layout.
+ *
+ * WooCommerce's wc_get_template_part('content', 'single-product') uses
+ * locate_template() which finds this file in the child theme before falling
+ * back to the plugin template. Unlike wc_get_template(), wc_get_template_part()
+ * does NOT fire the woocommerce_before_template_part / woocommerce_after_template_part
+ * hooks, so the TemplateOverride class cannot intercept it — this bridge file
+ * is needed.
+ *
+ * @package WcBootstrap
+ * @since 0.1.0
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+global $product;
+
+/**
+ * Hook: woocommerce_before_single_product.
+ *
+ * @hooked woocommerce_output_all_notices - 10
+ */
+do_action( 'woocommerce_before_single_product' );
+
+if ( post_password_required() ) {
+	echo get_the_password_form(); // WPCS: XSS ok.
+	return;
+}
+
+if ( class_exists( '\WPBootstrap\Twig\TwigService' ) ) {
+	$twig = \WPBootstrap\Twig\TwigService::getInstance();
+	echo $twig->render( 'content-single-product.html.twig', [
+		'product'       => $product,
+		'product_id'    => $product->get_id(),
+		'product_class' => implode( ' ', wc_get_product_class( '', $product ) ),
+	] );
+} else {
+	// Fallback: include WooCommerce's default template directly.
+	include WC()->plugin_path() . '/templates/content-single-product.php';
+}

woocommerce/single-product.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Single Product Page (Bootstrap 5 Layout)
+ *
+ * Renders the WooCommerce single product content. This file is NOT included
+ * directly by WordPress. Instead, it is captured via output buffering by
+ * wc_bootstrap_render_single_product() and injected into the parent theme's
+ * page shell (pages/page.html.twig). Therefore it does NOT call
+ * get_header()/get_footer() or render the wrapper hooks.
+ *
+ * @package WcBootstrap
+ * @since 0.1.0
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Hook: woocommerce_before_main_content.
+ *
+ * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
+ * @hooked woocommerce_breadcrumb - 20
+ */
+do_action( 'woocommerce_before_main_content' );
+
+while ( have_posts() ) {
+	the_post();
+	wc_get_template_part( 'content', 'single-product' );
+}
+
+/**
+ * Hook: woocommerce_after_main_content.
+ *
+ * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
+ */
+do_action( 'woocommerce_after_main_content' );