How to: Display WooCommerce Product Categories using NextGEN Gallery in Sidebar Widget

PageLines Framework: v2.1.1
WordPress: v3.3.1
NOTE: these edits have to be re-done every time the plugin is updated!

Goal: Display 4 WooCommerce Product Categories (images, not links) in a custom Widget in the main content area of the Home page. The image thumbnails must link to specific URLs. The 4 Product Category images must be displayed in a single horizontal row (like a product carousel). The “images” of the Product Category must be displayed, NOT the actual products within the Category.

Solution: Use NextGEN Gallery shortcode to display the 4 WooCommerce Product Category images in the Widget. And use JackPlug’s PHP modification to link the images to specific URLs (see ref link below).

Reference (this helped make is all possible): NextGEN Gallery: Link to URL from JackPlug Web Design

1. Edit the NextGEN settings to not use a javascript effect on click. This is under the ‘Gallery->Options->Effects:
   Set the ‘JavaScript Thumbnail effect’ option to ‘None’.

Copy:

gallery-caption.php (wp-content/plugins/nextgen-gallery/view/gallery-caption.php)

And rename it to:

gallery-caption-link.php

Change line 42:

From:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

To:

<a href="<?php echo $image->alttext ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

Then, to attach a link to the Gallery’s thumbnail, go to: Gallery -> Manage Gallery -> choose gallery:

In the Alt & Title Text field add: http://bpelaw.designparc.com/product-category/ebooks/

In the Description field add: eBooks

Finally, place this NextGEN Gallery shortcode in the sidebar “Text” Widget:
[ nggallery id=1 template=caption-link ]
(remove the space after the first square bracket and the space before the last square bracket, so it will work).