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

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

.woocommerce-product-gallery__image:hover {
    zoom: 1 !important;
}

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

Метод 2: использование плагина
Если вы предпочитаете более удобный подход, не требующий изменения кода, вы можете использовать плагин, специально разработанный для отключения масштабирования изображения продукта WooCommerce. Вот несколько популярных вариантов:

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

b) WooCommerce Simply Disable: этот плагин предлагает ряд опций для настройки вашего магазина WooCommerce, включая возможность отключения функции масштабирования изображения. Установите и активируйте плагин, перейдите к настройкам WooCommerce и найдите вкладку «Продукт». Отсюда вы можете отключить функцию масштабирования одним щелчком мыши.

Метод 3: настройка функций темы
Для более опытных пользователей другой метод предполагает изменение файла function.php темы. Найдите файл в каталоге вашей темы и добавьте следующий фрагмент кода:

add_action( 'after_setup_theme', 'disable_woocommerce_zoom', 100 );
function disable_woocommerce_zoom() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}

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

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