Add title underneath WooCommerce product gallery images

Question

I want to get the 'title' of each image to display underneath each image in the Woocommerce product gallery. Not the main image, but the smaller clickable thumbnails.

All of my images currently have titles set.

I have looked in product-thumbnails.php and have found this code:

if ( $attachment_ids && has_post_thumbnail() ) {
foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id  ), $attachment_id );
}
}

I believe this is what I need to edit but I am not sure what to add.

I also found this post where a similar thing has been asked but for captions Show caption under product gallery in WooCommerce, however it doesn't work when I add it

Any ideas?

EDIT

So I have copied the function from wc-template-functions.php into my child themes functions.php file:

function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
$flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
$image             = wp_get_attachment_image( $attachment_id, $image_size, false, array(
    'title'                   => get_post_field( 'post_title', $attachment_id ),
    'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
    'data-src'                => $full_src[0],
    'data-large_image'        => $full_src[0],
    'data-large_image_width'  => $full_src[1],
    'data-large_image_height' => $full_src[2],
    'class'                   => $main_image ? 'wp-post-image' : '',
) );

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a></div>';
}

I also renamed the function wc_get_gallery_image_with_title_html as well as changing the return line to this:

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';

It doesn't seem to work. However, if i add in the word TEST in place of $imageTitle in the return line above to see if anything will appear, the word TEST does appear below every image.

The word test doesnt appear under each thumbnail though, it appears under the main gallery image.

What am I missing or doing wrong here?

EDIT

Now the title shows thanks to Zipkundan's help, but it shows under the main image and not under each thumbnail. How can I move it to show under each relevant thumbnail?

Answer 1

Here, "wc_get_gallery_image_html( $attachment_id )" (one of the argument in the filter) is what outputs the final html. This is a function defined in "wc-template-functions.php". Thus you can not alter this function. You can see the function code at following URL: https://web.archive.org/web/20180722181406/http://woocommerce.wp-a2z.org/oik_api/wc_get_gallery_image_html

Well, here's some hint for you to workout your way. Hope you are using child theme. Copy the function code (the function which is passed as argument in filter) in your child theme's "functions.php" file. Name the function something different, say "wc_get_gallery_image_with_title_html". Alter that code to append the image title in the 'return' statement. Something like:

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';

Where, $imageTitle will be the title of the image wrapped into some html tag like 'span' or 'p'.

Then copy the file "product-thumbnails.php" into you child theme and replace the original function argument with the new function you have created. So the code becomes like this:

if ( $attachment_ids && has_post_thumbnail() ) {
foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_with_title_html( $attachment_id  ), $attachment_id );
}}

Hope this helps.

Update (after your Edit)

Hi Kiki,

You were missing output of the image title in the function. Following is the updated function.

function wc_get_gallery_image_with_title_html( $attachment_id, $main_image = false ) {
$flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
$image             = wp_get_attachment_image( $attachment_id, $image_size, false, array(
    'title'                   => get_post_field( 'post_title', $attachment_id ),
    'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
    'data-src'                => $full_src[0],
    'data-large_image'        => $full_src[0],
    'data-large_image_width'  => $full_src[1],
    'data-large_image_height' => $full_src[2],
    'class'                   => $main_image ? 'wp-post-image' : '',
) );
$imageTitle         = '<span>' . esc_html( get_the_title($attachment_id) ) . '</span>';

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';
}

Note the line before 'return' statement.

Try using the above function and don't forget to change the argument function in "product-thumbnails.php".

Also, once you get the image title text displayed, you might need to add some css rules for the text to display properly.

Hope this works.

Answer 2

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img').attr('data-caption');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});

Answer 3

Since the gallery thumbnail images are dynamically generated and appended via javascript, it can be customized only via javascript.

Following javascript custom function will append the title of product image in the gallery to its respective thumbnail in gallery navigation.

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img.wp-post-image').attr('title');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});

You can see a working example here. http://woocom.stuprohosting.in/product/vneck-tee/

If this gives you desired result, then I would recommend to discard changes you have made in "functions.php" and "product-thumbnails.php" which I suggested in previous answer.

I have used plugin "Header and Footer Scripts" to add this custom function in website footer. https://wordpress.org/plugins/header-and-footer-scripts/