如何为Woocommerce商品详情页创建缩略图轮播滑块

一、修改functions.php配置 #

原有代码仅开启了缩略图控制和主图方向导航，还需要补充FlexSlider的轮播核心参数，修改后的代码如下：

add_filter('woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options');
function ud_update_woo_flexslider_options($options) {
      // 主图基础配置
      $options['directionNav'] = true;
      $options['controlNav'] = wp_is_mobile() ? true : 'thumbnails';
      $options['animation'] = 'slide';
      $options['slideshow'] = false;
      $options['animationLoop'] = false;
      // 缩略图轮播配置
      $options['itemWidth'] = 80; // 单个缩略图宽度，可根据需求调整
      $options['minItems'] = 4; // 一行最少显示的缩略图数量
      $options['maxItems'] = 4; // 一行最多显示的缩略图数量
      $options['move'] = 1; // 一次滚动1个缩略图
      return $options;
}

二、替换原有CSS代码 #

原有CSS仅做了基础排列，没有适配轮播需求，修改后的样式如下：

/* 主图导航样式 */
.woocommerce div.product div.images .flex-direction-nav {
    position: absolute;
    top: 40%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce div.product div.images li.flex-nav-prev {
    float: left;
}
.woocommerce div.product div.images li.flex-nav-next {
    float: right;
}
.woocommerce div.product div.images a.flex-prev,
.woocommerce div.product div.images a.flex-next {
    visibility: hidden;
}
.woocommerce div.product div.images a.flex-next::after {
    visibility: visible;
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.woocommerce div.product div.images a.flex-prev::before {
    visibility: visible;
    content: '\f053';
    font-family: 'Font Awesome 5 Free';
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.woocommerce div.product div.images .flex-direction-nav a {
    opacity: 1 !important;
    height: 50px !important;
    position: revert !important;
}

/* 缩略图轮播样式 */
.woocommerce div.product div.images .flex-control-thumbs {
    position: relative;
    overflow: hidden !important;
    display: flex;
    margin: 10px 0 0 0;
    padding: 0 30px;
    box-sizing: border-box;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 0 5px;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 80px !important; /* 和functions.php里的itemWidth参数保持一致 */
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    opacity: 1;
    border: 2px solid #222; /* 选中缩略图高亮边框，可自定义颜色 */
}

/* 缩略图区域导航箭头 */
.woocommerce div.product div.images .flex-control-thumbs::before,
.woocommerce div.product div.images .flex-control-thumbs::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 16px;
    color: #333;
    z-index: 10;
    cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs::before {
    content: '\f053';
    left: 0;
}
.woocommerce div.product div.images .flex-control-thumbs::after {
    content: '\f054';
    right: 0;
}

三、生效操作 #

修改完成后依次清空WooCommerce缩略图缓存、网站缓存、浏览器缓存即可。如果箭头不显示，确认主题已加载Font Awesome 5字体库即可。

内容的提问来源于stack exchange，提问作者Ferhat