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>
This commit is contained in:
2026-02-28 17:55:39 +01:00
parent 00872a6568
commit 7fda8e1962
11 changed files with 257 additions and 26 deletions

View File

@@ -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 );