WooCommerce Quick View adds a ‘quick view’ button to product loops that show product details in a lightbox when clicked.
Installation ↑ Back to top
- Download the .zip file from your WooCommerce account.
- Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
- Install Now and Activate the extension.
More information at: Install and Activate Plugins/Extensions.
Setup and Configuration ↑ Back to top
- Go to: WooCommerce > Settings > General.
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.
Usage ↑ Back to top
Quick View buttons ↑ Back to top
The quick view button (when enabled) 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 product’s:
- Main featured image
- Short description
- View button
- Cart buttons
Customization ↑ Back to top
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.phpto your theme: woocommerce-quick-view/quick-view.php and edit the file.