You've already forked wc-bootstrap
magdev
c5f8e88ee4
WooCommerce's layout CSS fought Bootstrap's grid in three ways: 1. Float-based two-column layout (width: 48% + float) on div.images and div.summary squeezed content inside our col-lg-6 columns. Reset with float: none; width: 100%. 2. Nested content wrapper (.container + #primary + <main>) from woocommerce_output_content_wrapper doubled up on the parent theme's existing .container. Remove the hooks entirely. 3. Sale badge (position: absolute; top: -.5em; z-index: 9) escaped the image column and blocked breadcrumb clicks. Override to top: 0.5em; z-index: 1 and use gx-* (horizontal-only gutters) to avoid negative margin-top on the .row. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
57 lines
2.2 KiB
Twig
57 lines
2.2 KiB
Twig
{#
|
|
# 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 gx-4 gx-lg-5 mb-5">
|
|
{# Left column: Sale flash + Product images #}
|
|
<div class="col-lg-6 position-relative">
|
|
{{ 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') }}
|