How to customize the [[additional_product_images]] and [[product_thumbnails]] shortcode

You can  customize the HTML code that is generated by the [[additional_product_images]] and [[product_thumbnails]] shortcodes by adding your own thumbnails.php file to your listing template. 

To do so, first copy the thumbnails.php file that comes with WP-Lister from /wp-content/wp-lister-ebay/views/template/thumbnails.php into your listing template folder. If there is a thumbnails.php file in the listing template, WP-Lister will automatically use that one instead of the built in version.

Now you can customize the thumbnails.php file as you like: You can change the CSS classes, wrap the gallery in other <div> tags, or even implement more advanced features by writing your own PHP code. The default file only contains some basic HTML markup and some JavaScript code to swap the main image when you click or hover over a thumbnail as shown below:

<?php for ($i=0; $i < count($images); $i++) : ?>

	<?php $image_url = $images[$i];	?>
	
	<a href="#" onclick="if (typeof wplOnThumbnailClick == 'function') wplOnThumbnailClick('<?php echo $image_url ?>');return false;" onmouseover="if (typeof wplOnThumbnailHover == 'function') wplOnThumbnailHover('<?php echo $image_url ?>');return false;" >
		<img class="wpl_thumb thumb_<?php echo $i+1 ?>" src="<?php echo $image_url ?>" alt="<?php echo basename( $image_url ) ?>" />
	</a>

<?php endfor; ?>

Still need help? Contact Us Contact Us