1. Documentation /
  2. WooCommerce Quick View

WooCommerce Quick View

WooCommerce Quick View adds a ‘quick view’ button to product loops that show product details in a lightbox when clicked.

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and select Upload Plugin, then Choose File and select the file you downloaded.
  3. Install Now and Activate the extension.

More information at: Install and Activate Plugins/Extensions.

Setup and Configuration

↑ Back to top
  1. Go to: WooCommerce > Settings > General.
  2. Scroll down to the Quick View section, where you can enable one of two methods for displaying the Quick View pop-up:
  • 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

3. Save changes.

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.

Usage

↑ Back to top

Quick View buttons

↑ Back to top

The Quick View button will look something like this in the loop:

Quick View modal

↑ Back to top

When a Quick View modal is triggered, the product will look similar to this:


The modal window shows the following product information:

  • Product title
  • Product image and variation image (if it is a variable product and a specific variation is selected)
  • Product gallery images (if set)
  • Price
  • Short description
  • Add to cart button
  • SKU
  • Category
  • View Full Details button (links to product page)

Customization

↑ Back to top
Note: This is a Developer level section. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

Changing the Quick View button template

↑ Back to top

To customize 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).

Changing the Quick View template

↑ Back to top

To customize 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.