How to programmatically open a quick view modal
Normally when you use WooCommerce Quick View Pro, shoppers open the lightbox by clicking on a 'Quick View' button on your shop pages. This article explains how to programmatically create custom links to open the quick view lightbox from anywhere else on your WordPress site. These instructions are aimed at developers and if you don't know how to follow them then we recommend posting a job on Codeable to find someone to do it for you:
To create a custom quick view button for a specific product, you can use some special attributes to trigger the quick view in a URL:Â
<a href="#" data-action="quick-view" class="wc-quick-view-button with-icon button" data-product_id="336">Open Quick View</a>
The data-product_id should be set to the ID of the product that you want to show in the quick view lightbox. In the href parameter, you can either enter the product URL or #. You can also add classes or add your own styles to the existing classes and change the design of the button.
You can place this code in any WooCommerce page which our Quick View scripts are loaded. If you want to put this button in another page, then you need to also load the scripts on that page:
add_filter( 'wc_quick_view_pro_scripts_enabled_on_page', function( $enabled ) {
// Check if it's the wanted page
if( get_the_ID() ===Â 123 ) {
return true;
}
return $enabled;
} );