ok i got it, thanks to chatgpt… for someone who would like to have hover on phone, there is a code…
custom JS
// Function to initialize the effect
function initProductHoverEffect() {
document.querySelectorAll(‘.product-wrapper’).forEach(item => {
item.addEventListener(‘touchstart’, function () {
const mainImage = item.querySelector(‘.product-image-link img’);
const secondaryImage = item.querySelector(‘.hover-img img’);
if (mainImage && secondaryImage) {
mainImage.dataset.originalSrc = mainImage.src;
mainImage.src = secondaryImage.src;
mainImage.classList.add(‘zoom-animation’);
}
});
item.addEventListener(‘touchend’, function () {
const mainImage = item.querySelector(‘.product-image-link img’);
if (mainImage && mainImage.dataset.originalSrc) {
mainImage.src = mainImage.dataset.originalSrc;
mainImage.classList.remove(‘zoom-animation’);
}
});
});
}
// We call the function after the page is loaded
document.addEventListener(‘DOMContentLoaded’, initProductHoverEffect);
// We will call the function after loading the products dynamically using AJAX in the Woodmart theme
jQuery(document).on(‘wood-images-loaded woodmart-ajax-success’, function() {
initProductHoverEffect();
});
custom CSS for simple zoom animation
/* Zoom animation for mobile products */
.zoom-animation {
transition: transform 1s ease;
transform: scale(1.1); /* nastav zoom podľa potreby */
}
.
