Wordpress img alt text

Question

I'm looking to print out the alt text for each thumbnail image on this page http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/

However the first image alt text seems to be used for ALL thumbnail images even though the alt text are different. Any help is much appreciated.

global $post, $product, $woocommerce;

$attachment_ids = $product->get_gallery_attachment_ids();

if ( $attachment_ids ) {
?>
<div id="product-images" class="thumbnails"><?php
    $small_img   = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-thumbnail');
    $middle_img  = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product');
    $large_img   = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-zoom');
    $img_id = get_post_thumbnail_id(get_the_id());
    $alt_text = get_post_meta($img_id, '_wp_attachment_image_alt', true);


    echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
              <img src="' . $small_img[0] . '" alt="' . $alt_text . '">
          </a>';
    $loop = 0;
    $columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );

    foreach ( $attachment_ids as $attachment_id ) {

        $classes = array( 'zoom' );

        if ( $loop == 0 || $loop % $columns == 0 )
            $classes[] = 'first';

        if ( ( $loop + 1 ) % $columns == 0 )
            $classes[] = 'last';

        $image_link = wp_get_attachment_url( $attachment_id );

        if ( ! $image_link )
            continue;

        // $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
        // $image_class = esc_attr( implode( ' ', $classes ) );
        // $image_title = esc_attr( get_the_title( $attachment_id ) );
        $small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
        $middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
        $large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );

        // echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s"  rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
        echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
                  <img src="' . $small_img[0] . '" alt="' . $alt_text . '">
              </a>';

        $loop++;
    }

?></div>
<div class="carousel-prev product-prev"></div>
<div class="carousel-next product-next"></div>
<?php

}

Answer 1

You set your $alt_text value when you handle the post thumbnail, outside the foreach loop.

In your foreach loop, when you are going through the attachments, you have forgotten to update the value.

Try something like this in the foreach loop:

$small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
$middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
$large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);