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:

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

To:

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

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

4 Comments

  1. H3h on March 4, 2012 at 1:54 pm

    trolololol

  2. JAZ Lambert on March 19, 2012 at 10:51 am

    This is a great post. I may be adpating this for another Jquery WordPress plugin. 

  3. sonai on November 22, 2012 at 9:03 pm

    good

  4. sonai on November 22, 2012 at 9:04 pm

    great

Leave a Comment