Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like the thumbnails underneath the main image on the single product page to replace the main image when they are either clicked or on hover, I prefer hover. Right now the thumbnails just open in their own fancybox. This is a very common feature on most big ecommerce sites and it's weird that it's not an option in woocommerce. Any help will be greatly appreciated.

share|improve this question

3 Answers 3

I have just achieved the effect by my own. I will post it here in case others find this thread:

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    }); 

.replace('-100x132') eliminates the size from url of the image to return the full image and not the thumbnail. Replace it with your own thumbnails sizes.

My solution is based on:

share|improve this answer
1  
'-100x132' can work for you, but who assure anyone else has the same thumbnail size? –  G. M. Aug 20 '13 at 13:53
    
You are right, I edited to be more clear. Thank's for pointing that. –  Gastón Labarthe Aug 20 '13 at 13:59
1  
I'm sure this works great, but something like this for the first line is simpler, I think: jQuery('.thumbnails .zoom').click(function(){ assuming there's other jQuery calls in the page, and so it's enclosed in jQuery(document).ready(function() { etc –  yitwail Sep 20 '13 at 4:14

JavaScript solution

As the original answer already work with string replace, but has to get altered for each and every use case, here's a solution using a fast Regex .test() wrapped up in a self invoking function that uses the default method to prevent events (like following links) from happening.

This plugin will delete the first occurrence of any 2-4 digits separated by an x and followed by another 2-4 digits. Some examples

image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext

Here's the actual plugin. You'll just have to fill in a single bit: The actual selector.

To Do: The only thing that you'll have to do is providing your actual selector (instead of .class-of-the-thumbnail-image) for the image. Best would be to (a) fill in some class and then add a filter to the thumbnail to add this class to every image that you want to target.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Full image size */

add_action( 'wp_footer', 'wpse83993FullImageSize' );
function wpse83993FullImageSize()
{
    ?>
    <script type="text/javascript">
( function( $ ) {
    $( '.thumbnails .zoom' ).on( 'click', function( event ) {
        event.preventDefault();

        var $img = $( this ).find( 'img' ),
            $src = $img.attr( 'src' ),
            search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;

        // Regex .test() is fast, so we use it *before* we actually do something
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

One possible point where your plugin could hook in, would be to combine this with a filter on post_thumbnail_html. This filter has some arguments: $html, $post_id, $post_thumbnail_id, $size, $attr that you can use to alter the HTML.

Another, maybe even better would be the wp_get_attachment_image_attributes-filter inside wp_get_attachment_image(), which is called by get_the_post_thumbnail(), which itself is wrapped by the_post_thumbnail().

apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );

Simply add something like the following to the plugin above:

add_filter( 'wp_get_attachment_image_attributes', 'wpse83993AddDefaultThumbnailClass', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
    $atts['class'] .= "class-of-the-thumbnail-image";
    return $atts;
}

Server side solution: PHP

Much easier than anything else is to use the following filter - in case it meets your use case.

apply_filters( 'post_thumbnail_size', $size );

You can add just call the full size for every post thumbnail and you're fine. Then downsize the image via CSS.

share|improve this answer
    
Great answer! Just a tweak: I had to use this regex: /(-?)(\d{2,4})(x)(\d{2,4})/ to get it to match. –  Magnakai Aug 13 at 16:59

I found this http://www.magictoolbox.com/magiczoomplus/ and it handles what I needed. I just set the zoom to inner so it doesn't open a zoom window and it has thumbnail hover that replaces the main image. Maybe this could help someone with a similar issue.

share|improve this answer
1  
Answers should be more than plain links. They should actually be an answer instead of a route where someone will maybe find an answer. Please help preventing link rot, edit your answer and provide the needed information that helps the OP as well as later visitors to solve their problem. –  kaiser Mar 16 at 1:01

protected by Community Mar 16 at 1:01

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.