woocommerce display image captions in single-product thumbnail display

You should know that you must not edit the woo template files under the plugin folder. Woo is set up to use any templates in a particular theme folder if one exists, in place of the default plugin files.

In this case, a custom template is not required, you can use the ‘woocommerce_single_product_image_thumbnail_html’ filter that is being applied in your posted snippet. Hook that filter. Besides the returned value of the sprintf() call, your callback is passed the attachment and product IDs along with the anchor’s class attribute.

Use the attachment ID to get the caption, stored as post_excerpt. Use str_replace() to insert the caption in front of </a> of the sprintf() value. You may want to wrap the caption in a div or span so that it can be easily styled. Return the modified string.

bcworkz, can you please translate what you said into language a beginner like me can understand? this is exactly the functionality I want, but I just don’t understand how to do it from your post.

I’m going to drop the str_replace() part because I can never seem to get that right without testing. The only difference it’ll make is the caption will not link to the full image, which in a way makes more sense anyway. Here ya go:

add_filter('woocommerce_single_product_image_thumbnail_html', 'kqh_add_caption', 10, 4 );
function kqh_add_caption( $html, $id, $parent, $class) {
   $attachment = get_post( $id );
   $img_cap = "<div class=\"img-cap\">$html{$attachment->post_excerpt}</div>";
   return $img_cap;
}

This is untested, let me know if you have problems, I’ll take the time to test. You can style your image + caption div with CSS like this:

.img-cap {
   text-size: 80%;
   text-align: center;
}

You may need to alter the $img_cap html and/or the CSS to get everything to look right. I can help with this too if need be, but I’ll need a link to a page containing the image and caption.

Filter hooks are a common way to customize Woo elements. I encourage you to study the provided code and try to understand every part of it. If you can do that, you’re well on your way to customizing other parts of your site on your own ??

Thanks for taking the time to do this. I tried it out and got no results. I may just not be implementing it right. I use Dynamik Website Builder on a Genesis framework and put the code you gave me in the Dynamik – Custom Options Functions area and CSS area respectively. I believe this does the same thing as adding it to the functions.php file. The page I’m trying to add captions to is here: https://www.gogreenwilmette.org/plantsale/shop/ and/or on the individual product page, like this one: https://www.gogreenwilmette.org/plantsale/product/zig-zag-goldenrod/. I appreciate any further help and agree that I need to study and understand the code. Kevin

I’m sad to report that my code checks out on my installation. It’s out of the box default WP with the WooCommerce plugin installed. I can’t even speculate what’s required for Dynamik, as it’s a commercial app, it’s a dead end in these forums. I doubt it’s the Genesis framework, while I don’t personally use it, I’ve customized many sites that use it and I never had any issues with my custom code added to functions.php.

I will add, in case you do work something out, that this hook only applies to the really small thumbnails, like those on the product page below the main image. The main image does not display the caption. With the little thumbnails, it’ll take some doing to get the CSS correct, the injected caption HTML would likely need some modification, like {$attachment->post_excerpt} being wrapped in its own div. However, the caption does appear, which was the main goal here.

I’m sorry it doesn’t work on your installation, maybe the thing to do is copy the appropriate template(s) to your child theme in a woocommerce/single-product/ folder, then you have total control of all the template code and you don’t have to worry about hooks.

Hey bcworkz

I got this to work however I would like the caption to be at the bottom of the thumbnail, and currently it is located at the top right.

My question is, is there anything in the code that determines the position?. It seems as if the caption is echoing before the thumbnail, how can I echo it at the bottom of the thumb, currently I have the code pasted into my function.php file

Thanks in advance for any help.

The solution

Add the caption as a span

add_filter('woocommerce_single_product_image_thumbnail_html', 'thumb_add_caption', 10, 4 );
function thumb_add_caption( $html, $id, $parent, $class) {
   $attachment = get_post( $id );
   $img_cap = "<div class=\"img-cap\">$html<span class=\"cap-text\">$attachment->post_excerpt</span></div>";
   return $img_cap;
}

This bit of css to move caption to the bottom.

.cap-text { position: relative;
  left: -102px;
  top: 129px;
  font-size: 12px;
}

This is a very useful hook but in my case, it will disable clicking on thumbnails (link: https://vianacanada.tk/product/zegna-shirts/black-pattern-bowtie/) because hooked div will be placed as parent of my theme’s thumbnail div.

By the way, I need to have the same code but instead of caption, I want to display titles above thumbnails.

The solution to show thumbnail titles above each:

add_filter('woocommerce_single_product_image_thumbnail_html', 'thumb_add_title', 10, 4 );
function thumb_add_title( $html, $id, $parent, $class) {
   $attachment = get_post( $id );
   $img_cap = "<div class=\"img-cap\"><span class=\"cap-text\">{$attachment->post_title}</span></div>$html";
   return $img_cap;
}