1. Home
  2. Knowledge Base
  3. WooCommerce Quick View Pro
  4. Developer Documentation

Javascript API

This article documents the Javascript API for WooCommerce Quick View Pro. This article is aimed at developers.


The window.WCQuickViewPro object provides the following functions:


Binds the events for the Quick View on the current page.


Opens a Quick View modal for a given product.

int productId – The product ID (required)
Element trigger – The DOM element that triggered the quick view action (optional)


An event handler which can be used to open a Quick View modal (e.g. when an element is clicked). The element that triggers the event should have a product_id data attribute defined. E.g.

<a href="#" data-product_id="234">Open Quick View</a>



This is triggered each time a quick view is opened for a product. Event data:

  • modal - the modal object (see below)


This is triggered the first time the quick view is loaded for a product. Subsequent calls to the same product will only trigger the quick_view_pro:open event as the product data is only loaded once. Event data:

  • modal - the modal object (see below)


This is triggered each time the quick view is closed. Event data:

  • modal - the modal object (see below)


This is triggered each time a product is added to the cart from the quick view. Event data:

  • response - the cart response object. This contains the following properties:
    • cart_message - The cart success message. This will only be present if the product was added successfully.
    • error - The error message if adding to the cart has failed.
    • fragments - The cart "fragments" used by WooCommerce. Usually just contains the mini-cart widget.
    • cart_hash - An encoded hash of the cart. This is used by WooCommerce when triggering cart events.
  • modal - the modal object (see below)

The modal object

The modal object passed to each of the Javascript events is the modal object from the jQuery Modal library which is used in Quick View Pro. It contains one main property - $elm - which is a jQuery object for the modal <div> element.

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.