Title: Add quick view code to custom loop
Last modified: August 31, 2016

---

# Add quick view code to custom loop

 *  Resolved [Thanh Sang Nguyen](https://wordpress.org/support/users/ntsasng/)
 * (@ntsasng)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/)
 * Hi there.
    A have custom query products to my home page, now I want show button
   quick view in product item. How can I do that? Thanks.
 * [https://wordpress.org/plugins/yith-woocommerce-quick-view/](https://wordpress.org/plugins/yith-woocommerce-quick-view/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Plugin Author [YITHEMES](https://wordpress.org/support/users/yithemes/)
 * (@yithemes)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903617)
 * Hi,
    the quick view button is appended to this woocommerce action on products
   loop “woocommerce_after_shop_loop_item”. Add this action to your custom loop 
   after each products to show quick view button.
 * Let me know if it works.
    Best regards. 🙂
 *  [lazyworks](https://wordpress.org/support/users/lazyworks/)
 * (@lazyworks)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903764)
 * Hi ntsasng,
 * If you want to control the position of the quick view button inside the custom
   query you can do this.
 * `<a href="#" class="button yith-wcqv-button" data-product_id="<?php echo get_the_ID();?
   >">Quick View</a>`
 * Let me know if it helps.
 * Cheers =)
 *  Thread Starter [Thanh Sang Nguyen](https://wordpress.org/support/users/ntsasng/)
 * (@ntsasng)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903765)
 * Hi **Lazyworks**
    Oh, thanks, it work Updated post Cheers.
 *  [sideeq313](https://wordpress.org/support/users/sideeq313/)
 * (@sideeq313)
 * [9 years, 12 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903946)
 * Hi,
    i have tested above code and its working nice.any code available to display
   quick view button when mouse over through the products images. thanks
 *  [sideeq313](https://wordpress.org/support/users/sideeq313/)
 * (@sideeq313)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903949)
 * Hi,
    I have wondered how to impliment this into custom loop “woocommerce_after_shop_loop_item”.
   I have looking for a Qick view concept,when mouse over through the product.
 *  [lazyworks](https://wordpress.org/support/users/lazyworks/)
 * (@lazyworks)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903950)
 * Hi **sideeq313**
 * just insert the code inside the custom loop and it will work fine.
 *  [sideeq313](https://wordpress.org/support/users/sideeq313/)
 * (@sideeq313)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903951)
 * Hi,
    my code is this, <?php $args = array( ‘post_type’ => ‘product’, ‘product_cat’
   => ‘breakfast’, ‘stock’ => 1, ‘posts_per_page’ => 20, ‘orderby’ =>’date’,’order’
   => ‘DESC’ ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $
   loop->the_post(); global $product; ?> <div class=”hm_bfast span3″> ” href=”<?
   php the_permalink(); ?>” title=”<?php the_title(); ?>”> <?php if (has_post_thumbnail(
   $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, ‘product_image’);
   else echo ‘<img src=”‘.woocommerce_placeholder_img_src().'” alt=”Placeholder”
   width=”65px” height=”115px” />’; ?> <h3><?php the_title(); ?></h3> <div class
   =”pric_t”><span class=”price”><?php echo $product->get_price_html(); ?></span
   ></div>  <div class=”cart_boxx”><?php woocommerce_template_loop_add_to_cart( 
   $loop->post, $product ); ?></div>
 *  </div>
    <?php endwhile; ?> <?php wp_reset_query(); ?>
 * how to add qick view feature.when mouse over through the product?
 *  [lazyworks](https://wordpress.org/support/users/lazyworks/)
 * (@lazyworks)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903952)
 * Hi sideeq313
 * Just insert the code inside the while loop where you want the quick button to
   display
 *  [sideeq313](https://wordpress.org/support/users/sideeq313/)
 * (@sideeq313)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903953)
 * Hi lazyworks,
 * I have tested a href link code and working fine.
 * but i want to display Quick view button when hover through the product image 
   or product title.this code always display the Quick View button.ay idea for displaying
   like this?please let me know.
 *  [lazyworks](https://wordpress.org/support/users/lazyworks/)
 * (@lazyworks)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903954)
 * Hi sideeq313
 * You can do this via css
 *     ```
       .yith-wcqv-button {
       	display: none
       }
       .product:hover .yith-wcqv-button {
       	display: block;
       }
       ```
   

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Add quick view code to custom loop’ is closed to new replies.

 * ![](https://ps.w.org/yith-woocommerce-quick-view/assets/icon-128x128.gif?rev=
   3193930)
 * [YITH WooCommerce Quick View](https://wordpress.org/plugins/yith-woocommerce-quick-view/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/yith-woocommerce-quick-view/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/yith-woocommerce-quick-view/)
 * [Active Topics](https://wordpress.org/support/plugin/yith-woocommerce-quick-view/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/yith-woocommerce-quick-view/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/yith-woocommerce-quick-view/reviews/)

 * 10 replies
 * 4 participants
 * Last reply from: [lazyworks](https://wordpress.org/support/users/lazyworks/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/add-quick-view-code-to-custom-loop/#post-6903954)
 * Status: resolved