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. 🙂
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 =)
Hi Lazyworks
Oh, thanks, it work
Updated post
Cheers.
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
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.
Hi sideeq313
just insert the code inside the custom loop and it will work fine.
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?
Hi sideeq313
Just insert the code inside the while loop where you want the quick button to display
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.
Hi sideeq313
You can do this via css
.yith-wcqv-button {
display: none
}
.product:hover .yith-wcqv-button {
display: block;
}
