Add captions to product slider?

Hi I have set the image carousel on the product page to
full width centred.

I’m just wondering would it be possible to add captions to the images.
I’m a developer so could use jquery or similar if you have any tips.

Thanks

Actually got it working myself

jQuery:

(function($){
    $(".woocommerce-product-gallery__image img").each(function() {
    var imageCaption = $(this).data('caption');
    if (imageCaption != '') {
        $("<span class='img-caption-mycaption'>" + imageCaption +
            "</span>").insertAfter(this);
    }
});
})(jQuery);

CSS:

.img-caption-mycaption {
    position: absolute;
    background: rgba(0,0,0,.5);
    bottom: 0;
    left: 2px;
    color: #fff;
    padding: 10px;
}

Hello,

Thank you very much for sharing the code I am sure it would be helpful as there is no option to show the capture on hover.

Best Regards

[Author]

Posts