Archived topic
Caption for the Gallery Images on Niche theme
3 replies · Started by Marcel on May 26, 2020
Hello,
I would like to have the image captions under every image in the single product page. I set up the right title, caption and alternative text on the Media library, but on the front end, on the single product page, when hovering over the image I can see just the title. I would like to have the caption under the image. May I have your support?
Thank you!
Marcel
Hi there,
in Appearance > Elements - edit the Hook: Gallery Stack.
Replace the code with this:
<div class="woo-sumamry-wrap"><!-- open wrap -->
<div class="woo-gallery-stack hide-on-mobile">
<?php
global $product;
// Get post product thumbnail
if ( has_post_thumbnail( $product->get_id() ) ) {
$attachment_ids[0] = get_post_thumbnail_id( $product->get_id() );
$attachment = wp_get_attachment_image_src( $attachment_ids[0], 'full' );
$attachment_alt = get_post_meta( $attachment_ids[0], '_wp_attachment_image_alt', TRUE);
$attachmnent_title = get_the_title( $attachment_ids[0] );
$attachmnent_caption = wp_get_attachment_caption( $attachment_ids[0] );
?>
<img src="<?php echo $attachment[0] ; ?>" alt="<?php echo $attachment_alt; ?>" title="<?php echo $attachmnent_title; ?>" />
<?php
if ( $attachmnent_caption ) {
echo '<div class="woo-gallery-caption">' . $attachmnent_caption . '</div>';
}
}
// Get Product Gallery Images
if ( method_exists( $product, 'get_gallery_image_ids' ) ) {
$product_image_ids = $product->get_gallery_image_ids();
foreach( $product_image_ids as $product_image_id ) {
$image_url = wp_get_attachment_url( $product_image_id, 'full' );
$image_alt = get_post_meta( $product_image_id, '_wp_attachment_image_alt', TRUE);
$image_title = get_the_title( $product_image_id );
$image_caption = wp_get_attachment_caption( $product_image_id );
echo '<img src="' . $image_url . '" alt="' . $image_alt . '" title="' . $image_title . '">';
if ( $image_caption ) {
echo '<div class="woo-gallery-caption">' . $image_caption . '</div>';
}
}
}
// Closing div found in Close Summary Wrap element?>
</div>
David, thanks a lot.
You're welcome