Implement Phase 2: product archive and shop loop templates (Bootstrap 5)

Add 15 Twig template overrides for the product archive and shop loop:
- archive-product: 3+9 grid layout with optional filter sidebar
- content-product: card component with hook-based content injection
- content-product-cat: category card with thumbnail
- product-searchform: input-group with search icon button
- loop/loop-start, loop-end: responsive row-cols grid
- loop/header: archive title with description hook
- loop/result-count: showing X-Y of Z with aria-relevant
- loop/orderby: form-select-sm sort dropdown
- loop/pagination: delegates to components/pagination.html.twig
- loop/no-products-found: alert-info empty state
- loop/add-to-cart: btn-primary-sm with AJAX data attributes
- loop/price: fw-semibold with sale/regular markup
- loop/rating: Bootstrap Icon stars (full, half, empty)
- loop/sale-flash: badge bg-danger positioned overlay

CSS additions: product card hover, sale badge z-index, star rating sizing,
price del/ins styling, WooCommerce grid reset.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 10:23:09 +01:00
parent 01b807a769
commit c9c99a6b88
17 changed files with 551 additions and 15 deletions

View File

@@ -88,6 +88,71 @@
margin: 0;
}
/* ==========================================================================
Product Cards
Hover effects and layout for product loop cards.
========================================================================== */
.product.card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product.card:hover {
transform: translateY(-2px);
box-shadow: var(--bs-box-shadow) !important;
}
/* Product image in card */
.product.card img {
object-fit: cover;
aspect-ratio: 1 / 1;
width: 100%;
}
/* ==========================================================================
Sale Badge
Positioning for the sale overlay badge on product cards.
========================================================================== */
.onsale {
z-index: 1;
}
/* ==========================================================================
Star Rating
Consistent sizing for Bootstrap Icon star ratings.
========================================================================== */
.wc-star-rating .bi {
font-size: 0.875rem;
}
/* ==========================================================================
Price Styling
Override WooCommerce default price markup with Bootstrap-aligned styles.
========================================================================== */
.price del {
text-decoration: line-through;
color: var(--bs-secondary-color);
font-weight: 400;
}
.price ins {
text-decoration: none;
color: var(--bs-danger);
font-weight: 600;
}
/* ==========================================================================
WooCommerce Grid Override
Reset WooCommerce's default grid to let Bootstrap handle layout.
========================================================================== */
.woocommerce ul.products {
display: contents;
}
/* ==========================================================================
Dark Mode Overrides
Fix any plugin elements that don't adapt to Bootstrap's dark mode.