Woocommerce 3.x 产品库滑块中的导航箭头答案

【问题标题】：Navigation arrows in Woocommerce 3.x product gallery sliderWoocommerce 3.x 产品库滑块中的导航箭头
【发布时间】：2017-09-21 21:17:19
【问题描述】：

是否有人能够在新的 woocommerce 滑块中为 Next/Prev 幻灯片添加导航箭头？

特别是在移动/桌面上的缩略图导航很棒，但是对于桌面用户来说，箭头也是一个梦想！主产品图片上的箭头优先于灯箱。您将在我们的网站上了解原因： http://52.56.199.58/collection/bedroom/giorgetti-syn-bedside-table/

这似乎是 Woocommerce 忘记的一个简单而明显的选择。任何帮助或指导将不胜感激。

干杯

【问题讨论】：

标签： woocommerce flexslider

【解决方案1】：

您可以通过挂钩'woocommerce_single_product_carousel_options' 过滤器来更新 WooCommerce V3 中的 Flexslider 选项。因此，为了启用导航箭头，“directionNav”选项应设置为“true”。

把这个示例函数放在你的functions.php文件中，你应该很高兴：

// Update WooCommerce Flexslider options

add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

【讨论】：

感谢您的回答，还有什么方法可以更新缩略图选项吗？我希望他们表现得像一个滑块。在这里查看我的完整问题：stackoverflow.com/questions/49938106/…
@udog, 如何为缩略图添加滑块？

【解决方案2】：

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
    font-family: FontAwesome;margin-right: 10px;font-size: 70px;    }
a.flex-prev::before {
    visibility:visible;
    content: '\f104';
    font-family: FontAwesome;    margin-left: 10px;font-size: 70px;}

【讨论】：

【解决方案3】：

使用 woocommerce 3.5.3 获得更多测试价值

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";

      // 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;
  }

【讨论】：