can somebody help me how to do it? I need to rewrite some code of quick view i need if somebody push on the quick view icon they got redirected to single product page , not the quick view popup.enter image description here

First Step

Second Step Change to Single of Third Step

enter image description here

CodePudding user response：

Your quick view should be in <a> tag with the data-target="" in which data-target refers to the modal pop up display.

It should be something like this,

In your <a> tag.

<a  class="gift" data-toggle="modal" data-title="<?php echo get_the_title();?>" data-content="<?php $content= get_the_content(); $content1=substr($content,0,20); echo wp_strip_all_tags($content1);  echo "...";?>" data-target="#gift_pop" data-price="<?php echo '&euro;'.$product->get_regular_price();?>" data-id="<?php echo $product->get_id();?>" data-image="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" data-link="<?php the_permalink(); ?>"> <img src="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" alt="">
                                               </a>

In <a> tag itself we should get the data which should be shown in modal popup.

And this is My modal popup html code.

<div class="modal" id="gift_pop" role="dialog">
                        <div class="modal__content">
                            <div class="modal__wrapper">
                                <a  class="modal__close" data-dismiss="modal">
                                    <img src="<?php echo get_template_directory_uri(); ?>/images/login_close.png" alt="">
                                </a>
                                <div class="product_popup">
                                 <div class="acc_img">
                                          <img id="product_pop" src="">
                                </div>
                                  <div class="acc_text">
                                            <p id="product_title_pop"></p>      
                                            <div class="pro_lrt _fl">
                                            <span id="product_price_pop"></span>
                                            </div> 

                                              <p  id="product_content_pop"></p> 
                                             <a id ="product_link_pop" href="">View Details.</a>
                                       
                                     </div>
                                 </div>
                            </div>
                        </div>
                    </div>

The Id of the modal popup should be the data-target value.

And finally the script to append the data which we got in <a> tag.

  <script type="text/javascript">
    //to append values in modal popup
    $(".gift").click(function(){

    var postId = $(this).data('id');
    var image = $(this).data('image');
    var title = $(this).data('title');
    var content= $(this).data('content');
    var price= $(this).data('price');       
    var link= $(this).data('link');
    $('#product_pop').attr("src",image);
    $('#product_title_pop').html(title);
    $('#product_content_pop').html(content);
    $('#product_price_pop').html(price);
    $('#product_link_pop').attr("href",link);
    
});
   
</script>

And thats it! Enjoy.