Description

WooCommerce Quick View

Show a quick-view button for product details
The quick view plugin adds a ‘quick view’ button to product loops which shows product details in a lightbox when clicked:
Quick-view has two optional triggers; you can either show a ‘quick view’ button in your loop, or you can set non-ajax add to cart buttons to open the lightbox on click (handy for showing variation details as pictured for instance).
WooCommerce Quick View adds a ‘quick view’ button to product loops which shows product details in a lightbox when clicked.

After activating the plugin, you can configure it by going to WooCommerce > Settings.

Configuration ↑ Back to Top
Go to: WooCommerce > Settings > General to see the ‘Quick View’ settings section where you can enable one of two methods for displaying the Quick View pop-up.

QuickView-Button-Settings

Quick View Trigger Settings – Choose what action should trigger the lightbox. Can be set to either:

Quick view button. Insert a quick view button to be appended to the product loop.
Any non-ajax add-to-cart button e.g. variation cart buttons
No other configuration is required.

How do you know if a button is a ‘non-ajax add-to-cart button’? When you select a shop button, does it reload the page? If it does, that is a non-ajax button, this excludes the add-to-cart button.
Quick View buttons ↑ Back to Top
The quick view button (when enabled) will look something like this in the loop:

Screen Shot 2013-04-30 at 14.46.04

Changing the quick view button template

To customise the button, copy woocommerce-quick-view/templates/loop/quick-view-button.php to your theme: woocommerce-quick-view/loop/quick-view-button.php and edit the file.

Alternatively, the button HTML is filtered through the ‘woocommerce_loop_quick_view_button’ filter (modify output with http://codex.wordpress.org/Function_Reference/add_filter).

The quick view modal ↑ Back to Top
When a quick view modal is triggered, the product will appear something like this:

Quick view modal
Quick view modal
The modal window shows the product’s:

Main featured image
Title
Price
Short description
View button
Cart buttons
Changing the quick view template

To customise the product data shown in the modal, copy woocommerce-quick-view/templates/quick-view.php to your theme: woocommerce-quick-view/quick-view.php and edit the file.