Замена основного изображения миниатюрами в WooCommerce вместо открытия Fancybox

Я самостоятельно добился нужного эффекта. Публикую решение здесь на случай, если другие пользователи наткнутся на эту тему:

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') удаляет размер из URL изображения, чтобы получить полное изображение вместо миниатюры. Замените этот параметр на размеры ваших миниатюр.

Мое решение основано на:

• 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

Решение на JavaScript

Поскольку оригинальный ответ уже работает с заменой строки, но требует изменений для каждого отдельного случая, вот решение с использованием быстрого Regex .test(), обёрнутого в самовызывающуюся функцию, которая использует стандартный метод для предотвращения событий (например, перехода по ссылкам).

Этот плагин удалит первое вхождение любых 2-4 цифр, разделённых символом x и следующих за другими 2-4 цифрами. Несколько примеров:

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

Вот сам плагин. Вам нужно заполнить только одну часть: фактический селектор.

Что нужно сделать: Единственное, что вам нужно — указать ваш реальный селектор (вместо .class-of-the-thumbnail-image) для изображения. Лучше всего (а) добавить какой-то класс и затем применить фильтр к миниатюре, чтобы добавить этот класс к каждому изображению, которое вы хотите обработать.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Полный размер изображения */

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() работает быстро, поэтому используем его *перед* выполнением действий
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Одним из возможных мест, где может подключиться ваш плагин, является фильтр post_thumbnail_html. Этот фильтр принимает несколько аргументов: $html, $post_id, $post_thumbnail_id, $size, $attr, которые можно использовать для изменения HTML.

Другим, возможно, даже лучшим вариантом будет фильтр wp_get_attachment_image_attributes внутри функции wp_get_attachment_image(), которая вызывается функцией get_the_post_thumbnail(), которая, в свою очередь, обёрнута в the_post_thumbnail().

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

Просто добавьте что-то вроде следующего кода в плагин выше:

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

Решение на стороне сервера: PHP

Гораздо проще всего использовать следующий фильтр — если он соответствует вашему сценарию.

apply_filters( 'post_thumbnail_size', $size );

Вы можете просто указать полный размер для каждой миниатюры записи, и всё готово. Затем уменьшите изображение с помощью CSS.

После того как WordPress реализовал адаптивные изображения в версии 4.4, другие скрипты часто работают некорректно или перестают работать из-за добавленных атрибутов srcset.

Вот сниппет, который я использую для исправления подобных проблем:

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

Я нашел этот http://www.magictoolbox.com/magiczoomplus/ инструмент, который решает мою задачу. Я просто установил zoom в режим inner, чтобы он не открывал отдельное окно с увеличением, а также он поддерживает функцию предпросмотра при наведении на миниатюру, которая заменяет основное изображение. Возможно, это может помочь кому-то с похожей проблемой.

У меня возникли проблемы с использованием примера из принятого ответа, поэтому я немного переписал его. На всякий случай, если кому-то понадобится рабочий пример, не зависящий от размера миниатюр, который также отключает стандартное действие 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;
});