Quick View has one setting and no styling options, so its button and pop-up are changed with CSS, two templates and six hooks. Add hooks in a code snippets plugin or your child theme’s functions.php. Customizations like these aren’t covered by support, so test them on a staging site first.
For what the plugin does without any code, see Get started with Quick View.
When you’d use this
- Change the Quick View button’s text, icon or markup.
- Add content to the pop-up, or rearrange it.
- Hide the button for some products or categories.
- Open the pop-up from your own buttons or links.
Template overrides
Two templates in the plugin’s templates folder control what shoppers see:
loop/quick-view-button.php: the Quick View button in product lists.quick-view.php: the pop-up’s content.
To change one, copy it into a woocommerce-quick-view folder in your child theme, keeping the subfolder: your-theme/woocommerce-quick-view/loop/quick-view-button.php or your-theme/woocommerce-quick-view/quick-view.php. WordPress loads your copy instead of the plugin’s, so plugin updates don’t overwrite it. After an update, compare your copy with the plugin’s template in case it changed.
The pop-up template runs the same hooks as the main area of a product page: woocommerce_before_single_product_summary (sale badge and images) and woocommerce_single_product_summary (title, rating, price, short description, add to cart, meta and sharing). Most changes you’ve made to your product pages with those hooks also show in the pop-up.
Actions
wc_quick_view_enqueue_scripts
Fires on every front-end page, before Quick View registers its script and stylesheet.
wc_quick_view_before_single_product
Fires inside the pop-up, before the product content.
wc_quick_view_after_single_product
Fires inside the pop-up, after the product content and the View full details button.
Filters
woocommerce_loop_quick_view_button
Filters the Quick View button’s HTML. It receives the HTML and the WC_Product. Return an empty string to hide the button for a product:
add_filter( 'woocommerce_loop_quick_view_button', function ( $html, $product ) {
if ( has_term( 'gift-cards', 'product_cat', $product->get_id() ) ) {
return '';
}
return $html;
}, 10, 2 );quick_view_selector
Filters the CSS selector for what opens the pop-up when clicked. The default is a.quick-view-button with Quick view button, and the product list buttons described under Quick View trigger with Any non-ajax add to cart button. The clicked element needs a data-product_id attribute with the product’s ID, as WooCommerce’s own list buttons have.
woocommerce_loop_quick_view_link_args
Filters the query arguments for the request that loads the pop-up’s content: wc-api (WC_Quick_View), product (a placeholder the script replaces with the product ID) and ajax.
Keep learning
- Get started with Quick View (the trigger setting, where the button appears and common issues)
- How to add custom CSS to your site (styling without template changes)
- Changing text in a plugin (rewording the button without code)