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:
@@ -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">
|
||||
|
||||
@@ -4,12 +4,7 @@
|
||||
# Renders SKU, categories, and tags as a definition list.
|
||||
#
|
||||
# Expected context:
|
||||
# product - WC_Product object with:
|
||||
# .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
|
||||
# product - WC_Product object (from TemplateOverride)
|
||||
#
|
||||
# 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 %}
|
||||
<dt class="col-sm-3 text-body-secondary">{{ __('Categories:') }}</dt>
|
||||
{% if categories_html %}
|
||||
<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 %}
|
||||
<dt class="col-sm-3 text-body-secondary">{{ __('Tags:') }}</dt>
|
||||
{% if tags_html %}
|
||||
<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>
|
||||
|
||||
@@ -4,10 +4,7 @@
|
||||
# Renders the star rating with review count link on the single product page.
|
||||
#
|
||||
# Expected context:
|
||||
# product - WC_Product object
|
||||
# rating_count - Number of ratings
|
||||
# review_count - Number of reviews
|
||||
# average - Average rating (0-5)
|
||||
# product - WC_Product object (from TemplateOverride)
|
||||
#
|
||||
# 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 #}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user