Add Bootstrap 5 product archive with card grid and sidebar

Replace WooCommerce's default shop/category page rendering with a
Bootstrap 5 card grid layout featuring responsive columns, sale badges,
star ratings, and an offcanvas sidebar for filters on mobile.

Key implementation details:

- Bypass parent theme's TemplateController for product archives via
  wp_bootstrap_should_render_template filter, render at template_redirect
  priority 11 using the same page shell injection pattern as plugin pages

- Add archive-product.php (Bootstrap layout with optional sidebar) and
  content-product.php (PHP bridge for wc_get_template_part interception)

- Inject global $product into Twig context in TemplateOverride to fix
  empty price/add-to-cart/rating/sale-flash in loop sub-templates — Twig
  has isolated variable scopes and cannot access PHP globals directly

- Fix pagination URLs: use get_pagenum_link() instead of ?page= query
  param (WordPress uses 'paged' for archive pagination, not 'page')

- Fix double-escaped – in result count by adding |raw filter

- Reset WooCommerce float-based layout CSS (woocommerce-layout.css) for
  shop pages to prevent conflicts with Bootstrap flex grid

- Register shop-sidebar widget area with Bootstrap-styled markup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 15:06:33 +01:00
parent 7034134678
commit 00872a6568
9 changed files with 416 additions and 23 deletions

View File

@@ -16,7 +16,7 @@
<ul class="pagination justify-content-center">
{# Previous button #}
<li class="page-item{% if current_page <= 1 %} disabled{% endif %}">
<a class="page-link" href="?page={{ current_page - 1 }}" aria-label="{{ __('Previous') }}">
<a class="page-link" href="{{ fn('get_pagenum_link', current_page > 1 ? current_page - 1 : 1)|esc_url }}" aria-label="{{ __('Previous') }}">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
@@ -29,7 +29,7 @@
</li>
{% elseif i == 1 or i == max_pages or (i >= current_page - 2 and i <= current_page + 2) %}
<li class="page-item">
<a class="page-link" href="?page={{ i }}">{{ i }}</a>
<a class="page-link" href="{{ fn('get_pagenum_link', i)|esc_url }}">{{ i }}</a>
</li>
{% elseif i == current_page - 3 or i == current_page + 3 %}
<li class="page-item disabled">
@@ -40,7 +40,7 @@
{# Next button #}
<li class="page-item{% if current_page >= max_pages %} disabled{% endif %}">
<a class="page-link" href="?page={{ current_page + 1 }}" aria-label="{{ __('Next') }}">
<a class="page-link" href="{{ fn('get_pagenum_link', current_page + 1)|esc_url }}" aria-label="{{ __('Next') }}">
<span aria-hidden="true">&raquo;</span>
</a>
</li>