Hello,
Try to add the following PHP code snippet to the child theme functions.php file to do this
add_action(
'woodmart_after_body_open',
function() {
remove_action( 'woodmart_attachment', 'woodmart_lazy_attachment_replace', 10) ;
add_filter('woodmart_attachment', 'woodmart_custom_lazy_attachment_replace', 10, 3);
}
);
add_action(
'woodmart_after_header',
function() {
add_filter('woodmart_attachment', 'woodmart_lazy_attachment_replace', 10, 3);
remove_action( 'woodmart_attachment', 'woodmart_custom_lazy_attachment_replace', 10) ;
}
);
function woodmart_custom_lazy_attachment_replace( $imgHTML, $attach_id, $size ) {
if ( preg_match( "/src=['\"]data:image/is", $imgHTML ) ) return $imgHTML;
if( $attach_id ) {
$lazy_image = woodmart_get_attachment_placeholder( $attach_id, $size );
} else {
$lazy_image = woodmart_lazy_get_default_preview();
}
return woodmart_custom_lazy_replace_image( $imgHTML, $lazy_image );
}
function woodmart_custom_lazy_replace_image( $html, $src ) {
$class = woodmart_custom_lazy_css_class();
$new = preg_replace( '/<img(.*?)src=/is', '<img$1src="'.$src.'" data-wood-src=', $html );
$new = preg_replace( '/<img(.*?)srcset=/is', '<img$1srcset="" data-srcset=', $new );
if ( preg_match( '/class=["\']/i', $new ) ) {
$new = preg_replace( '/class=(["\'])(.*?)["\']/is', 'class=$1' . $class . ' $2$1', $new );
} else {
$new = preg_replace( '/<img/is', '<img class="' . $class . '"', $new );
}
return $new;
}
function woodmart_custom_lazy_css_class() {
$class = 'woodmart-lazy-load-custom';
$class .= ' woodmart-lazy-' . woodmart_get_opt( 'lazy_effect' );
return $class;
}
and this part to the custom JS in Theme Settings
jQuery('.whb-navigation li').on('hover', function(){
jQuery(this).find('.woodmart-lazy-load-custom').each(function () {
var $img = jQuery(this);
$img.attr('src', jQuery(this).data('wood-src'));
$img.addClass('woodmart-loaded');
});
});
Regards
.
