Bootstrap Modal实现WooCommerce产品快速预览问题求助

问题现象 #

点击所有产品的「Quick View」按钮，弹出的模态框始终只显示第一个产品的内容，尝试为按钮data-bs-target和模态框id添加产品ID后缀（#exampleModal-<?php the_ID(); ?>）后仍未生效。

问题根源 #

1. 原按钮的data-bs-target未正确添加产品ID后缀，仍为固定值#exampleModal
2. 模态框代码单独执行了新的WP_Query循环，和产品卡片的循环上下文脱节，导致ID无法正确关联
3. 所有模态框的id均为exampleModal，ID重复后Bootstrap只会匹配页面中第一个该ID的元素

修复方案 #

将模态框代码嵌入产品卡片的循环内部，让每个产品对应生成一个带唯一ID的模态框，同时确保按钮的data-bs-target和模态框id一一对应：

<?php
// 产品列表查询逻辑，可根据实际需求调整参数
$args = array(
    'post_type' => 'product',
    // posts_per_page => 10 等其他参数
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
    while ( $query->have_posts() ) : $query->the_post();
    global $product;
?>
<!-- 产品卡片代码 -->
<div class="row custom-content-product w-100 h-100 p-0 my-2 mx-auto custom-shadow" style="min-height: 75px;">
    <div class="col-md-2 custom-content-product-image p-1">
        <div class="card h-100 w-100 d-flex justify-content-center align-items-center">
            <div class="product-img" style="width: 100px;height: 100px;">
                <?php the_post_thumbnail('', array( 'class' => 'object-fit-contain w-100 h-100', 'alt' => esc_html ( get_the_title() ), 'loading' => 'lazy' )); ?>
            </div>
        </div>
    </div>
    <div class="col-md-8 p-1">
        <div class="card h-100 w-100 overflow-hidden">
            <div class="card-body">
            <span class="my-3"><h5 class="fw-bold"><?php the_title(); ?></h5></span>

            <span class="custom-content-product-price text-green my-2">
                <?php woocommerce_template_loop_price(); ?>
            </span>
        </div>
    </div>
</div>
<div class="col-md-2 d-flex flex-column p-1">
    <div class="card h-100 w-100 p-1 text-center">
        <!-- 按钮关联对应ID的模态框 -->
        <button type="button" class="w-100 h-50 my-1 d-flex justify-content-center align-items-center btn btn-outline-warning text-dark p-1" data-bs-toggle="modal" data-bs-target="#exampleModal-<?php the_ID(); ?>">
            Quick View
        </button>
        <span class="w-100 h-50 my-1"><a class="w-100 h-100 d-flex justify-content-center align-items-center btn btn-outline-warning text-dark p-1" title="product single page link" href="<?php echo get_permalink( $product->get_id() ); ?>">Go Product</a></span>
    </div>
</div>
</div>

<!-- 对应产品的模态框，嵌入循环内部生成唯一ID -->
<div class="modal fade" id="exampleModal-<?php the_ID(); ?>" tabindex="-1" aria-labelledby="exampleModalLabel-<?php the_ID(); ?>" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel-<?php the_ID(); ?>"><?php woocommerce_template_single_title(); ?></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4><?php woocommerce_template_single_title(); ?></h4>
                <?php the_post_thumbnail('', array( 'class' => 'object-fit-contain w-100 h-100', 'alt' => esc_html ( get_the_title() ), 'loading' => 'lazy' )); ?>
                <?php woocommerce_template_loop_price(); ?>
            </div>
        </div>
    </div>
</div>

<?php
    endwhile;
    wp_reset_postdata();
endif;
?>

关键修改点 #

• 将模态框代码移到产品循环内部，确保每个产品生成唯一的id="exampleModal-<?php the_ID(); ?>"
• 按钮的data-bs-target设置为对应的#exampleModal-<?php the_ID(); ?>
• 模态框的aria-labelledby属性也添加产品ID后缀，保证无障碍属性的唯一性
• 复用产品列表的循环上下文，避免重复执行WP_Query造成的资源浪费和上下文混乱

内容的提问来源于stack exchange，提问作者wws34