How to hide image caption from Photoswipe WooCommerce image gallery?

Question

Can someone help me please find a way to hide the caption from Photoswipe WooCommerce image gallery?

Answer 1

In your theme's functions.php

// Configure WooCommerce built-in Photoswipe
add_filter( 'woocommerce_single_product_photoswipe_options', function( $options ) {
  // Disable caption element
  $options['captionEl'] = false;
  // Other options
  // $options['shareEl'] = true;
  // $options['counterEl'] = false;
  // $options['arrowEl'] = false;
  // $options['preloaderEl'] = true; // For browsers that do not support CSS animations
  // $options['closeOnScroll'] = false; // Already defaults to false
  // $options['clickToCloseNonZoomable'] = false;
  // $options['closeOnVerticalDrag'] = false;
  // $options['maxSpreadZoom'] = 1;
  // $options['hideAnimationDuration'] = 500;
  // $options['showAnimationDuration'] = 500;
  // $options['barsSize'] = array("top" => 0, "bottom" => "auto");
  return $options;
} );

Don't know if it's possible to configure getThumbBoundsFn here, as you'd have to pass in a Javascript function from PHP to be processed as such...

But these options are written to the page as a global Javascript object wc_single_product_params. So it is possible to later update that object (from Javascript):

wc_single_product_params.photoswipe_options.getThumbBoundsFn = function (index) {
  // find thumbnail element
  var thumbnail = document.querySelectorAll('.woocommerce-product-gallery__image img')[index];

  // get window scroll Y
  var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
  // optionally get horizontal scroll

  // get position of element relative to viewport
  var rect = thumbnail.getBoundingClientRect(); 

  // w = width
  return { x:rect.left, y:rect.top + pageYScroll, w:rect.width };
}