Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Add image caption under the first image in a WooCommerce single product page

Using the Add image caption under image thumbnail in WooCommerce single product page answer’s code, I would like to do the same thing, but just for the first image and not for all thumbnails.

How can I do it?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have something with this code

    jQuery(document).ready(function($) {
$('.woocommerce-product-gallery__wrapper').each(function(){
    $('.woocommerce-product-gallery__image', this).after('<div class="legende_image"></div>');
    $('.legende_image', this).html($('img', this).attr('data-caption'));
});   });

    and this css code

    .woocommerce-product-gallery__wrapper {
position: relative;}

.legende_image {
position: absolute;
z-index: 1;
padding: 10px;
background-color: #000;
font-style: italic;
line-height: 1em;
font-size: 14px;
color: #fff;
bottom:0;
white-space: pre-line;}

    But the caption stay on top of my image Do you have an idea ? Thx


  2. 0

    Please try the below hooks,

    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"><span class="cap-text">{$attachment->post_excerpt}</span></div>$html";
   return $img_cap;
}

    or

    function add_caption_below_product_image() {

    echo '<h4 style="text-align: center;">';
    $caption = get_post( get_post_thumbnail_id() )->post_excerpt;
    echo $caption;
    echo '</h4>';
}
add_action( 'woocommerce_product_thumbnails', 'add_caption_below_product_image' );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search