Make thumbnails in woocommerce replace the main image instead of opening fancybox

Question

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.

Answer 1

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:

• https://stackoverflow.com/questions/17307451/replace-main-image-with-thumbnail-on-click-with-jquery
• https://stackoverflow.com/questions/1149747/click-function-not-working-for-me

Answer 2

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.

Answer 3

After Wordpress implemented responsive images in Wordpress 4.4, these other scripts tend to be buggy/not working because of the added srcset attributes.

Here is the snippet I use to fix issues with this:

$(document).on('click', '.thumbnails .zoom', function() {
    var photo_fullsize = $(this).find('img').attr('src').replace('-180x180','');
    var photo_srcset = $(this).find('img').attr('srcset').replace('-180x180','');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('.woocommerce-main-image img').attr('srcset', photo_srcset);
    return false;
});

Answer 4

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.

Answer 5

I had problems using the example from the accepted answer, so re-wrote it a bit, jJust in case anyone should need a working example, not dependant on thumbnail size replacement, which also disables the default PrettyPhoto action.

$(".thumbnails").find("a.zoom").unbind('click');
$('.thumbnails .zoom').on('click', function(e){
    console.log( $('.thumbnails .zoom') );
    var photo_fullsize =  $(this).attr('href');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('a.woocommerce-main-image').attr('href', photo_fullsize);
    return false;
});