I have a list of WooCommerce products. I've placed a Bootstrap modal button for each product. When the button is clicked, the modal that opens only displays the first product. I've added the IDs, but it doesn't capture the button's ID and display the product associated with that ID. Can you help me with this?
I added product IDs to the IDs but it is not working product card button: data-bs-target="#exampleModal-<?php the_ID(); ?>"> modal card: id="exampleModal-<?php the_ID(); ?>"
product card:
<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"> <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"> 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> Bootstrap Modal:
<?php $args = array( 'post_type' => 'product' ); $query = new WP_Query( $args ); ?> <?php if ( $query->have_posts() ) : ?> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel"><?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; else: endif; wp_reset_postdata(); ?> 