You might want to wrap your woocommerce product thumbnails in specific elements and classes.
We will explore how to do that:
It is possible to modify image wrapping by a simple hook in function.php
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '<div class="imagewrapper">';
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( $post->ID, $size, );
var_dump($output);
}
$output .= '</div>';
return $output;
}
}
The data from get_the_post_thumbnails() comes from: https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
That’s where the img html is formed. This is what I would like to modify. That would require to rewrite the whole wordpress loop if I am not mistaken.
Accessing the image URL might be enough to get us the desired result. To be complete, we should also get the image size and class.
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->id), $size)[0];
get_post_meta( get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true );
Current working code:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '<div class="imagewrapper">';
if ( has_post_thumbnail() ) {
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size);
$image_url =$image_url[0];
# $output .= get_the_post_thumbnail( $post->ID, $size, );
$output .='<img class="lozad" data-src="'.$image_url.'" alt="">';
var_dump($output);
}
$output .= '</div>';
return $output;
}
}