/templates/single-product/product-image.php

  1. <?php 
  2. /** 
  3. * Single Product Image 
  4. * 
  5. * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php. 
  6. * 
  7. * HOWEVER, on occasion WooCommerce will need to update template files and you 
  8. * (the theme developer) will need to copy the new files to your theme to 
  9. * maintain compatibility. We try to do this as little as possible, but it does 
  10. * happen. When this occurs the version of the template file will be bumped and 
  11. * the readme will list any important changes. 
  12. * 
  13. * @see https://docs.woocommerce.com/document/template-structure/ 
  14. * @author WooThemes 
  15. * @package WooCommerce/Templates 
  16. * @version 3.0.2 
  17. */ 
  18.  
  19. if ( ! defined( 'ABSPATH' ) ) { 
  20. exit; 
  21.  
  22. global $post, $product; 
  23. $columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 ); 
  24. $post_thumbnail_id = get_post_thumbnail_id( $post->ID ); 
  25. $full_size_image = wp_get_attachment_image_src( $post_thumbnail_id, 'full' ); 
  26. $image_title = get_post_field( 'post_excerpt', $post_thumbnail_id ); 
  27. $placeholder = has_post_thumbnail() ? 'with-images' : 'without-images'; 
  28. $wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array( 
  29. 'woocommerce-product-gallery',  
  30. 'woocommerce-product-gallery--' . $placeholder,  
  31. 'woocommerce-product-gallery--columns-' . absint( $columns ),  
  32. 'images',  
  33. ) ); 
  34. ?> 
  35. <div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;"> 
  36. <figure class="woocommerce-product-gallery__wrapper"> 
  37. <?php 
  38. $attributes = array( 
  39. 'title' => $image_title,  
  40. 'data-src' => $full_size_image[0],  
  41. 'data-large_image' => $full_size_image[0],  
  42. 'data-large_image_width' => $full_size_image[1],  
  43. 'data-large_image_height' => $full_size_image[2],  
  44. ); 
  45.  
  46. if ( has_post_thumbnail() ) { 
  47. $html = '<div data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'shop_thumbnail' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">'; 
  48. $html .= get_the_post_thumbnail( $post->ID, 'shop_single', $attributes ); 
  49. $html .= '</a></div>'; 
  50. } else { 
  51. $html = '<div class="woocommerce-product-gallery__image--placeholder">'; 
  52. $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) ); 
  53. $html .= '</div>'; 
  54.  
  55. echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) ); 
  56.  
  57. do_action( 'woocommerce_product_thumbnails' ); 
  58. ?> 
  59. </figure> 
  60. </div> 
.