Change The Quickview Button Position

The quickview button is output using a WooCommerce hook named
woocommerce_after_shop_loop_item. You can change this to any hook like so:

/**
 * Move quickview button.
 */
function iconic_wqt_move_button() {
	remove_action( 'woocommerce_after_shop_loop_item', array( 'Iconic_WQT_QuickTray', 'output_button' ), 100 );
	add_action( 'woocommerce_before_shop_loop_item', array( 'Iconic_WQT_QuickTray', 'output_button' ), 10 );
}

add_action( 'init', 'iconic_wqt_move_button' );

Add the above code to your child theme’s functions.php file. it will remove the default display of the quickview button, and add it before the product instead.

You can change woocommerce_before_shop_loop_item to any hook in the template files (this one is in templates/content-product.php).

You can also change the value 10 to anything. This is the priority and determines when during the hook it should be displayed. 1 would be first, and 100 would be much later on.

You can also remove the action using the code above, and insert the button manually into a template using PHP:

<?php Iconic_WQT_QuickTray::output_button(); ?>

WooCommerce QuickTray

A modern take on quick view for WooCommerce; expand product details within your product listings for a convenient shopping experience.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.