[Support request] How can I add a caption to the product images in woo commerce?

[Jens]

How can I add a caption under the product main image in woo commerce?

[Leo]

Hi there,

Does this help?
https://docs.woocommerce.com/document/gallery-captions-for-woocommerce/

Let me know 🙂

[Jens]

Hi Leo,
thanks for your answer.
It works, when I use an image direct into the discreption text. But for the main product picture or photo gallery doesn’t show WooCommerce the caption.
I find this https://stackoverflow.com/questions/32107741/how-to-add-wordpress-image-caption-to-woocommerce-archive-product-shop-page-bu
But can I use this code into the function.php for your theme?

And there is a further plugin from WooCommerce “Gallery Caption”. But really, an further paid plugin only to display the caption?

—–
I have insert this code in httpdocs / wp-content / plugins / woocommerce / templates / single-product / product-image.php

<figcaption><?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
<p class=”caption-head”><?php echo $caption; ?></p>
<?php endif; ?></figcaption>

It works, but it will delete with the next woocommerce update.

[David]

Hi there,

i looked at that Stackoverflow and even if it did work it would simply swap out the Title tag – which would display the tooltip on hover, not an image caption below the image.

I took a look at Woo and it uses this function to output the gallery thumbs:
https://github.com/woocommerce/woocommerce/blob/ca963af1b1f44db42c45c4052e814d5c74dff8b5/includes/wc-template-functions.php#L1452-L1492

Unfortunately there is no filter for its HTML, so outputting a Caption within it is not possible without rewriting that function.

Looking at the template that calls that function:
https://github.com/woocommerce/woocommerce/blob/7701d4b57cb20dc89e25bb7bf2ff872d85f4c535/templates/single-product/product-image.php#L50

We find this filter: woocommerce_single_product_image_thumbnail_html which at first looked great and we could inject our Caption in after the image. Problem with that is the caption will always appear above an image ! doh

…. so adding what seems so simple would require custom development or the Woo paid extensions / plugins.

So finally i came up with this CSS hack – i am not sure how it will work but what it should do is display the ALT Text ( not the caption ) over the very bottom of the image:

.woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:after {
    content: attr(data-thumb-alt);
	position: absolute;
	bottom: 2em;
	left:0;
	padding: 5px 10px;
	background-color: #000;
	color: #fff;
}

[Jens]

Yes, it works. Thanks!

[David]

Awesome – glad to be of help

[melvin wang]

Hi David,

Dropping by to say Thank you.

This is really awesome.

Regards,
Melvin

[David]

You’re welcome Melvin!

[Author]

Posts