Вопрос или проблема
В настоящее время я использую плагин WooCommerce с темой Storefront на своем сайте WordPress. На страницах отдельных продуктов основное изображение продукта имеет поведение по умолчанию при наведении мыши, которое я хочу изменить.
В настоящее время, если навести курсор на центр изображения продукта, срабатывает функция автоувеличения. Однако я хочу отключить этот эффект автоувеличения, при этом сохранив просмотр галереи в полном размере при нажатии на значок лупы.
Я пробовал это в своем файле footer.php дочерней темы Storefront, но это, похоже, не сработало:
<script>
jQuery(document).ready(function($) {
var $easyzoom = $('.woocommerce-product-gallery__image').easyZoom();
var api = $easyzoom.data('easyZoom');
api.teardown();
});
</script>
Попробуйте это, я не могу протестировать это сам, но помню, что использовал что-то подобное в прошлом:
jQuery(document).ready(function($) {
// Отключить зум на изображениях продуктов
$('.woocommerce-product-gallery').trigger('zoom.destroy');
});
Вы можете попробовать это в своем файле functions.php
remove_image_zoom_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support' );
Или попробуйте этот css
.woocommerce ul.products li a img,
.woocommerce div.product div.images img {
pointer-events: none; /* Отключить события наведения */
}
Я не смог найти решение, поэтому попросил помощь у Co Pilot. Вы можете вставить это в свой раздел пользовательского css для виджета изображений продукта или в разделе css кастомизатора. Это сработало:
/* Отключить эффект увеличения при наведении мыши на основное изображение продукта */
.woocommerce-product-gallery__wrapper .zoomImg {
display: none !important;
}
.woocommerce-product-gallery__image img {
pointer-events: none;
}
Ответ или решение
Чтобы отключить функцию автоувеличения при наведении курсора на изображение продукта в теме Storefront для WooCommerce, вы можете воспользоваться несколькими подходами. Вот подробное руководство, которое поможет вам достичь желаемого результата.
1. Отключение функции увеличения с помощью action hook
Вы можете отключить поддержку функции увеличения изображений, добавив следующий код в файл functions.php вашей дочерней темы:
function remove_image_zoom_support() {
remove_theme_support('wc-product-gallery-zoom');
}
add_action('wp', 'remove_image_zoom_support');Этот код уберет поддержку увеличения изображений на страницах товаров, что эффективно отключит автоувеличение на наведение.
2. Использование jQuery для отключения зума
Если вы хотите отключить эффект увеличения с помощью jQuery, попробуйте следующий код. Этот код можно добавить в footer.php вашей дочерней темы или в настройках пользовательских скриптов:
jQuery(document).ready(function($) {
// Уничтожаем зум на изображениях продукта
$('.woocommerce-product-gallery').trigger('zoom.destroy');
});Этот подход использует метод zoom.destroy, чтобы убрать эффект зума.
3. CSS для отключения событий наведения
Если вам нужно отключить события наведения только для изображений, можно использовать CSS. Добавьте этот код в раздел пользовательского CSS в настройках темы или в виджетах:
/* Отключаем эффект увеличения при наведении на главное изображение продукта */
.woocommerce-product-gallery__wrapper .zoomImg {
display: none !important;
}
.woocommerce-product-gallery__image img {
pointer-events: none; /* Отключаем события указателя */
}Этот код уберет изображение при увеличении и отключит любые взаимодействия с изображением.
Резюме
Попробуйте один из вышеперечисленных подходов, чтобы отключить автоувеличение на наведение курсора для изображений товара в WooCommerce с темой Storefront. Первый метод является наиболее чистым и рекомендуемым, так как использует стандартные хуки WordPress. Второй и третий способы предлагают дополнительные варианты в зависимости от ваших потребностей. Надеюсь, это поможет вам решить проблему!