Bootstrap 4 modal with while loop (woocommerce)

im trying to get woocommerce products in bootstrap 4 modal, im getting all required information in bootstrap modal body but when i click on modal button, bootstrap modal doesnt opens.

            $args = array(
            'post_type'             => 'product',   
            'posts_per_page'        => 6,
            'post_status'           => 'publish',
            'taxonomy' => 'product_cat',
            'hide_empty' => true,
            'exclude'    => 29,
            'parent'   => 0
            $loop = new WP_Query( $args );

            while ( $loop->have_posts() ) : $loop->the_post();
                global $product;
                $id = $product->get_id();

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="<?php echo $id; ?>">
        Launch <?php echo $product->get_id(); ?>
 <!-- Button trigger modal -->

<div class="modal fade" id="<?php echo $id; ?>" tabindex="-1" 
role="dialog" aria-labelledby="<?php echo $id; ?>Label" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
              <?php echo $product->get_id(); ?> 
            <h5 class="modal-title" id="<?php echo $id; ?>Label"><?php echo get_the_title(); ?></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          <div class="modal-body">
            <p id="name"><?php echo get_the_title(); ?></p> 
                    <p id="description"><?php echo $product->get_short_description(); ?></p>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>

how make bootstrap 4 modal work when click on modal button popup is shown

It looks like you’re trying to open the bootstrap modal, passing an id to it. Am I reading your intent correctly?

If so, that’s not how the modals work in bootstrap. The data-target attribute points to an id on the modal. So unless you have a modal for each id (and you shouldn’t), that’s not what you want. Look at the Varying modal content in the modal documentation. That’s the approach you want to use.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.