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

4 Views

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.

Post Views: 4

Related posts

Leave a Reply

5 comments

  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(‘-100×132’) 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:

  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.

  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;
});

  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;
});