Включить zoom одного изображения в галерее Woocommerce 3

Начиная с версии 3.0.0 в Woocommerce добавлена поддержка ZOOM`а изображений в галерее. Чтобы включить ее, необходимо в файл functions.php добавить следующий код:

// Включить галерею твоаров
  add_action( 'after_setup_theme', 'gallery_theme_setup' );
  function gallery_theme_setup() {
    add_theme_support( 'woocommerce' );
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-slider' );
  }

По-умолчанию, если к товару добавлено только одно изображение, woocoomerce не будет его зумить, а просто обернет в ссылку. И будет открывать его в отдельной вкладке. Это, конечно, не очень удобно. Благо есть способ это исправить.

Сразу хочу отметить, что этот способ не очень хороший, так как при обновлении woocommerce может перезаписаться файл, который мы будем править.

Файл, который отвечает за инициализацию зума находится по следующему пути: '/wp-content/plugins/woocommerce/assets/js/frontend/single-product.min.js'. Это минифицированная версия с которой не очень удобно работать. Там же находится исходник 'single-product.js' который мы и будем править.

Нужно найти строки, где определяется функция initZoom. Для моей версии woocommerce (3.0.8) это строки 162 — 196. Нас интересует конкретно кусок кода:

if ( image.data( 'large_image_width' ) > galleryWidth ) {
    zoomEnabled = false;
    return false;
  }

Нужно изменить свойство zoomEnabled = true. После этого нужно файл минифицировать и заменить им single-product.min.js

Перейти к верхней панели