You've already forked wc-bootstrap
magdev
e234ba6449
Add overflow-hidden to the card <article> so the card's own border-radius clips the product image at the top corners. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
45 lines
1.6 KiB
Twig
45 lines
1.6 KiB
Twig
{#
|
|
# Product Content in Loop (Bootstrap 5 Override)
|
|
#
|
|
# Renders a single product card within the shop loop grid.
|
|
# Uses Bootstrap 5 card component with WooCommerce hook output.
|
|
#
|
|
# Rendered via the content-product.php bridge file (not TemplateOverride)
|
|
# because wc_get_template_part() does not fire the template_part hooks.
|
|
#
|
|
# Hook output structure:
|
|
# woocommerce_before_shop_loop_item → <a> link open
|
|
# woocommerce_before_shop_loop_item_title → sale badge, product image
|
|
# woocommerce_shop_loop_item_title → <h2> product title
|
|
# woocommerce_after_shop_loop_item_title → star rating, price
|
|
# woocommerce_after_shop_loop_item → </a> link close, add-to-cart button
|
|
#
|
|
# WooCommerce PHP equivalent: content-product.php
|
|
#
|
|
# @package WcBootstrap
|
|
# @since 0.1.0
|
|
#}
|
|
|
|
<div class="col">
|
|
<article class="card h-100 shadow-sm overflow-hidden product">
|
|
{{ do_action('woocommerce_before_shop_loop_item') }}
|
|
|
|
{# Product image with sale badge overlay #}
|
|
<div class="position-relative overflow-hidden">
|
|
{{ do_action('woocommerce_before_shop_loop_item_title') }}
|
|
</div>
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
{# Product title #}
|
|
{{ do_action('woocommerce_shop_loop_item_title') }}
|
|
|
|
{# Rating and price #}
|
|
{{ do_action('woocommerce_after_shop_loop_item_title') }}
|
|
</div>
|
|
|
|
<div class="card-footer bg-transparent border-0 pt-0 pb-3 px-3">
|
|
{{ do_action('woocommerce_after_shop_loop_item') }}
|
|
</div>
|
|
</article>
|
|
</div>
|