Getting started with WooCommerce Quickview

Installation

To install the plugin:

  1. Navigate to Plugins > Add New > Upload.
  2. Click Choose File, and choose the file jck_woo_quickview.zip from your CodeCanyon download zip.
  3. Once uploaded, click activate plugin.
  4. The plugin is now installed and activated.
  5. The settings panel can be found under WooCommerce > Quickview. Here you can adjust a variety of settings, all with detailed explanations.

Frontend Usage

Once activated, simply open a category page on your WooCommerce store. When you hover over a product image you will see the Quickview icon appear at the bottom left.

By clicking the Quickview icon, a modal box will appear. Your potential customer can then:

  • View the important product information, including: Price, Description and Variations.
  • Add the product to their cart, via ajax or page reload.
  • View all images of the product.

Manually Insert the Quickview Button

To insert the configured button into your product loop using PHP, simply add the following to the top of the file where you are inserting the button:

<?php global $jckqv; ?>

Then, to display the button in your loop (or anywhere if you pass the correct Product ID), use the following code:

<?php $jckqv->display_button($product_id); ?>

To Insert a button anywhere on your WooCommerce website using HTML, simply use the following code:

<a href="http://www.yourdomain.com/yourproduct" data-jckqvpid="42">Your Link Text</a>

  • The href will be used in the unlikely event that a user has javascript disabled.
  • 42 is the ID of your product to open in the popup.
  • You can use any text, icon or image as the link.

WooCommerce Quickview will work on any element with the data-jckqvpid attribute. For example, you could use a span tag rather than an anchor.

Available Hooks

The following is a list of hooks available in the plugin, making it easy to customise:

  • jckqv-before-description
  • jckqv-after-description
  • jckqv-before-addtocart
  • jckqv-after-addtocart
  • jckqv-before-images
  • jckqv-after-images
  • jckqv-before-meta
  • jckqv-after-meta
  • jckqv-before-price
  • jckqv-after-price
  • jckqv-before-rating
  • jckqv-after-rating
  • jckqv-before-title
  • jckqv-after-title

Modifying a Template

Quickview comes with a variety of template files that build up the modal display. You can modify these by copying any of the files in /wp-content/plugins/jck-qoo-quickview/templates to /wp-content/themes/yourtheme/jck-woo-quickview.

Although it is possible to do the above, I'd recommend using the hooks, rather than modifying a whole template, in order to prevent any conflicts with future updates.

Changelog

3.4.2 (19/06/16)
[fix] Fix Ajax add to cart issue when attribute name/value contains special chars
[update] Compatibility with WooThumbs
[update] Update dependancies
[update] Relative admin_url

3.4.1 (19/06/16)
[update] Author tags
[fix] Issue where add to cart buttons stopped working after opening quickview
[update] Add compatibility for WooCommerce Attribute Swatches by Iconic

3.4.0 (25/04/16)
[fix] Ajax add to cart issues
[update] Updated and refined all javascript
[update] New settings framework refinements
[update] Change SKU on variation selection

3.3.2 (11/03/16)
[fix] Require wp util and jquery for script
[update] Add RTL support

3.3.1 (10/02/16)
[fix] Gallery next/prev not working because of WPML 3.2.6 pid fix
[fix] Button styles

3.3.0 (09/02/16)
[fix] Issue where placeholder image was showing
[update] Settings framework updated - backup before update, and re-save settings if required after update.

3.2.6 (01/02/16)
[fix] WPML issue - pid moved in ajax call
[fix] Updated scripts

3.2.5 (20/01/16)
[update] Compatibility with Shop the Look plugin
[fix] Updated for Woo 2.5.0

3.2.4 (14/01/16)
[update] Compatibility with "Show Single Variations" plugin!
[fix] Add to cart bugs with new WooCommerce versions and variable products
[update] Tidy and refine code

3.2.3 (02/12/15)
[update] New gulpfile and SCSS methods [admin]
[fix] Remove nonce check on add to cart to prevent cache issues

3.2.0 (12/08/15)
[update] Add templating system to allow template overrides]
[update] Filename change to stay in line with WP coding standards Important
[update] Translations

3.1.1 (11/08/15)
[fix] Set spinner width explicitly
[update] Change &$this to $this

3.1.0 (19/05/15)
[Fix] YITH Wishlist compatibility

3.0.9 (01/04/15)
[Fix] Ajax add to cart in some instances

3.0.8 (01/04/15)
[Fix] Set cart cookies when adding to cart, if they're not already set
[Update] New image slider to allow for auto height and offer a better experience
[Update] Add Plus/Minus buttons
[Update] Refactoring classnames and CSS
[Update] Move dynamic CSS to head
[Fix] Fix variable add to cart when using gallery mode
[Fix] Temporary fix for grouped products

3.0.7 (23/07/14)
[Fix] Removed duplicate jcksf messages
[Update] Added error notification for "Sold Individually" products, and other errors.
[Fix] Fixed group products when adding to cart via AJAX.
[Updated] Tested with WooTheme swatches and Variations plugin.

3.0.6
[Update] Added translation files
[Update] Added option to close quickview after adding to cart
[Update] Added hooks to popup for customisation

3.0.5
[Fix] Changed admin scripts to only load on options page
[Fix] Fixed ajax add to cart on some themes

3.0.4
[Update] Updated the AJAX add to cart functionality to update WooCommerce Cart Widget
[Fix] Allow for nested hover

3.0.3
[Fix] Updated for Old WooCommerce
[Fix] Fixed AJAX add to cart URL

3.0.2
[Update] Added setup_postdata, and globals into includes - just in case

3.0.0
[Update] Rewritten for version 2.1.2 of WooCommerce
[Update] Overhaul of options page
[Update] Ajax add to cart
[Update] Default styles
[Update] Option to manually insert button

2.0.2
[Update] Minor translation update
[Fix] Prevent QV from loading on all products in "Related"

2.0.1
[Update] Changed to official AJAX method
[Update] Added option to show full desc or excerpt
[Fix] Moved constructor to remove error

2.0.0
[Update] Responsive functionality
[Update] Gallery functionality
[Update] Options Page to enable/disable product data
[Update] Now utilises ajax

1.0.0
Initial Release

  • Was this Helpful ?
  • yes   no