How to set the variant image in Woocommerce 'alt' the same as its name?

I have a problem. I want to assign an alt for each photo in the woocommerce such as the name of the variant. How can I do this?

I found this: How to automatically apply woocommerce product title to all product images alt tags?

but, how can I have titles to have the name of the variant?

1 answer

  • answered 2019-07-19 14:10 kml

    My solution: In file variable.php after "do_action( 'woocommerce_before_add_to_cart_form' )" paste this code:

    $post_slug = get_post_field( 'post_name', get_post(get_the_ID()));
    $title = get_post_field( 'post_title', get_post(get_the_ID()));
    
    if($available_variations) {
    for ($i = 0; $i < count($available_variations); $i++) {
        $value = $available_variations[$i];
        $arrayWithAttribute = $value["attributes"];
        $image = $value["image"];
    
        $stringNameAttribute = http_build_query($arrayWithAttribute,'','-');
        $alt = $post_slug.'-'.str_replace("=","-",str_replace("attribute_pa_","",$stringNameAttribute));
    
        $titleimg = str_replace("-"," ", $title.' '.str_replace("="," ",str_replace("attribute_pa_","",$stringNameAttribute)));
    
        $available_variations[$i]['image']['alt']=$alt;
        $available_variations[$i]['image']['title']= $titleimg;
    }
    }
    

    And paste in function.php:

    function wc_get_gallery_image_html_change( $attachment_id, $main_image = false ) {
            $parent = get_post_field( 'post_parent', $attachment_id);
            $post_slug = get_post_field( 'post_name', get_post(get_the_ID($parent)) );
            $product = wc_get_product( get_the_ID($parent) );
            $available_variations = $product->get_available_variations();
            $actualImage = wp_get_attachment_image_src( $attachment_id, $full_size );
            $title = get_post_field( 'post_title', $parent);
    
            $alt = '';
            $titleimg = '';
            if($available_variations) {
            for ($i = 0; $i < count($available_variations); $i++) {
                $value = $available_variations[$i];
                $arrayWithAttribute = $value["attributes"];
                $image = $value["image"];
    
    
                if($image['url'] === $actualImage[0]) {
    
                $stringNameAttribute = http_build_query($arrayWithAttribute,'','-');
                $alt = $post_slug.'-'.str_replace("=","-",str_replace("attribute_pa_","",$stringNameAttribute));
    
                $titleimg = str_replace("-"," ", $title.' '.str_replace("="," ",str_replace("attribute_pa_","",$stringNameAttribute)));
    
                $available_variations[$i]['image']['alt']=$alt;
    
                $available_variations[$i]['image']['title']= $titleimg;
                }
            }
        }
    
    
            $flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
            $gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
            $thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
            $image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
            $full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
            $thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
            $full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
            $alt_text          = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
    
            $image             = wp_get_attachment_image(
                $attachment_id,
                $image_size,
                false,
                apply_filters(
                    'woocommerce_gallery_image_html_attachment_image_params',
                    array(
                        'title'                   => $titleimg ? $titleimg : _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
                        'data-caption'            => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
                        'data-src'                => esc_url( $full_src[0] ),
                        'data-large_image'        => esc_url( $full_src[0] ),
                        'data-large_image_width'  => esc_attr( $full_src[1] ),
                        'data-large_image_height' => esc_attr( $full_src[2] ),
                        'class'                   => esc_attr( $main_image ? 'wp-post-image' : '' ),
                        'alt'                     => $alt,
                    ),
                    $attachment_id,
                    $image_size,
                    $main_image
                )
            );
            return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '"  class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . '</a></div>';
        }
    

    next edit product-image.php and change line 42 to:

    $html  = wc_get_gallery_image_html_change( $post_thumbnail_id, true );