缩略图滑块在单个产品页面上不起作用？

Question

我正在学习woocommerce。我在一个页面上，我正在获取带有缩略图的图像。 现在我必须在缩略图上添加滑块，但我得到的所有图像如下面的截图

我可以使用下面的 css 来做到这一点，但我需要一个合适的滑块，如 Flex slider

.woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
}

我尝试了以下代码，但这仅适用于产品图片，不适用于缩略图。

//single product slider 
add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');
function ud_update_woo_flexslider_options($options) {
      // show arrows
      $options['directionNav'] = true;
      $options['animation'] = "slide";
      // $options['direction'] = 'vertical';
      // infinite loop
      $options['animationLoop'] = true;

      // autoplay (work with only slideshow too)
      $options['slideshow'] = true;
      //$options['autoplay'] = true;

      // control par texte (boolean) ou bien par vignettes
      $options['controlNav'] = true;
      $options['controlNav'] = "thumbnails";

      // $options['mousewheel'] = true;

      return $options;
  }

缩略图必须使用什么钩子？