Hacer que las miniaturas en WooCommerce reemplacen la imagen principal en lugar de abrir fancybox

Acabo de lograr el efecto por mi cuenta. Lo publicaré aquí por si alguien más encuentra este hilo:

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') elimina el tamaño de la URL de la imagen para devolver la imagen completa y no la miniatura. Reemplázalo con tus propios tamaños de miniaturas.

Mi solución está basada en:

• 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

Solución con JavaScript

Como la respuesta original ya funciona con reemplazo de cadenas, pero debe modificarse para cada caso de uso, aquí hay una solución que utiliza una expresión regular rápida .test() encapsulada en una función autoinvocada que usa el método predeterminado para evitar que ocurran eventos (como seguir enlaces).

Este complemento eliminará la primera aparición de cualquier 2-4 dígitos separados por una x y seguidos por otros 2-4 dígitos. Algunos ejemplos:

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

Aquí está el complemento real. Solo tendrás que completar un detalle: el selector real.

Por hacer: Lo único que tendrás que hacer es proporcionar tu selector real (en lugar de .class-of-the-thumbnail-image) para la imagen. Lo mejor sería (a) completar alguna clase y luego agregar un filtro a la miniatura para agregar esta clase a cada imagen que desees seleccionar.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Tamaño completo de imagen */

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() es rápido, así que lo usamos *antes* de hacer algo
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Un posible punto donde tu complemento podría intervenir sería combinar esto con un filtro en post_thumbnail_html. Este filtro tiene algunos argumentos: $html, $post_id, $post_thumbnail_id, $size, $attr que puedes usar para alterar el HTML.

Otra opción, quizás incluso mejor, sería el filtro wp_get_attachment_image_attributes dentro de wp_get_attachment_image(), que es llamado por get_the_post_thumbnail(), que a su vez está envuelto por the_post_thumbnail().

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

Simplemente agrega algo como lo siguiente al complemento anterior:

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

Solución del lado del servidor: PHP

Mucho más fácil que cualquier otra cosa es usar el siguiente filtro, en caso de que se ajuste a tu caso de uso.

apply_filters( 'post_thumbnail_size', $size );

Puedes simplemente llamar al tamaño completo para cada miniatura de publicación y listo. Luego reduce el tamaño de la imagen mediante CSS.

Después de que WordPress implementó imágenes responsivas en WordPress 4.4, estos otros scripts tienden a tener errores o no funcionar debido a los atributos srcset agregados.

Aquí está el fragmento de código que uso para solucionar los problemas con esto:

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

Encontré este http://www.magictoolbox.com/magiczoomplus/ y maneja lo que necesitaba. Simplemente configuré el zoom como interno (inner) para que no abra una ventana de zoom y tiene la función de hover en miniaturas que reemplaza la imagen principal. Tal vez esto podría ayudar a alguien con un problema similar.

Tuve problemas al usar el ejemplo de la respuesta aceptada, así que lo reescribí un poco, por si alguien necesita un ejemplo funcional, que no dependa del reemplazo del tamaño de la miniatura y que también deshabilite la acción predeterminada de PrettyPhoto.

$(".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;
});