You've already forked wc-bootstrap
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:
@@ -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 );
|
||||
|
||||
Reference in New Issue
Block a user