I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id.
Here is the code snippet I've been working on. Unfortunately, it doesn't work as intended because the modal appears behind the black filter and only retrieves the first id on button click.
echo '<a href='.get_permalink($product_id).'?sku='.$product->get_sku().'><button class="second_content">en savoir plus '. $product->get_sku().'</button></a><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>';
echo ' <div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">'.$product->get_sku().'
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>';