Add Image Name in Product Gallery

  • dbnc

    (@dbnc)


    7 years, 10 months ago

    Is there a way to display the name of the image/item under the image thumbnail in the product gallery?

    The name shows if you click on the thumbnail and it opens in Lightbox. I would like names for each image under the thumbnails so the customer knows which image to click on if they are searching by name.

    https://wordpress.org/plugins/woocommerce/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Patrick Rauland

    (@bftrick)

    7 years, 10 months ago

    Hey there,

    Yes you could customize the product page to display a title underneath each picture in the gallery.

    I would look into the woocommerce_single_product_image_thumbnail_html hook located in woocommerce/templates/single-product/product-thumbnails.php. You should be able to use that hook to also display the title.

    If you aren’t a developer I’d recommend finding one for this project. It will be a small project (maybe just 30 minutes) so it should be affordable.

    For any sort of small custom project I always recommend Codeable. They’re great at small tasks where the objective is clear. They’re fast and affordable. I interviewed their CEO here:
    http://speakinginbytes.com/2014/09/codeable-wordpress-tasks/

    I hope that helps! 🙂

    jonathangeorgy

    (@jonathangeorgy)

    7 years, 6 months ago

    Try this in woocommerce/templates/single-product/product-thumbnails.php

    Change this:
    '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</p></a> ',

    to this:
    '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s <p class="gallerytitle">%s</p></a> ',

    And change this:
    wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )

    to this:

    wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props ),
esc_attr( $props['title'] )

    and add some css in your css-file as example:
    .gallerytitle {color: red !important; text-align: center !important; font-size: 11px !important;}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add Image Name in Product Gallery’ is closed to new replies.