В WooCommerce функция масштабирования товаров позволяет покупателям детально просматривать изображения товаров путем увеличения. Однако могут быть случаи, когда вы захотите отключить эту функцию, чтобы согласовать дизайн вашего веб-сайта или оптимизировать взаимодействие с пользователем. В этой статье блога мы рассмотрим несколько способов отключения масштабирования товаров в WooCommerce, а также приведем примеры кода.

Метод 1: использование CSS
Один из способов отключить масштабирование продукта — скрыть или отключить элементы масштабирования с помощью CSS. Вы можете добавить следующий код CSS в файл style.css вашей темы или через настройщик WordPress:

.woocommerce-product-gallery__trigger {
    display: none !important;
}

Этот код скроет триггер масштабирования, не позволяя пользователям активировать функцию масштабирования.

Метод 2: использование JavaScript
Другой метод — отключить функцию масштабирования с помощью JavaScript. Вы можете добавить следующий фрагмент кода в файл function.php вашей темы или создать собственный файл JavaScript:

(function($) {
    $(document).ready(function() {
        $('.woocommerce-product-gallery__image').off('click');
        $('.woocommerce-product-gallery__image').off('touchstart');
    });
})(jQuery);

Этот код удаляет прослушиватели событий click и Touchstart из галереи изображений продуктов, фактически отключая функцию масштабирования.

Метод 3: использование плагина
Если вы предпочитаете более удобный подход, вы можете использовать плагин для отключения масштабирования продукта в WooCommerce. Одним из таких плагинов является «Отключить масштабирование галереи продуктов WooCommerce», который можно установить непосредственно из репозитория плагинов WordPress. После активации плагина функция масштабирования будет отключена без необходимости написания кода.

Метод 4. Настройка файлов шаблонов WooCommerce
Для опытных пользователей вы можете настроить файлы шаблонов WooCommerce, убрав функцию масштабирования. Найдите файл product-image.phpв каталоге шаблонов WooCommerce вашей темы и закомментируйте или удалите следующую строку:

<?php echo wc_get_gallery_image_html( $attachment_id, true ); ?>

При удалении этой строки функция масштабирования будет отключена.

Отключение функции масштабирования товара в WooCommerce может обеспечить более удобный и целенаправленный пользовательский опыт. В этой статье мы рассмотрели различные методы достижения этой цели, включая CSS, JavaScript, плагины и настройку файлов шаблонов. Выберите метод, который лучше всего соответствует вашим потребностям и требованиям веб-сайта, чтобы улучшить взаимодействие с пользователем в вашем магазине WooCommerce.