Extending Quick View to show on thumbnail click – WooCommerce

Quick View allows you to add the ability to click on a product in your WooCommerce shop and display some basic details about that product in light box without the need to load a new page. Amazon does something similar as does some of the other bigger online retailers.

Out of the box this plugin gives you the option to add a “quick view” button to each product or select any “non-ajax” buttons to trigger the light box. However, for the store I was building I needed the light box to be triggered when you clicked on the thumbnail image instead.

Step 1: Modifying the plugin

Screenshot 2015-10-28 11.22.50
Folders within my theme including the new one for the Quick View plugin

As with any WooCommerce files, in order to modify them without your changes being overwritten the next time there is an update available, all you need to do is copy the file you want to edit into your theme folder. For this plugin I needed to modify the main woocommerce-quick-view.php file, so I created a new folder in my theme titled the same as the plugin and copied the file into that.

Step 2: Creating the option

Once installed and activated, Quick View gives you some new settings under the Settings > General tab in WooCommerce. By default these are ‘Quick View Button’ and ‘Any non-ajax add to cart button’. We need to add a third option for product thumbnail.

To do this, open woocommerce-quick-view.php in your theme and go to approximately line 99. At the time of writing this there was already an option here for thumbnail that has been commented out. Un comment it so that your code now looks like this and save it:

[php highlight=”8,39-44″ language=”wraplines”]

$settings[] = array(
‘id’ =’quick_view_trigger’,
‘name’ = __( ‘Quick View Trigger’, ‘wc_quick_view’ ),
‘desc’ = __( ‘Choose what event should trigger quick view’, ‘wc_quick_view’ ),
‘type’ = ‘select’,
‘options’ = array(
‘button’ = __( ‘Quick View Button’, ‘wc_quick_view’ ),
‘thumbnail’ = __( ‘Product Thumbnail’, ‘wc_quick_view’ ),
‘non_ajax’ = __( ‘Any non-ajax add to cart button’, ‘wc_quick_view’ )
)
);

[/php]

Your options in the admin should now look like this:

Screenshot 2015-10-28 11.27.40

Step 3: Adding the quick view URL to the product thumbnail

Once the option in the admin has been created you need it to actually do something when selected. To do this we will add an action depending on what has been selected.

Move to approximately line 125 in woocommerce-quick-view.php, where yoiu should find

[php] switch ( $this->quick_view_trigger ) { [/php]

We need to add a new trigger, which when fired overwrites the default permalink to the full product details and instead loads the quick view. To do this, in the Switch we add a new case for our thumbnail option that we created:

[php language=”wraplines”]

case ‘thumbnail’ :
$selector = "’a.quick-view-image’";
if (is_shop() || is_product_category() ) :
add_filter( ‘the_permalink’, array( $this, ‘get_quick_view_url’ ) );
endif;
break;
[/php]

Here we’ve created a new trigger, an <a> tag with the class of ‘quick-view-image’. We’ve then added a filter that replaces the permalink for every <a> with that class with the new quick view url created by the plugin. And, as an added measure we’ve added conditional tags to make sure the permalink is only applied to shop archives and product category archives.

Step 4: Amending your product template

Screenshot 2015-10-28 11.45.56The last step is to amend each product listing to use the new options created as well. To do this all we need to do is add the class ‘quick-view-image’ to each product link.

As before in Step 1, copy the correct file from the WooCommerce plugin to our theme file so that we can make changes to the template without it being over written. In this case these are the product listings on the main shop page so we need to edit content-product.php like so:

[html highlight=”5″]

<li <?php post_class( $classes ); ?>>

<?php do_action( ‘woocommerce_before_shop_loop_item’ ); ?>

<a href="<?php the_permalink(); ?>" class="quick-view-image">

<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash – 10
* @hooked woocommerce_template_loop_product_thumbnail – 10
*/
do_action( ‘woocommerce_before_shop_loop_item_title’ );

/**
* woocommerce_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_product_title – 10
*/
do_action( ‘woocommerce_shop_loop_item_title’ );

/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_rating – 5
* @hooked woocommerce_template_loop_price – 10
*/
do_action( ‘woocommerce_after_shop_loop_item_title’ );
?>

</a>

<?php

/**
* woocommerce_after_shop_loop_item hook
*
* @hooked woocommerce_template_loop_add_to_cart – 10
*/
do_action( ‘woocommerce_after_shop_loop_item’ );

?>

</li>

[/html]

And thats it! Happy coding 🙂

NB: It is possible to do this without having to edit the WooCommerce product template as well by being more specific about your trigger in the plugin, instead of relying on a new class. However, this was easier for me at the time as I planned to edit other areas of the product template as well.

Full details about the Quick View add on for WooCommerce and documentation can be found here: https://docs.woothemes.com/document/woocommerce-quick-view/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: