...
WooCommerce, Wordpress

How to open quick view pop-up outside of the woocommerce template?

14 February 2019

Hello Friends, Here I would like to show you how you can use your own custom quick view pop-up for woocommerce product preview.

You can use this custom functionality without using the any external plugin for open quick view product. I research many times on the internet but all the time I got solution with specific plugin and we can use it only inside the woocommerce core template files.

Now, I am showing my own example which is works fine for me and for that I used one reference file of woocommerce template the name is “content-single-product.php”

Step 1:

First create a simple file in your theme root directory which is call by the ajax request when user hit on the quick view button.

– In my case the file name is “quickview-ajax.php” and copy the code of woocommerce template file “content-single-product.php” like this.

<?php
require_once("../../../wp-load.php");
$product_id = $_POST['pro_id'];
$product = wc_get_product( $product_id );

function wpdocs_dequeue_script()
{
    wp_dequeue_script('bpb_custom_js');
}
add_action('wp_print_scripts', 'wpdocs_dequeue_script', 100);

wp_head();

if($product_id) {
?>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="product type-product status-publish has-post-thumbnail product_cat-dog-bed first instock shipping-taxable purchasable">
            <a class="close" data-dismiss="modal">X</a>
            <div class="row h-100">
                <div class="col-md-6 my-auto text-center pro_popup_img">
                    <?php
                        /**
                         * Hook: woocommerce_before_single_product_summary.
                         *
                         * @hooked woocommerce_show_product_sale_flash - 10
                         * @hooked woocommerce_show_product_images - 20
                         */
                        do_action( 'woocommerce_before_single_product_summary' );
                    ?>
                </div>
                <div class="col-md-6 pro_popup_content">
                    <div class="prod-detail">
                        <h2><?php echo $product->get_name();?></h2>
                        <div class="popup-price">
                            <?php if ( $price_html = $product->get_price_html() ) : ?>
                                <?php echo $price_html; ?>
                            <?php endif; ?>
                        </div>
                        <div class="popup-desc">
                            <?php 
                                if(strlen($product->get_short_description()) > 150) {
                                    echo substr(apply_filters( 'woocommerce_short_description', $product->get_short_description() ),0,150).' …';    
                                }
                                else {
                                    echo apply_filters( 'woocommerce_short_description', $product->get_short_description());
                                }
                            ?>
                        </div>
                    </div>
                    <div class="add-to-cart-form">
                        <?php woocommerce_template_single_add_to_cart();?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php } ?>
<?php wp_footer(); ?>

– Above file code you can split with you own HTML.
– First, in this file you can see the “wp-load.php” file included. The reason is that by default, we can not use wordpress functions directly without include this type of file.
– Second, we get the query parameter which we passed in ajax request. That is our product ID.
– Third variable is used for getting the product details using product ID.

– Now, You have to call default wordpress function wp_head() and wp_footer() for calling the woocommerce Javascript and Css.
– By calling wp_head(), sometime we have faced some issues regarding the jquery or may be our custom javascript. Because, in our main template file we have already call get_header() and get_footer() so, for that when we call our ajax file it will be call twice.
– If any jquery conflict by calling the wp_head() function so, you can simply dequeue the javascript code using following code.

function wpdocs_dequeue_script()
{
    wp_dequeue_script('bpb_custom_js');
}
add_action('wp_print_scripts', 'wpdocs_dequeue_script', 100);

– Above code I wrote it because, in my case I am facing the issue in my custom javascript file. So, I simply removed it when I open the quick view pop-up.

Step 2:

Now, write the javascript code which is use for call “quickview-ajax.php” file.

// Start Quick popup ajax call
    $('.link').on('click', '.quick_view', function() {
        var pro_id = $(this).attr('data-id');
        var clicked = $(this);
        var hostname = window.location.hostname;
        if(hostname == 'localhost') {
            var hostnameis = hostname+'/foldername/';
        }
        else { 
            var hostnameis = hostname;   
        }
        var protocol = window.location.protocol;
        if(pro_id){
            var data = {
                'pro_id': pro_id
            };
            $.ajax({
                url : protocol+'//'+hostnameis+'/wp-content/themes/theme_name/quickview-ajax.php',
                data:data,
                type:'POST',
                beforeSend: function(xhr){
                    var old_data = clicked.text();
                    clicked.html(old_data+'<i class="fa fa-spinner fa-spin"></i>');
                },
                success:function(data){
                    clicked.html(function(i, origText){
                        return origText.replace('<i class="fa fa-spinner fa-spin"></i>', ''); 
                    });
                    $('#product_popup').html(data);
                    $('#product_popup').modal('show');
                }
            });
        }
    });

Step 3:

Create bootstrap modal div where we can show the modal. I made it last in “footer.php” file.

<div class="modal pro_popup" id="product_popup">

</div>

Output:

Finally, we get output like this.

Leave a Comments