From 7fda8e1962c60fe71bad43a45fea63738e243188 Mon Sep 17 00:00:00 2001 From: magdev Date: Sat, 28 Feb 2026 17:55:39 +0100 Subject: [PATCH] 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 --- functions.php | 81 +++++++++++++++++-- templates/content-single-product.html.twig | 56 +++++++++++++ .../add-to-cart/variation.html.twig | 2 + templates/single-product/meta.html.twig | 23 +++--- templates/single-product/rating.html.twig | 23 ++++-- .../short-description.html.twig | 10 ++- templates/single-product/tabs/tabs.html.twig | 7 +- .../archive-product.php | 0 .../content-product.php | 0 woocommerce/content-single-product.php | 46 +++++++++++ woocommerce/single-product.php | 35 ++++++++ 11 files changed, 257 insertions(+), 26 deletions(-) create mode 100644 templates/content-single-product.html.twig rename archive-product.php => woocommerce/archive-product.php (100%) rename content-product.php => woocommerce/content-product.php (100%) create mode 100644 woocommerce/content-single-product.php create mode 100644 woocommerce/single-product.php diff --git a/functions.php b/functions.php index e94f253..5ca8825 100644 --- a/functions.php +++ b/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 - * archives, we need to render our own WooCommerce-specific Bootstrap layout instead. + * and renders its own templates for all requests (then exits). For WooCommerce + * 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 ); diff --git a/templates/content-single-product.html.twig b/templates/content-single-product.html.twig new file mode 100644 index 0000000..6df42ae --- /dev/null +++ b/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 + #} + +
+ + {# Two-column layout: images left, summary right #} +
+ {# Left column: Sale flash + Product images #} +
+ {{ do_action('woocommerce_before_single_product_summary') }} +
+ + {# Right column: Product summary #} +
+
+ {{ do_action('woocommerce_single_product_summary') }} +
+
+
+ + {# Full-width sections: Tabs, Upsells, Related Products #} + {{ do_action('woocommerce_after_single_product_summary') }} + +
+ +{{ do_action('woocommerce_after_single_product') }} diff --git a/templates/single-product/add-to-cart/variation.html.twig b/templates/single-product/add-to-cart/variation.html.twig index 0e5e800..51fd2c1 100644 --- a/templates/single-product/add-to-cart/variation.html.twig +++ b/templates/single-product/add-to-cart/variation.html.twig @@ -11,6 +11,7 @@ # @since 0.1.0 #} +{% verbatim %} +{% endverbatim %}